2016-09-24 129 views
1

我遵循本教程,获得了与教程类似的所有内容。 https://www.youtube.com/watch?v=4i1nLrqMR14#t=563.837081angular2/webpack模板404错误

现在是时候增加我的应用程序,所以我创造了我的组件的HTML文件,然后我templatURL设置为templateUrl: './app.html',因为它在这根/应用/ app.html同一目录中。我收到一个错误,因为它正在root/app.html中查找它。请参阅附件了解项目结构和错误。

命令dev的变化跟踪:

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

enter image description here

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' 
     }) 
    ] 


} 
+0

Webpack有时通过更改跟踪/热重装有问题。我的猜测是,只要重启dev服务器,你的问题就会得到缓解。 –

回答

0

在那里我找到丢失的轨道这是但有了webpack,如果我想让它工作,在我的组件中,我必须添加

moduleId: module.id,