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模板装载机无法联组件模板

回答

相关问题