I get the following error when I try to use Angular Material in code.
zone.js: 101 GET http: // localhost: 3000 / traceur 404 (Not Found) scheduleTask @ zone.js: 101ZoneDelegate.scheduleTask @ zone.js: 345Zone.scheduleMacroTask @ zone.js: 282 (anonymous function) @ zone. js: 122send @ VM437: 3fetchTextFromURL @ system.src.js: 1156 (anonymous function) @ system.src.js: 1739ZoneAwarePromise @ zone.js: 607 (anonymous function) @ system.src.js: 1738 (anonymous function) @ system.src.js: 2764 (anonymous function) @ system.src.js: 3338 (anonymous function) @ system.src.js: 3605 (anonymous function) @ system.src.js: 3990 (anonymous function) @ system. src.js: 4453 (anonymous function) @ system.src.js: 4705 (anonymous function) @ system.src.js: 408ZoneDelegate.invoke @ zone.js: 332Zone.run @ zone.js: 225 (anonymous function) @ zone.js: 591ZoneDelegate.invokeTask @ zone.js: 365Zone.runTask @ zone.js: 265drainMicroTaskQueue @ zone.js: 497ZoneTask.invoke @ zone.js: 437
login: 15 Error: Error: XHR error (404 Not Found) loading http: // localhost: 3000 / traceur
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http: // localhost: 3000 / node_modules / zone.js / dist / zone.js: 794: 30)
at ZoneDelegate.invokeTask (http: // localhost: 3000 / node_modules / zone.js / dist / zone.js: 365: 38)
at Zone.runTask (http: // localhost: 3000 / node_modules / zone.js / dist / zone.js: 265: 48)
at XMLHttpRequest.ZoneTask.invoke (http: // localhost: 3000 / node_modules / zone.js / dist / zone.js: 433: 34)
Error loading http: // localhost: 3000 / traceur
Error loading http: // localhost: 3000/node_modules/@angular2-material/button/button.js as "@ angular2-material / button" from http: // localhost: 3000 / app / assets / js / app.module. js (anonymous function) @ login: 15ZoneDelegate.invoke @ zone.js: 332Zone.run @ zone.js: 225 (anonymous function) @ zone.js: 591ZoneDelegate.invokeTask @ zone.js: 365Zone.runTask @ zone.js: 265drainMicroTaskQueue @ zone.js: 497ZoneTask.invoke @ zone.js: 437
Below is the code:
app.component.ts:
import {Component, ViewEncapsulation} from '@ angular / core';
import {MdButton} from '@ angular2-material / button';
@Component ({
selector: 'myApp',
templateUrl: './app/app.html',
styleUrls: ['./app/app.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
app.module.ts:
import {NgModule} from '@ angular / core';
import {BrowserModule} from '@ angular / platform-browser';
import {FormsModule} from '@ angular / forms';
import {HttpModule} from '@ angular / http';
import {MdButtonModule} from '@ angular2-material / button';
import {routing, appRoutingProviders} from './app.routing';
import {AppComponent} from './app.component';
import {LoginModule} from './login/login.module';
import {HomeModule} from './home/home.module';
import {ItemsModule} from './items/items.module';
import {MoviesModule} from './movies/movies.module';
@NgModule ({
imports: [BrowserModule, FormsModule, HttpModule, MdButtonModule, routing, LoginModule, HomeModule, ItemsModule, MoviesModule],
declarations: [AppComponent],
providers: [appRoutingProviders],
bootstrap: [AppComponent],
})
export class AppModule {}
app.routing.ts:
import {ModuleWithProviders} from '@ angular / core';
import {Routes, RouterModule} from '@ angular / router';
const appRoutes: Routes = [];
export const appRoutingProviders: any [] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot (appRoutes);
main.ts:
import {platformBrowserDynamic} from '@ angular / platform-browser-dynamic';
import {AppModule} from './app.module';
const platform = platformBrowserDynamic ();
platform.bootstrapModule (AppModule);
system.config.js:
/ **
* 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',
'@ angular2-material': 'npm: @ angular2-material',
// other libraries
'rxjs': 'npm: rxjs',
'angular2-in-memory-web-api': 'npm: angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and / or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
main: 'main.js',
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'@ angular2-material / core': {
main: 'core.js',
defaultExtension: 'js'
},
'@ angular2-material / button': {
main: 'button.js',
defaultExtension: 'js'
},
'@ angular2-material / card': {
main: 'card.js',
defaultExtension: 'js'
}
}
});
}) (this);
As soon as I add MdButtonModule to the import list "app.module.ts", I start getting an error.