Angular 2需要html.js文件模板

Question

我的angular2應用程序有點麻煩。

我有一個非常簡單的mvc應用程序（我正在使用asp.net）。

但是，我得到一個 當我試圖用我的innertest組件內我的應用程序失敗，出現以下消息加載模板。

來自'@ angular/core'的內部組件代碼`import {Component};

@Component({ 
    selector: 'test', 
    template: require('./innerhome.component.html') 
}) 
export class InnerTestComponent { 
    name = ''; 
} 
` 

並且所述消息是Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:20 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:2802/app/components/content/innerhome.component.html.js Error: XHR error (404 Not Found) loading http://localhost:2802/app/components/content/innerhome.component.html.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:2802/node_modules/zone.js/dist/zone.js:698:29) at ZoneDelegate.invokeTask (http://localhost:2802/node_modules/zone.js/dist/zone.js:265:35) at Zone.runTask (http://localhost:2802/node_modules/zone.js/dist/zone.js:154:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:2802/node_modules/zone.js/dist/zone.js:335:33) Error loading http://localhost:2802/app/components/content/innerhome.component.html.js as "./innerhome.component.html" from http://localhost:2802/app/components/content/innertest.component.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:2802/node_modules/zone.js/dist/zone.js:698:29) at ZoneDelegate.invokeTask (http://localhost:2802/node_modules/zone.js/dist/zone.js:265:35) at Zone.runTask (http://localhost:2802/node_modules/zone.js/dist/zone.js:154:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:2802/node_modules/zone.js/dist/zone.js:335:33) Error loading http://localhost:2802/app/components/content/innerhome.component.html.js as "./innerhome.component.html" from http://localhost:2802/app/components/content/innertest.component.js

我systemjs.config.js文件是

(function (global) { 
System.config({ 
    paths: { 
     // псевдоним для пути к модулям 
     'npm:': 'node_modules/' 
    }, 
    // указываем загрузчику System, где искать модули 
    map: { 
     // наше приложение будет находиться в папке app 
     app: 'app', 
     // пакеты angular 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
     // остальные пакеты 
     'rxjs': 'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
    }, 
    // пакеты, которые указывают загрузчику System, как загружать файлы без имени и расширения 
    packages: { 
     app: { 
      main: './main.js', 
      defaultExtension: 'js' 
     }, 
     rxjs: { 
      defaultExtension: 'js' 
     } 
    } 
}); 

}）（本）;

我不明白這個問題的原因。

請指教。

Answer 1

在裝飾器中，您應該使用templateUrl而不是模板。只要你是指該文件是在同一文件夾，你應該只使用文件名，而不是路徑：

templateUrl: 'innerhome.component.html' 

你指向組件裝飾另一個文件每一次，你還需要包括：

moduleId: module.id, 

並確保你的app.module聲明中有InnerTestComponent。然後

整個組件將看起來像這樣：

進口{元器件}從 '@角/芯';

@Component({ 
    moduleId: module.id, 
    selector: 'test', 
    templateUrl: 'innerhome.component.html' 
}) 
export class InnerTestComponent { 
    name = ''; 
}