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

[ravivit9]

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 / facd075

Node: v6.11.0

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);`

[adibb83]

same for me

[ravivit9]

downloaded ng4-material seed which worked well along with angular but may not have all features as equivalent to angular-seed repo. I really like this repo as it's well maintained to recent.

Just create >>> ng new ng4-material and follow the instruction from the link. Config wise not much change I found between my project and ng4-material project.
https://coursetro.com/posts/code/67/Angular-4-Material-Tutorial

[zladuric]

@ravivit9 Did you add the link to umd (or whatever) in project.config?

Take a look at: https://github.com/mgechev/angular-seed/wiki/Add-external-dependency and https://github.com/mgechev/angular-seed/wiki/Add-external-scripts-and-styles

[vyakymenko]

Hi @ravivit9 ,

Let's try step-by-step:

1. Install main packages:

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

2. 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);
....
}

3. Configure app.module.ts:

...
import 'hammerjs';

4. Configure shared.module.ts:

...

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

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

5. 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">
...

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

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

[vyakymenko]

@mgechev , I think we can close this issue.

[ravivit9]

just implemented as guided above. Got an error after running
The selector "sd-home" did not match any elements

[ravivit9]

BTW, thanks for the step by step guidance. Once the above error sorted out then will be good to go.

[vyakymenko]

@ravivit9 , show me your index.html page body.

[ravivit9]

`

Loading...

<script defer> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', '<%= GOOGLE_ANALYTICS_ID %>', 'auto'); ga('send', 'pageview'); </script> <script> // Fixes undefined module function in SystemJS bundle function module() {} </script>

<% if (BUILD_TYPE === 'dev') { %>

<script src="<%= APP_BASE %>system-config.js"></script>

<% } %>

<% if (BUILD_TYPE === 'dev') { %>

<script> System.import('<%= BOOTSTRAP_MODULE %>') .catch(function (e) { console.error(e.stack || e, 'Not expecting this error? Report it at https://github.com/mgechev/angular-seed/issues'); }); </script>

<% } %>

`

[vyakymenko]

@ravivit9 , what tag is used in Loading.... Please show code, not plain text.
Also, you tried on clean installation?

[ravivit9]

It's from app.component.ts file
`import { Component } from '@angular/core';
import { Config } from './shared/config/env.config';
import './operators';

/**

• This class represents the main application component.
  */
  @component({
  moduleId: module.id,
  selector: 'sd-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  })
  export class AppComponent {
  constructor() {
  console.log('Environment config', Config);
  }
  }
  `

[vyakymenko]

@ravivit9 , if you will configure clean installation with my steps, all will work fine. Also, please learn MD text formatting.

[ravivit9]

Removed node_modules, did npm cahce clean --force, now installing all modules in package.json.
Sure will have a look MD text formatting.

[ravivit9]

Still the same error, give me sometime i will download angular-seed again in another directory and try to implement the above.