Ecodev/fab-speed-dial

Not working with angular 7 project.

johannesjo opened this issue · 5 comments

johannesjo commented

Not sure, but it it seems that there is an issue with the latest build. I can import the module, but the components don't seem to be available anywhere.The html gets not parsed to the component and the linting in webstorm also hows me that eco-fab-speed-dial etc are unknown html tags.

miller45 commented

Just tried it with a fresh ng7 project (angular-cli) and it works...Did you add the @angular/material stuff? This required for this to work. (see https://material.angular.io/guide/getting-started)

  • 👍1
johannesjo commented
johannesjo commented

No luck. The issue persists even with a fresh project.
app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import 'hammerjs';

import {
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatIconModule,
  MatInputModule,
  MatRadioModule,
  MatSlideToggleModule,
  MatTooltipModule,
  MatToolbarModule,
} from '@angular/material';

import { EcoFabSpeedDialModule } from '@ecodev/fab-speed-dial';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    EcoFabSpeedDialModule,

    MatIconModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatInputModule,
    MatRadioModule,
    MatCardModule,
    MatCheckboxModule,
    MatSlideToggleModule,
    MatTooltipModule,
    MatToolbarModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
}

package.json

{
  "name": "test-ng",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/cdk": "^7.0.2",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/material": "^7.0.2",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "@ecodev/fab-speed-dial": "^3.0.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.3",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

html

<eco-fab-speed-dial [(open)]="open" [direction]="direction" [animationMode]="animationMode" [fixed]="fixed">
  <eco-fab-speed-dial-trigger>
    <button mat-fab (click)="actionX()"><mat-icon>check</mat-icon></button>
  </eco-fab-speed-dial-trigger>

  <eco-fab-speed-dial-actions>
    <button mat-mini-fab (click)="action1()"><mat-icon>add</mat-icon></button>
    <button mat-mini-fab (click)="action2()"><mat-icon>edit</mat-icon></button>
    <button mat-mini-fab (click)="action3()"><mat-icon>menu</mat-icon></button>
  </eco-fab-speed-dial-actions>
</eco-fab-speed-dial>
johannesjo commented

Interesting. Just copied over the contents of the app component over too, so all functions used in the template are also there. Now it works. It's interesting because no error whatsoever was thrown before.

johannesjo commented

Maybe it makes sense to adjust the example in the Readme in a way that copy and paste works fine?