Angular loaded twice

[benjamincharity]

Prerequisites

On the latest generator:

➜  fountain git:(master) ✗ npm ls -g --depth=0 2>/dev/null | grep generator-fountain
├── generator-fountain-webapp@0.7.2

• Framework: Angular 1
• Modules manager: Webpack with NPM
• CSS preprocessor: SASS
• JS preprocessor: ES2015 with Babel
• Sample app: A TodoMVC

  Description

It seems that AngularJS is being loaded twice in the production build.

The primary index.js app file imports import angular from 'angular'; So AngularJS is included into the app.[hash].js file.

The webpack-dist.conf.js file also pulls AngularJS in by including all dependencies:

// in webpack-dist.conf.js
vendor: Object.keys(pkg.dependencies)

so AngularJS is also included into vendor.[hash].js.

Error Message & Stack Trace

# pointing to the app.js file:
WARNING: Tried to load angular more than once.

Config

{
  "generator-fountain-angular1": {
    "version": "0.7.2",
    "props": {
      "framework": "angular1",
      "modules": "webpack",
      "js": "babel",
      "ci": [],
      "css": "scss",
      "resolved": "/usr/local/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular1/generators/app/index.js",
      "namespace": "fountain-angular1",
      "argv": {
        "remain": [],
        "cooked": [],
        "original": []
      },
      "sample": "hello",
      "router": "uirouter"
    }
  }
}

Reproduce

• $ npm -g install generator-fountain-webapp
• $ yo fountain-webapp
  • Framework: Angular 1
  • Modules manager: Webpack with NPM
  • CSS preprocessor: SASS
  • JS preprocessor: ES2015 with Babel
  • Sample app: A TodoMV
• $ gulp serve:dist

  Environment

• Node.js v6.4.0
• darwin 15.6.0
• yo 1.8.4
• npm 3.10.3

[jesusbotella]

I'm having the same issue that you are experiencing in my recently created project. The only difference between the project content is that I chose pure JS instead of ES2015 with Babel.

The app-xxxxxxx.js file and the vendor-xxxxxxx.js one apparently does not only include angular code twice but the ui-router is also included twice. The size of the files is very similar (259KB app.js vs 257KB vendor.js)

[irrvrsl]

Yeah, i had the same behaviour. You must change webpack config config/webpack-dist.conf.js. In plugins section include this line new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),. What it will look like:

plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html'),
      inject: true
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {unused: true, dead_code: true} // eslint-disable-line camelcase
    }),
   // Prevent vendor dulpication
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
    new ExtractTextPlugin('index-[contenthash].css')
  ],

[giggo1604]

i run into the same problem. the way i am organizing my applications dependencies is to import all of them in the index.js. But with the line vendor: Object.keys(pkg.dependencies) a second entry point for webpack is created which tries to load all dependencies in from package.json. I think it isn't necessary to do so. My solution was to remove this second entry point completely and manage dependencies manually. Is there a special reason to use this second entry point in for webpack build? my suggestion would be to just remove the second entry point.

[Swiip]

Did one of you tried with the rc1? We changed a bit the CommonsChunkPlugin conf.