Relative Pfad nicht mit SystemJS in Angular 2

Question

Arbeits ich gegangen durch this article

Hier ist mein Code

@Component({ 
    moduleId: __moduleName, 
    selector: 'header', 
    template: require('./header.component.html'), 
    styleUrls: ['/header.component.css'] 
}) 

Die Linie

moduleId: __moduleName,

Fehler geben: Kann nicht Namen finden '__Modulname'.

tsconfig.json Datei:

{ 
"compilerOptions": { 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
}, 
"compileOnSave": false, 
"filesGlob": [ 
    "src/**/*.ts", 
    "src/**/*.tsx", 
    "!typings/**", 
    "!node_modules/**" 
] 
} 

ich SystemJS verwende. Bitte Hilfe!

Answer 1

Sie können eine der folgenden Optionen verwenden:

Commonjs

tsconfig.json:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", // this line 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    } 
} 

Komponente:

@Component({ 
    moduleId: module.id, 
    selector: 'header', 
    templateUrl: 'header.component.html', 
    styleUrls: ['header.component.css'] 
}) 

SystemJS

tsconfig.json:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", // this line 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    } 
} 

Komponente:

declare var __moduleName: any; 

@Component({ 
    moduleId: __moduleName, 
    selector: 'header', 
    templateUrl: 'header.component.html', 
    styleUrls: ['header.component.css'] 
}) 

Es gibt auch spezielle Lader Ihre HTML zu laden, ohne module Option (https://github.com/angular/angular/issues/6053#issuecomment-222341010)

Angabe

Webpack users can use require('./some-template.html') - see https://angular.io/docs/ts/latest/guide/webpack.html for an example of how to use this.

SystemJS has the ability to use loaders for text in a similar fashion - https://github.com/systemjs/plugin-text

Siehe auch

• zone.js:344 Unhandled Promise rejection: Failed to load app.template.html in angular2
• https://github.com/angular/angular/issues/6053