Webpack-bundle-analyzer: Problem with angular 6

[musso]

Issue description

After running npm install --save-dev webpack-bundle-analyzer in new ng cli project, the You seem to not be depending on "@angular/core" and/or "rxjs". This is an error. shown

Technical info

• Webpack Bundle Analyzer version: [email protected]
• Webpack version: [email protected]
• Node.js version: v8.10.0
• npm/yarn version: [email protected]
• OS: macOS 10.13.4

Debug info

How do you use this module? As CLI utility or as plugin?
After running npm install --save-dev webpack-bundle-analyzer, even ng serve doesn't work
You seem to not be depending on "@angular/core" and/or "rxjs". This is an error. will be shown

[valscion]

The error you are seeing is not coming from webpack-bundle-analyzer, as far as I know. Seems like something is off with ng cli instead. Have you tried asking over in their issue tracker?

[musso]

Thanks for the reply, the problem exists only when webpack-bundle-analyzer is installed.
When I run npm uninstall webpack-bundle-analyzer -S, the problem gone.

Some more errors shown when install again

npm WARN rm not removing /Users/musso/testing/ng6test/node_modules/.bin/webdriver-manager as it wasn't installed by /Users/musso/testing/ng6test/node_modules/protractor
npm WARN rm not removing /Users/musso/testing/ng6test/node_modules/url-loader/node_modules/.bin/mime as it wasn't installed by /Users/musso/testing/ng6test/node_modules/url-loader/node_modules/mime
npm WARN rm not removing /Users/musso/testing/ng6test/node_modules/.bin/uglifyjs as it wasn't installed by /Users/musso/testing/ng6test/node_modules/uglify-js
npm WARN rm not removing /Users/musso/testing/ng6test/node_modules/.bin/semver as it wasn't installed by /Users/musso/testing/ng6test/node_modules/semver
npm WARN rm not removing /Users/musso/testing/ng6test/node_modules/.bin/nopt as it wasn't installed by /Users/musso/testing/ng6test/node_modules/nopt
npm WARN rm not removing /Users/musso/testing/ng6test/node_modules/fsevents/node_modules/.bin/node-pre-gyp as it wasn't installed by /Users/musso/testing/ng6test/node_modules/fsevents/node_modules/node-pre-gyp
npm WARN rm not removing /Users/musso/testing/ng6test/node_modules/.bin/esparse as it wasn't installed by /Users/musso/testing/ng6test/node_modules/esprima
npm WARN rm not removing /Users/musso/testing/ng6test/node_modules/.bin/esvalidate as it wasn't installed by /Users/musso/testing/ng6test/node_modules/esprima
npm WARN rm not removing /Users/musso/testing/ng6test/node_modules/escodegen/node_modules/.bin/esparse as it wasn't installed by /Users/musso/testing/ng6test/node_modules/escodegen/node_modules/esprima
npm WARN rm not removing /Users/musso/testing/ng6test/node_modules/escodegen/node_modules/.bin/esvalidate as it wasn't installed by /Users/musso/testing/ng6test/node_modules/escodegen/node_modules/esprima

> [email protected] install /Users/musso/testing/ng6test/node_modules/fsevents
> node install

[fsevents] Success: "/Users/musso/testing/ng6test/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> [email protected] install /Users/musso/testing/ng6test/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/musso/.npm/node-sass/4.9.0/darwin-x64-57_binding.node

> [email protected] postinstall /Users/musso/testing/ng6test/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/musso/testing/ng6test/node_modules/node-sass/vendor/darwin-x64-57/binding.node
Testing binary
Binary is fine

> @angular/[email protected] postinstall /Users/musso/testing/ng6test/node_modules/@angular/cli
> node ./bin/ng-update-message.js

npm WARN @angular/[email protected] requires a peer of rxjs@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of rxjs@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of rxjs@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of rxjs@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of rxjs@^6.0.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
added 106 packages from 40 contributors, removed 407 packages and updated 1072 packages in 86.841s
[!] 15 vulnerabilities found [21498 packages audited]
    Severity: 10 low | 5 high
    Run `npm audit` for more detail

[valscion]

Do you have rxjs in dependencies of your package.json as the peer dependency warning tells you to have?

[musso]

my package.json

{
  "name": "ng6test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "~6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2",
    "webpack-bundle-analyzer": "^2.11.1",
    "webpack-cli": "^2.1.3"
  }
}

[th0r]

1. @angular/cli uses yarn instead of npm. That's why you see all these errors during npm install.
2. webpack-bundle-analyzer is built into @angular/cli so there is no need to install it separately. Sorry, it's not.
3. Please, ask in @angular/cli issue tracker why ng serve throws an error.

[musso]

@th0r can explain it more?

1. you mean I have to update yarn ?
2. I have to use webpack-bundle-analyzer cli, do I need to install it separately or just @angular/cli is ok?

[th0r]

1. You need to install webpack-bundle-analyzer globally with npm i -g webpack-bundle-analyzer
2. Generate stats.json with ng build --prod --stats-json
3. Run webpack-bundle-analyzer dist/<project-name>/stats.json

[musso]

thanks, it works

[th0r]

@musso but there is an issue with Angular 6: https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/174

[grepit]

All of the above answer are correct but they did not work for me. The only way I was able to make this work was by follow steps/commands

ng new MY_PROJECT_NAME
cp -r from_my_old_project to_new_MY_PROJECT_NAME