Unknown Element - Angular 2 With Angular 2 Material

Question

Beating my head against the wall at this point. I'm getting an error when running an angular 2 app using SystemJS and angular material, can't figure out why. I am using the angular-seed project: https://github.com/mgechev/angular-seed. I added material via this guideline: 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 Config

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' } });

Note that it appears the files are loading in the browser when inspecting sources with dev tools

App 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 {
...

Q - How can I fix this unknown element issue? Thanks!

Answer 1

As the last version says (2.0.0-beta.3 cesium-cephalopod (2017-04-07)) you must import the MdToolbarModule in the module that loads home.component.

If the module is the home.module, just load the MdToolbarModule there, like this:

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

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

This is needed because of AOT and Lazy Load. This is the only way Angular can remove unnecessary code. If you don't load the module in every module that need this, the compiler will never know who uses this and will need to append it in all components even if it is not a lazy component.

The reason you don't need to load MaterialModule in other components but in app.module is that app.module is your entry point and it is always loaded no matter which lazy module you are loading. We can say that app.module is the father of every module, being them lazy or not.

So, if you load a module in app.module using forRoot() it means that you created a global instance of the module services and all child components will have access to thaqt services. This is the reason you don't need to load material.module in home.module again, because MaterialModule is used to load services used by Material to connect material components. That is all MaterialModule do.

Each material component is plug-and-play if you already loaded MaterialModule in the father component.

For modules loaded without forRoot(), you won't have a singleton services so you will need to load it in every component. All this is necessary to allow a better tree shaking where you only have what you need in your build.