The new Angular support not working properly

[PointSingularity]

I just saw the new release, and I wanted to try out the new Angular support. I created a new Angular v14 application, tried the steps in the documentation, and I am getting this error:

package.json
{
  "name": "autoanimate",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.1.3",
    "@angular/common": "^14.1.3",
    "@angular/compiler": "^14.1.3",
    "@angular/core": "^14.1.3",
    "@angular/forms": "^14.1.3",
    "@angular/platform-browser": "^14.1.3",
    "@angular/platform-browser-dynamic": "^14.1.3",
    "@angular/router": "^14.1.3",
    "@formkit/auto-animate": "^1.0.0-beta.2",
    "rxjs": "~7.5.6",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.1.3",
    "@angular/cli": "~14.1.3",
    "@angular/compiler-cli": "^14.1.3",
    "@types/jasmine": "~4.0.3",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.4"
  }
}

[justin-schroeder]

I'm not an angular dev myself, but maybe @Waterstraal who contributed the angular content can weigh in. One thing to keep in mind is AutoAnimate is ESM only — meaning if your build environment requires Common JS modules you might have issues.

[PointSingularity]

I'm not an angular dev myself, but maybe @Waterstraal who contributed the angular content can weigh in. One thing to keep in mind is AutoAnimate is ESM only — meaning if your build environment requires Common JS modules you might have issues.

I think the default Angular app uses ESM, so that shouldn't be a problem, but from what I know compiling Angular libraries is not that straightforward (I am pretty sure you have to have all angular dependencies, with their compiler too) The easiest option would be to just recreate the Angular Directive in my project.

[Waterstraal]

Ah yes, @PointSingularity you're right. We would probably need to set up ng-packagr to create a valid Angular Package Format package. This is something that's usually abstracted away when using the Angular CLI, but in this repository that's of course not the case... Sadly, I don't have much time to investigate this. Can you pick this up @PointSingularity?

[PointSingularity]

@Waterstraal Sadly I don't have any free time I can devote to this :( I think this would be really hard to do with the current project setup. It would require to basically add all angular dependencies + ng-packagr, which would bloat the whole project.

It really is unfortunate that the if you want to build a proper angular library, you need additional tooling. Another way would be converting this to a monorepo, with multiple publishable libraries, but that would require a lot of restructuring.

The easiest solution IMO would be to just show how to create your own directive, and how to import it, which from what I've seen @Waterstraal has already done.

[jan-nick]

Any updates on this?

[natealcedo]

Hey folks, just chiming in. I got this to work in my own project implementing it as a directive similar to what @Waterstraal did.

2 ways this can go without major change this repository setup.

1. We drop the angular support in this package and have a guide to implement this directive instead.
2. We drop the angular support in this package and create a new repo to have an angular package that conforms to the angular package requirements using ng-packagr

[Amrhub]

@natealcedo Is there a guide on how to create your own direct? if yes can you please provide the link. That would be awesome!

[natealcedo]

@Amrhub I just copied the implementation in this repository https://github.com/formkit/auto-animate/blob/master/src/angular/index.ts

[ajitzero]

Hi, I have published my library for this since setting up ng-packagr and Angular CLI here without significant hiccups is not trivial. I made an Nx mono-repo workspace for this and published a standalone version of the directive on npm.

• NPM package: https://www.npmjs.com/package/ng-auto-animate
• Demo Angular app: https://ng-auto-animate.netlify.app
• Source Code: https://github.com/ajitzero/ng-auto-animate

v0.0.1 is essentially the same code as committed in this repo, except that I do not use options on the directive, which is too common of a name and can cause conflicts. Instead, I will conditionally handle options via the directive name itself.

Example:

<div auto-animate>...</div>
<div [auto-animate]="{ duration: 250 }">...</div>

There are currently no docs, but I will try to update this.

Also, I plan to support global default values, such as a custom animation duration which can be configured at the module level. I will look into how that would work with standalone directives.

---

Edit: I just pushed v0.0.2 to support global options via an InjectionToken, and also updated docs to show usage options:

• Justification for the library and usage options: https://github.com/ajitzero/ng-auto-animate/tree/main/libs/ng-auto-animate#readme
• Main monorepo: https://github.com/ajitzero/ng-auto-animate
• Install with: npm i ng-auto-animate (Would love your feedback)

In the README, I have expressed my interest in merging my code into this library if feasible, but it is a non-trivial ask.

[NelsAC]

Great... I understand this is only for Angular 16?

[ajitzero]

Great... I understand this is only for Angular 16?

It should work with any version of Angular, but the inject() function being used is available from v14 onwards only. Converting it to constructor-based imports will make it work with any project version (9+ at least).

You can also copy the source code from this repo itself and maintain it to use in your projects. The only issue in this repo is the lack of a build step.