2016-09-24 128 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,