Question

我有以下文件夹结构。当我在app.component.ts中使用templateUrl时，它说

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

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：我已经导入了在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>

你能否说明可能是什么原因

Answer 1

将system.config.js 应用部分更改为

app:"app"

TemplateUrl不能与System.js一起使用

1 个答案: