1

我正在尝试使用 webpack 捆绑我的 angular 2 应用程序。我的应用程序都包含组件 typescript 类以及 css 和 html 文件。我能够捆绑 js 文件（app.bundle.js）。我将 bundle.js 文件放入索引 html 文件并尝试运行它。但是在运行时在浏览器控制台中出现错误。这是我的索引 html 文件

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
  </head>

  <body>
    <my-app>Loading client...</my-app>
    <script src="./dist/app.bundle.js"></script>
  </body>
</html>

这就是我得到的错误。

Error: moduleId should be a string in "e". If you're using Webpack you should inline the template and the styles.

所以我希望这是因为没有捆绑 css 文件（bootstrap.min.css）。所以我也尝试捆绑它。这是我的 web pack 配置文件。

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry:'./app/main.ts',
output:{
    path:__dirname+'/dist',
    filename:'app.bundle.js'
},
module:{
    loaders:[
        {test:/\.ts$/,loader:'ts-loader'},
       {
        test: /\.css$/,
         use: ExtractTextPlugin.extract({
                use: 'css-loader'
            })
      }
    ]
},
plugins: [
        new ExtractTextPlugin('styles.css'),
    ],
resolve:{
    extensions:['.js','.ts','.css']
}

}

但是在运行这个（webpack -p）时出现错误，捆绑没有成功。

这是运行 webpack -p 命令时出现的错误

ERROR in ./bower_components/bootstrap/dist/css/bootstrap.min.cssModule build failed: Error: ENOENT: no such file or directory, open 'G:\mywork\Node\MyTaskList\client\node_modules\svgo\.svgo.yml'
at Error (native)

有人可以帮我吗？

新更新：我尝试将 bootstrap.min.css 手动添加到 index html 文件中，然后它也不起作用，出现第一个错误。所以我希望 webpack 包有什么东西。

请帮助我

4

2 回答 2

3

如果您使用 yarn（不是 npm），这会有所帮助，我在运行yarn clean. 如果是这样，只需执行以下操作

  1. 删除.yarnclean文件
  2. 删除node_modules,
  3. 重新运行yarn install

这些步骤将解决问题。

于 2017-04-26T12:54:30.953 回答
0

Webpack 期望 moduleId 作为字符串，而在 Angular 中它是数字。所以为了解决这个问题，我们应该使用

ModuleId:module.id.toString()
于 2017-04-01T11:45:19.577 回答