Unknown Element - Angular 2 With Angular 2 Material

Question

Probably hitting his head against the wall. I get an error when starting the angular 2 application using SystemJS and angular materials, I can not understand why. I am using the angular -seed project: https://github.com/mgechev/angular-seed . I added material for this guide: https://github.com/mgechev/angular-seed/wiki/Integration-with-AngularMaterial2 .

Error:

Unhandled Promise rejection: Template parse errors: 'md-toolbar' is not a known element:

home.component.html

<md-toolbar>Test</md-toolbar>

SystemJS Configuration

this.NPM_DEPENDENCIES = [ ...this.NPM_DEPENDENCIES, {src: '@angular/material/core/theming/prebuilt/indigo-pink.css', inject: true} // {src: 'jquery/dist/jquery.min.js', inject: 'libs'}, // {src: 'lodash/lodash.min.js', inject: 'libs'}, ]; this.addPackageBundles({ name:'@angular/material', path:'node_modules/@angular/material/bundles/material.umd.js', packageMeta:{ main: 'index.js', defaultExtension: 'js' } });

Please note that when checking sources with dev tools, you will find that the files are loading in the browser

Application module

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

@NgModule({
  imports: [BrowserModule, HttpModule, MaterialModule.forRoot(), AppRoutingModule, AboutModule, HomeModule, SharedModule.forRoot()],
  ...

package.json

  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.1",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "rxjs": "~5.0.3",
    "systemjs": "0.19.41",
    "zone.js": "^0.7.4"
  }
  ...

Home component

import { Component, OnInit } from '@angular/core';
import { NameListService } from '../shared/name-list/name-list.service';

/**
 * This class represents the lazy loaded HomeComponent.
 */
@Component({
  moduleId: module.id,
  selector: 'sd-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css'],
})
export class HomeComponent implements OnInit {
...

The Q . How can I fix this problem with an unknown item? Thank!

Answer 1

(2.0.0-beta.3 - (2017-04-07)), MdToolbarModule , home.component.

home.module, MdToolbarModule, :

import { MdToolbarModule } from '@angular/material';

@NgModule({
    imports: [
        ...
        MdToolbarModule, // HERE YOU IMPORT THE TOOLBAR MODULE. IF YOU WANT ONLY THIS MODULE IN YOUR BUILD
        ...
],
...

- AOT Lazy Load. Angular . , , , , , .

, MaterialModule , app.module , app.module , . , app.module , .

, app.module forRoot(), , services, thaqt. material.module home.module, MaterialModule , . MaterialModule.

plug-and-play, MaterialModule .

, forRoot(), oneton, . , , , .

Answer 2

@karns. , HomeComponent, , HomeModule.

HomeComponent HomeModule?

, MaterialModule HomeModule?

MaterialModule ( , MaterialModule) , Angular Material .

Answer 3

1:

• , .

  npm install --save @angular/material
  

• node_modules ,

  node_modules/@angular/material/bundles/material.umd.js
  @angular/material/core/theming/prebuilt/indigo-pink.css
  

• ,

  • , package.json.
  • , .

• "" ,

2:

,

• index.html

• config.js @angular/material cdn

  '@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js',

LIVE DEMO to show cdn link working

Update 1: now plunker is working fine, you can look at it.

The explanation for option 2 is to use the cdn link, which does not care if node_module is installed or not, in most cases it will definitely work. If this cdn link fixes your problem. update me. We will try to fix option 1 in your case.