p4r1
p4r1

Reputation: 2650

Configuring SystemJS with Angular 2 in Visual Studio 2015

I'm trying to get my Angular2 app to utilize the ng2-material components, but having issues getting the SystemJS configuration correct. When I run the app, Chrome's console gives me:

GET http://localhost:12630/ng2-material/all 404 (Not Found)

and

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 runs fine, but the moment I try to reference anything from the ng2-material module, I start getting these errors. Here's the code:

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

doesn't have a red squiggle under the 'ng2-material/all' part, so I know TypeScript is able to find that part, yet when using MATERIAL_DIRECTIVES, I get an error. I'm assuming this is an issue with how SystemJS is configured. Here's my file structure:

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"
  }
}

Upvotes: 3

Views: 1879

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202138

You need to configure ng2-material within your SystemJS configuration this way:

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      'ng2-material': {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      'ng2-material': 'node_modules/ng2-material/source'
    }
  });
  (...)
</script>

Upvotes: 1

Related Questions