Angular 2 Web Pack 404 Html 模板网址答案

【问题标题】：Angular 2 Web Pack 404 Html Template UrlsAngular 2 Web Pack 404 Html 模板网址
【发布时间】：2016-11-12 05:37:06
【问题描述】：

我正在使用 Angular2 RC4 版本和 webpack 开发服务器。我无法成功加载我的应用程序。在浏览器控制台上它抛出 404 并且无法使用 webpack 加载 AppComponent 模板文件。如果我使用 lite-server，这可以工作

app.component.ts sn-p

@Component({
    moduleId:module.id,
    selector: 'body',
    templateUrl: 'app.component.html',
})

webpack.config.js sn-p

 module:{
       loaders:[
            {test:/\.ts$/, loader:'ts',   exclude: /node_modules/},
            {test:/\.html$/, loader:'html' },
       ],

    },

错误 browser_adapter.js?0526:84Error: Uncaught (in promise): Failed to load /app.component.html

【问题讨论】：

标签： angular webpack-dev-server

【解决方案1】：

另一种选择是结合使用 awesome-typescript-loader 和 angular2-template-loader 为您内联所有样式，而您不需要 require。

https://github.com/TheLarkInn/angular2-template-loader

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
        exclude: [/\.(spec|e2e)\.ts$/]
      }
    ]
  },

【讨论】：

这种方法最适合我。但值得注意的是，您还需要确保您有一个合适的 HTML/CSS 文件加载器，例如 GitHub 链接中建议的 raw-loader。

【解决方案2】：

对于 Angular2 webpack，

像这样使用模板-

  template: require('./app.component.html'),
  styles: [require('./app.component.css')]

而不是

  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

看看这是否有帮助。

【讨论】：

谢谢！我改变了它，它正在工作。但是，使用 web pack 存在更多问题。我们如何使用 SystemJS 捆绑和部署 Angular 2 应用程序？
npm run bundle 如何工作？我们必须明确配置它。你能解释一下吗？
参考这里 - stackoverflow.com/questions/37631098/…
这实际上是根据github.com/AngularClass/angular2-webpack-starter Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time. 的反模式，因此您不需要使用正确的配置..