2017-05-15 1 views
1

Ich habe folgende Struktur des Ordners. Wenn ich templateUrl bin mit in app.component.ts sagt esTemplateUrl funktioniert nicht mit System.js

"Failed to load app.component.html ; Zone: <root> ; Task: Promise.then ; 
    Value: Failed to load app.component.html " 

enter image description here

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent { name = 'Angular'; } 

system.config.js

System.config({ 
    defaultJSExtensions: true, 
    map: { 
     app:"applicationStartup", 
     '@angular/core': 'node_modules/@angular/core/bundles/core.umd.js', 
     '@angular/common': 'node_modules/@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 
      'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 
      'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/router': 'node_modules/@angular/router/bundles/router.umd.js', 
     'rxjs': 'node_modules/rxjs' 
    }, 
    packages : { 
     app : { 
       main : '../../build/main.js', 
       defaultJSExtensions : 'js' 
      }, 
     rxjs :{ 
      defaultJSExtensions : "js" 
     } 
    } 
}); 

App .module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

Index.HTML: Ich habe App importiert, die in system.config.js

<html> 
<head> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="systemjs.config.js"></script> 
    <script> 
    System.import('applicationStartup').catch(function (err) { 
     console.error(err); 
    }); 
    </script> 
</head> 

<body> 
    <my-app>Loading...</my-app> 
</body> 

</html> 

Können Sie bitte vorschlagen, was der Grund

+0

Sie haben den Anwendungsnamen auf "applicationStartup" gesetzt, der Ordnername lautet jedoch "app". Sie müssen den Ordnernamen ändern –

+0

Ich habe es geändert. Es funktioniert nicht. –

Antwort

0

Änderung system.config.jsApp Teil definiert ist, zu

sein kann
app:"app" 
+0

Ich habe versucht, es zu ändern. Es funktioniert immer noch nicht. Ich habe die Frage auch mit Index.html aktualisiert. Ich denke, App-Name ist der gleiche, den wir in Index.html importieren –