angular material2 does not work in an Angular 2.0.0 app

Question

I have an app that loads with Angular 2.0.0, the 9/14/16 release after all the rc releases. I am trying to add Angular Material2, the official MD release from the Google team. I am copy/pasting code from their Getting Started site, except I am using Atom and not angular-cli, as I have already built the beginnings of the app. Atom-typescript finds everything and says there are no errors. But despite thrashing with a lot of trials, I repeatedly get these not found Console errors when the modified app fails to load.

zone.js:1263 GET http://localhost:3000/node_modules/@angular2-material/button/ 404 (Not Found)scheduleTask @ zone.js:1263

home:27 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular2-material/button(…)

zone.js:1263 GET http://localhost:3000/node_modules/@angular2-material/list/ 404 (Not Found)

I have looked at the node_modules files above and they exist in my code.

Per instructions in Getting Started, relevant code is:

app.module.ts

import { MdButtonModule } from '@angular2-material/button';
import { MdListModule } from '@angular2-material/list';
@NgModule({
  imports:      [ BrowserModule,
                  FormsModule,
                  MdButtonModule,
                  MdListModule,
                  routing
  ],

systemjs.config.js

var map = {
'@angular2-material':                   'node_modules/@angular2-material',
'@angular2-material/core':                   'node_modules/@angular2-material/core/core',
'@angular2-material/list':                   'node_modules/@angular2-material/list',
'@angular2-material/button':                   'node_modules/@angular2-material/button'
};
var packages = {
'app':                        { main: 'main.js',  defaultExtension: 'js' },
'rxjs':                       { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
ngPackageNames.forEach(setPackageConfig);

The HTML page has a couple md-list, md-list-item and md-button tags.

What should I change?

Can you show your package.json's dependednices and devDependencies? — Steve G
– Steve G, Commented Sep 15, 2016 at 21:14
@scarabaeus, the package.json is 75 lines. It includes several lines like "@angular2-material/button": "2.0.0-alpha.8-1" Can you be specific? — Mike_Laird
– Mike_Laird, Commented Sep 16, 2016 at 0:16

Steve G · Accepted Answer · 2016-09-16 14:13:47Z

I was able to get it working this morning as of (9/16) with Angular2 (final), Angular2-Material 2.0.0-alpha.8-2, and TypeScript 2.0.0. As you can see in the package.json below, I have a majority of the currently available Angular2 Material components installed (and running) by following the instructions from this video.

Posting my system.config.ts so you can see it in hopes that it will help you troubleshoot.

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',

      // Angular2-Material
      '@angular2-material/core': 'npm:@angular2-material/core/core.umd.js',
      '@angular2-material/button': 'npm:@angular2-material/button/button.umd.js',
      '@angular2-material/card': 'npm:@angular2-material/card/card.umd.js',
      '@angular2-material/checkbox': 'npm:@angular2-material/checkbox/checkbox.umd.js',
      '@angular2-material/grid-list': 'npm:@angular2-material/grid-list/grid-list.umd.js',
      '@angular2-material/icon': 'npm:@angular2-material/icon/icon.umd.js',
      '@angular2-material/input': 'npm:@angular2-material/input/input.umd.js',
      '@angular2-material/list': 'npm:@angular2-material/list/list.umd.js',
      '@angular2-material/radio': 'npm:@angular2-material/radio/radio.umd.js',
      '@angular2-material/sidenav': 'npm:@angular2-material/sidenav/sidenav.umd.js',
      '@angular2-material/toolbar': 'npm:@angular2-material/toolbar/toolbar.umd.js',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

Relevant portion of my package.json:

      ...   
      "dependencies": {
        "@angular/common": "~2.0.0",
        "@angular/compiler": "~2.0.0",
        "@angular/core": "~2.0.0",
        "@angular/forms": "~2.0.0",
        "@angular/http": "~2.0.0",
        "@angular/platform-browser": "~2.0.0",
        "@angular/platform-browser-dynamic": "~2.0.0",
        "@angular/router": "~3.0.0",
        "@angular/upgrade": "~2.0.0",
        "@angular2-material/button": "^2.0.0-alpha.8-2",
        "@angular2-material/card": "^2.0.0-alpha.8-2",
        "@angular2-material/checkbox": "^2.0.0-alpha.8-2",
        "@angular2-material/core": "^2.0.0-alpha.8-2",
        "@angular2-material/grid-list": "^2.0.0-alpha.8-2",
        "@angular2-material/icon": "^2.0.0-alpha.8-2",
        "@angular2-material/input": "^2.0.0-alpha.8-2",
        "@angular2-material/list": "^2.0.0-alpha.8-2",
        "@angular2-material/radio": "^2.0.0-alpha.8-2",
        "@angular2-material/sidenav": "^2.0.0-alpha.8-2",
        "@angular2-material/toolbar": "^2.0.0-alpha.8-2",
        "angular2-in-memory-web-api": "~0.0.19",
        "core-js": "^2.4.1",
        "hammerjs": "^2.0.8",
        "reflect-metadata": "^0.1.3",
        "rxjs": "~5.0.0-beta.12",
        "systemjs": "~0.19.27",
        "zone.js": "^0.6.21"
      },
      "devDependencies": {
        "concurrently": "^2.2.0",
        "lite-server": "^2.2.2",
        "typescript": "^2.0.0",
        "typings": "^1.3.2"
      }
      ...

Updated typescript to version 2.0.0.

Also had to register typings for hammerjs (Touch gesture support), but I believe you'll only need this if you're using MdIconModule.

Yes, the system.config file was helpful and the video link was essential to clean up the next round of errors. But it now loads. Thanks.

Skyvory · Accepted Answer · 2016-11-01 06:15:50Z

1

With breaking changes on Angular Material 2 release 2.0.0-alpha.9, you can simply map this one line in systemjs.config.ts

'@angular/material': 'npm:@angular/material/material.umd.js',

The package.json also becomes simpler with:

"@angular/material": "^2.0.0-alpha.9-3"

And don't forget to import the NgModule

import { MaterialModule } from '@angular/material';
@NgModule({
  ...
  imports: [MaterialModule.forRoot()],
  ...
})

From material2 release:

Angular Material has changed from @angular2-material/... packages to a single package under @angular/material. Along with this change, there is a new NgModule, MaterialModule, that contains all of the components. ...

answered Nov 1, 2016 at 6:15

Skyvory

3737 silver badges16 bronze badges

Collectives™ on Stack Overflow

angular material2 does not work in an Angular 2.0.0 app

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related