#StackBounty: #angular2 #angular-material #angular2-material Unknown Element – Angular 2 With Angular 2 Material

Bounty: 50

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!


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.