Ecodev / fab-speed-dial

Angular Material FAB speed dial
https://ecodev.github.io/fab-speed-dial
MIT License
89 stars 19 forks source link

Compatibility issues with Angular Ivy #51

Closed fergardi closed 4 years ago

fergardi commented 4 years ago

Hello!

I'm trying to use this in my Angular10 project, but I keep getting an error:

ERROR in node_modules/@ecodev/fab-speed-dial/lib/fab-speed-dial.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of SharedModule, but could not be resolved to an NgModule class.

    This likely means that the library (@ecodev/fab-speed-dial) which declares EcoFabSpeedDialModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the 
library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Is this library Ivy-compatible?

Thanks in advance.

PowerKiKi commented 4 years ago

Yes this library is compatible with Ivy. You can double check yourself in a brand new project:

ng new fab-test
cd fab-test/
ng add @angular/material
yarn add @ecodev/fab-speed-dial
yarn start

This will create brand new Angular project with Angular 10, which use Ivy by default. Then in src/app/app.module.ts:

 @NgModule({
   declarations: [
    AppComponent,
   ],
   imports: [
    BrowserModule,
+    MatIconModule,
+    MatButtonModule,
+    BrowserAnimationsModule,
+    EcoFabSpeedDialModule,
   ],
   providers: [],
  bootstrap: [AppComponent],
 })

And in src/app/app.component.html:

   <p>Here are some links to help you get started:</p>
+  <eco-fab-speed-dial>
+
+    <eco-fab-speed-dial-trigger>
+      <button mat-fab>
+        <mat-icon class="spin180">add</mat-icon>
+      </button>
+    </eco-fab-speed-dial-trigger>
+
+    <eco-fab-speed-dial-actions>
+      <button mat-mini-fab>
+        <mat-icon>search</mat-icon>
+      </button>
+      <button mat-mini-fab>
+        <mat-icon>edit</mat-icon>
+      </button>
+      <button mat-mini-fab>
+        <mat-icon>home</mat-icon>
+      </button>
+    </eco-fab-speed-dial-actions>
+
+  </eco-fab-speed-dial>

   <div class="card-container">

The whole thing will compile in dev and in prod without issue. And the FAB speed dial will be shown correctly:

image

fergardi commented 4 years ago

Well, shame on me https://medium.com/@tcguy/why-you-should-always-restart-your-angular-app-after-ng-add-6d182405e398

Is working now.

Thanks for your help and for your plugin!