angular2模板裝載機無法聯組件模板

我下面就的WebPack的吳嚮明教程角2：https://angular.io/docs/ts/latest/guide/webpack.html angular2模板裝載機無法聯組件模板

完成所有我正在試圖加載應用程序的模板時出現404錯誤，步驟後零件。

本教程明確指出，app.component.html和app.component.css應該由angular2-template-loader實時綁定，但它們不是，因爲瀏覽器試圖通過XHR請求它們。

從教程app.compnent.ts的代碼：

import { Component } from '@angular/core'; 
import '../../public/css/styles.css'; 
@Component({ 
    selector: 'my-app', 
    templateUrl: 'app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { }

如果我指定相對於基本路徑模板路徑它的工作原理，但不是正確的做法。

import { Component } from '@angular/core'; 
import '../../public/css/styles.css'; 
@Component({ 
    selector: 'my-app', 
    templateUrl: './src/app/app.component.html', 
    styleUrls: ['./src/app/app.component.css'] 
}) 
export class AppComponent { }

有沒有人有一個想法，爲什麼發生這種情況，是任何人都能夠完成與工作解決方案的教程？

來源

2016-09-18 Deniss B.

另請參閱http://stackoverflow.com/questions/39503805/zone-js344-unhandled-promise-rejection-failed-to-load-app-template-html-in-ang/39504168#39504168 – yurzui

謝謝，我嘗試添加moduleId：module.id並且它沒有工作，模板仍然沒有找到，我還需要調用module.id.toString（）以避免錯誤，因爲split方法未定義。但是我最大的問題是它在本教程中沒有提到，它也增加了額外的複雜性和代碼。 –

我得到這個相同的錯誤。對我來說，問題在於我的IDE自動將我的打字稿轉錄到JS文件中，並且干擾了我的webpack構建。我刪除了JS文件，並且它工作正常。 – Irving

確保webpack執行打字稿編譯過程。我遇到了同樣的問題，問題在於Visual Studio在保存時編譯了我的ts文件，並且由於WebPack配置爲解析.js文件和.ts文件，所以裝載器試圖應用於已編譯的js文件的源ts文件。

所以總結：

確保你沒有你的TS文件已經在你的目錄編制。
在您的項目的本地node_modules中安裝typescript。
按照角向教程配置webpack。
在webpack.config.js文件所在的目錄中的命令行中運行webpack。這確保webpack IS THE ONE 執行打字稿編譯，從而ts文件進入管道。

它現在應該適合你。

來源

2016-09-28 13:12:53

就是這樣 - WebStorm爲我做了.ts的transpillation，所以它干預了WebPack的構建。謝謝！ –

我也是。幾天前我在VS2015中打開了我的項目，它編譯的.js文件正在被加載而不是新的.ts編譯。感謝您的解決方案。 –

Lifesaver，我浪費了很多時間在這個 – rashleighp

angular2模板裝載機無法聯組件模板

回答

相關問題