Search code examples
angularwebpackwebpack-2webpack-style-loaderhtml-webpack-plugin

Webpack bundling failed - no such file node_modules\svgo\.svgo.yml

Am trying to bundle my angular 2 applications using webpack .my application both contain component typescript classes and css and html files. i was able to bundle the js files(app.bundle.js).and i put the bundle.js file into the index html file and try to run it . but while running am getting error in the browser console . this is my index html file

<!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>

and this is the error am getting .

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

so i hope that this is because of not bundling the css files(bootstrap.min.css) . so i tried to bundle that also.this is my web pack configuration file .

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

}

but while running this (webpack -p) am getting errors , the bundling not get successful.

this is the error am getting while running the webpack -p command

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)

could anyone please help me on this ?

New Update : i tried to add the bootstrap.min.css manually into the index html file , then also it wont work , got the first error .so i hope there is something with the webpack bundle.

please help me on this

Solution

  • Webpack expects the moduleId as string, while in Angular it's number. So in order to solve the issue, we should make the moduleId as string by using

    ModuleId:module.id.toString()