I am currently working on integrating the ng2-material components into my Angular2 app. However, I am facing some challenges with setting up the SystemJS configuration correctly. Upon running the app, Chrome's console displays the following errors:
GET http://localhost:12630/ng2-material/all 404 (Not Found)
as well as
angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:12630/ng2-material/all
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:12630/node_modules/angular2/bundles/angular2-polyfills.js:771:30)
at ZoneDelegate.invokeTask (http://localhost:12630/node_modules/angular2/bundles/angular2-polyfills.js:365:38)
at Zone.runTask (http://localhost:12630/node_modules/angular2/bundles/angular2-polyfills.js:263:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:12630/node_modules/angular2/bundles/angular2-polyfills.js:431:34)
Error loading http://localhost:12630/ng2-material/all as "ng2-material/all" from http://localhost:12630/app/app.component.js
The application functions properly until I attempt to reference anything from the ng2-material module, at which point these errors occur. Here is the relevant code snippet:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing</title>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<hud>Loading...</hud>
</body>
</html>
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
app.component.ts
import {Component} from 'angular2/core';
import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
@Component({
selector: 'hud',
template: `
<button md-raised-button class="md-raised md-primary">Primary</button>
`
directives: [MATERIAL_DIRECTIVES] //uncomment this line to get it to work
})
export class AppComponent {
}
The line
import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
does not show any syntax error indication for 'ng2-material/all' in TypeScript, indicating that it can locate that part successfully. However, upon using MATERIAL_DIRECTIVES, an error occurs. This leads me to believe that there may be an issue with the SystemJS configuration. Below is the structure of my files:
Root:
|-app
|----app.component.ts
|----main.ts
|-Scripts
|----[some nuGet package stuff]
|-node_modules
|----[all npm packages: ng2-material is located in here]
|-index.html
|-package.json
|-tsconfig.json
EDIT:
package.json
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"devDependencies": {
"angular2": "2.0.0-beta.12",
"systemjs": "0.19.24",
"es6-promise": "^3.1.2",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "^0.6.6",
"ng2-material": "0.3.4"
}
}