Konfigurieren von SystemJS mit Angular 2 in Visual Studio 2015

Ich versuche, meine Angular2-Anwendung dazu zu bringen, die ng2-material-Komponenten zu verwenden, aber Probleme beim Abrufen der SystemJS-Konfiguration. Wenn ich den app, Chrome-Konsole ausführen gibt mir:Konfigurieren von SystemJS mit Angular 2 in Visual Studio 2015

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

und

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

Die Anwendung läuft gut, aber der Moment, als ich versuche, etwas aus dem NG2-Material Modul zu verweisen, beginne ich diese bekommen Fehler. Hier ist der 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 { 

}

Die Linie

import {MATERIAL_DIRECTIVES} from 'ng2-material/all';

hat keinen roten Squiggle unter dem 'ng2-material/all' Teil, daher weiß ich, dass TypeScript diesen Teil finden kann, aber wenn MATERIAL_DIRECTIVES verwendet wird, erhalte ich einen Fehler. Ich gehe davon aus, dass dies ein Problem bei der Konfiguration von SystemJS ist. Hier ist meine Dateistruktur:

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

Quelle

2016-03-30 user1684458

Sie benötigen NG2-Material innerhalb SystemJS Konfiguration auf diese Weise zu konfigurieren:

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

Quelle

2016-03-30 16:20:48

Danke, Das schien dieses Problem zu lösen. Jetzt bekomme ich ein 'require is not defined' im' angular2-polyfills.js: 332' Fehler. Ich dachte, 'require' war in SystemJS enthalten, daher bin ich verwirrt, was das bedeutet. – user1684458

Welche Version von Angular2 verwenden Sie? –

Konfigurieren von SystemJS mit Angular 2 in Visual Studio 2015

Antwort

Verwandte Themen