angular2/webpack 模板 404 错误

Question

我按照本教程进行操作，并获得了与教程一样的所有内容。 https://www.youtube.com/watch?v=4i1nLrqMR14#t=563.837081

现在是扩展我的应用程序的时候了，所以我为我的组件创建了一个 html 文件，并将我的 templatURL 设置为 templateUrl: './app.html'，因为它位于 root/app/app 的同一目录中。 html。我收到一个错误，因为它正在 root/app.html 寻找它。项目结构和错误见附件。

开发更改跟踪命令：

webpack-dev-server --inline --progress --port 4000 --content-base src

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "outDir": "dist",
    "rootDir": ".",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
     "types": [
       "core-js",
       "node"
     ]
  },
  "exclude": [
    "node_modules"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

webpack.config.js

var webpack = require('webpack');
var HtmlWebPackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
    //entry:'./src/main.ts',
    entry:{
        'polyfills':'./src/polyfills.browser.ts',
        'vendor': './src/vendor.browser.ts',
        'main': './src/main.ts',
    },
    output:{
        path:'./dist',
        //filename:'app.bundle.js'
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].map',
        chunkFilename: '[id].chunk.js'


    },
    module:{
        loaders:[{test:/\.ts$/, loader:'ts-loader'}]
    },
    resolve:{
         root: [ path.join(__dirname, 'src') ], //add this for dev server
        extensions:['','.js','.ts']
    },
    plugins:[

        //inject all the files above into this file
        new HtmlWebPackPlugin({
            template: './src/index.html'
        })
    ]


}

Answer 1

忘记了我在哪里找到这个答案但是使用 webpack，如果我想让它工作，我必须在我的组件中添加

moduleId: module.id,

angular2/webpack 模板 404 错误

angular2/webpack template 404 errors

node.js

webpack

webpack-dev-server

angular