angular-seed: Error after importing @angular/material": "^2.0.0-beta.8"

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see use [gitter](https://gitter.im/mgechev/angular2-seed) or [stackoverflow](https://stackoverflow.com/questions/tagged/angular2)

Current behavior After downloading the seed it worked fine. When installed material design beta8 version I started getting this error

Expected behavior Runtime error as below screenshot.

Minimal reproduction of the problem with instructions Import material2 design in home.module.ts to get this error.

What is the motivation / use case for changing the behavior? To make use of material2 design with angular-seed.

Please tell us about your environment: Mac, npm, Webstorm.

Angular Seed Version: aaaaf75 angular-seed (downloaded today 23-jul-2017) Last commit: facd075 / facd07577735ba61b50c2e7443db18415175aa04

Node: v6.11.0 screen shot 2017-07-23 at 19 16 16

Added the following on top of existing angular-seed code. No change to the code done yet.

app.module.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; … …

home.component.html

<md-card> <md-slide-toggle class="example-margin"> Slide me! </md-slide-toggle> </md-card> … …

home.module.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MdSliderModule, MdSlideToggleModule } from '@angular/material'; … …

`@NgModule({ imports: [ HomeRoutingModule, SharedModule, BrowserModule, BrowserAnimationsModule, FormsModule, //MdNativeDateModule, ReactiveFormsModule, ], exports: [HomeComponent, MdSliderModule, MdSlideToggleModule] bootstrap: [HomeComponent], providers: [NameListService] })

export class HomeModule { } platformBrowserDynamic().bootstrapModule(HomeModule);`

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 47 (10 by maintainers)

Most upvoted comments

Hi @ravivit9 ,

Let’s try step-by-step:

Install main packages:

$  npm install @angular/material @angular/cdk material-design-lite hammerjs --save

Configure project.config.ts:

...
import { ExtendPackages } from './seed.config.interfaces';

...

    // Add `NPM` third-party libraries to be injected/bundled.
    this.NPM_DEPENDENCIES = [
      ...this.NPM_DEPENDENCIES,
      {src: 'material-design-lite/dist/material.js', inject: 'libs'}
      // {src: 'jquery/dist/jquery.min.js', inject: 'libs'},
      // {src: 'lodash/lodash.min.js', inject: 'libs'},
    ];
.....

    // Add packages (e.g. ng2-translate)
    let additionalPackages: ExtendPackages[] = [
      {
        name: '@angular/material',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },{
        name: '@angular/cdk',
        path: 'node_modules/@angular/cdk/bundles/cdk.umd.js'
      },{
        name: 'hammerjs',
        path: 'node_modules/hammerjs/hammer.js'
      }
    ];

    this.addPackagesBundles(additionalPackages);
....
}

Configure app.module.ts:

...
import 'hammerjs';

Configure shared.module.ts:

...

import { MdButtonModule } from '@angular/material';
...

@NgModule({
  imports: [CommonModule, RouterModule,
    MdButtonModule],
  declarations: [ToolbarComponent, NavbarComponent],
  exports: [ToolbarComponent, NavbarComponent,
    CommonModule, FormsModule, RouterModule,
    MdButtonModule]
})
...

Configure index.html for example:

...
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-light_green.min.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
...

Last thing, we need to verify everything home.component.html:

...
<!--<button type="submit">Add</button>-->
  <button md-button type="submit">
    Add
  </button>
....

vyakymenko on Jul 24, 2017