2016-12-11 49 views
2

我試圖將從ScriptScript 2開始的簡單的Angular 2應用程序從Browserify遷移到Webpack 2,但獲取有關未找到的角度模塊和瀏覽器字段的錯誤。看過幾個示例項目和教程後,我仍然不知道可能是什麼問題。它與Browserify和Tsify完美搭配。Webpack沒有找到任何的Angular 2模塊

ERROR in ./~/@angular/platform-browser-dynamic/index.js 
Module not found: Error: Can't resolve './src/platform-browser-dynamic' in '/opt/project/node_modules/@angular/platform-browser-dynamic' 
resolve './src/platform-browser-dynamic' in '/opt/project/node_modules/@angular/platform-browser-dynamic' 
    using description file: /opt/project/node_modules/@angular/platform-browser-dynamic/package.json (relative path: .) 
    Field 'browser' doesn't contain a valid alias configuration 
    after using description file: /opt/project/node_modules/@angular/platform-browser-dynamic/package.json (relative path: .) 
    using description file: /opt/project/node_modules/@angular/platform-browser-dynamic/package.json (relative path: ./src/platform-browser-dynamic) 
     as directory 
     /opt/project/node_modules/@angular/platform-browser-dynamic/src/platform-browser-dynamic doesn't exist 
     no extension 
     Field 'browser' doesn't contain a valid alias configuration 
     /opt/project/node_modules/@angular/platform-browser-dynamic/src/platform-browser-dynamic doesn't exist 
     js 
     Field 'browser' doesn't contain a valid alias configuration 
     /opt/project/node_modules/@angular/platform-browser-dynamic/src/platform-browser-dynamicjs doesn't exist 
     .ts 
     Field 'browser' doesn't contain a valid alias configuration 
     /opt/project/node_modules/@angular/platform-browser-dynamic/src/platform-browser-dynamic.ts doesn't exist 
[/opt/project/node_modules/@angular/platform-browser-dynamic/src/platform-browser-dynamic] 
[/opt/project/node_modules/@angular/platform-browser-dynamic/src/platform-browser-dynamic] 
[/opt/project/node_modules/@angular/platform-browser-dynamic/src/platform-browser-dynamicjs] 
[/opt/project/node_modules/@angular/platform-browser-dynamic/src/platform-browser-dynamic.ts] 
@ ./~/@angular/platform-browser-dynamic/index.js 13:0-47 
@ ./src/main.ts 
...and so on... 

webpack.config.js:

module.exports = { 
    entry: { 
     main: './src/main.ts', 
    }, 
    output: { 
     path: './build', 
     filename: '[name].js' 
    }, 
    resolve: { 
     extensions: ['js', '.ts'], 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       use: ['ts-loader'], 
      } 
     ] 
    } 
} 
+1

「resolve.extensions」中的'js'擴展應該是'.js'。我不確定這是否是答案,但應該改變。 –

+0

你對此有滿意的答案嗎?我的webpack配置看起來像你的偶然。什麼在你的tsconfig.json? – IanT8

+0

如果我沒有記錯,那麼Paus S的評論幫助了我。後來我遷移到了ES6。 –

回答

1

如果這是一個非常簡單的應用程序和你去反正更新,你可以更新使用angular-cli。這是推薦使用angular2的方法,只要你使用最新版本的webpack。