Angular 4 - webpack: wait until bundle finished: /

Question

I am using Angular-Cli and I have updated all of my package.json using the ncu tool. Now when I do a npm start (webpack-dev-server --port 4200 --config config/webpack.dev.js --open --progress --profile --watch --content-base src/), webpack hangs at

webpack: wait until bundle finished: /

Is it possible to isolate the package causing the problem? I tried using display-error-details flag but it says it isnt recognized. I dont think it will help even if it is set. There is no error thrown, just asks you to wait indefinitely.

{
"name": "angular2-webpack-starter",
"version": "5.4.1",
"description": "An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack by AngularClass",
"keywords": [
    "angular2",
    "webpack",
    "typescript"
],
"author": "Patrick Stapleton <[email protected]>",
"homepage": "https://github.com/angularclass/angular2-webpack-starter",
"license": "MIT",
"scripts": {
    "build:aot:prod": "npm run clean:dist && npm run clean:aot && webpack --config config/webpack.prod.js  --progress --profile --bail",
    "build:aot": "npm run build:aot:prod",
    "build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
    "build:local": "npm run clean:dist && webpack --config config/webpack.dev.js --progress --profile",
    "build:prod": "npm run clean:dist && webpack --config config/webpack.prod.js  --progress --profile --bail",
    "appconfigtransform:local": "mustache config/app.config.local.json config/app.config.template.ts > src/app/app.config.ts",
    "appconfigtransform:dev": "mustache config/app.config.dev.json config/app.config.template.ts > src/app/app.config.ts",
    "appconfigtransform:test": "mustache config/app.config.test.json config/app.config.template.ts > src/app/app.config.ts",
    "appconfigtransform:prod": "mustache config/app.config.prod.json config/app.config.template.ts > src/app/app.config.ts",
    "build": "npm run build:local",
    "ci:aot": "npm run lint && npm run test && npm run build:aot && npm run e2e",
    "ci:jit": "npm run lint && npm run test && npm run build:prod && npm run e2e",
    "ci:nobuild": "npm run lint && npm test && npm run e2e",
    "ci:testall": "npm run lint && npm run test && npm run build:prod && npm run e2e && npm run build:aot && npm run e2e",
    "ci:travis": "npm run lint && npm run test && npm run build:aot && npm run e2e:travis",
    "ci": "npm run ci:testall",
    "clean:dll": "npm run rimraf -- dll",
    "clean:aot": "npm run rimraf -- compiled",
    "clean:dist": "npm run rimraf -- dist",
    "clean:install": "npm set progress=false && npm install",
    "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist compiled dll",
    "docker": "docker",
    "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
    "e2e:live": "npm-run-all -p -r server:prod:ci protractor:live",
    "e2e:travis": "npm-run-all -p -r server:prod:ci protractor:delay",
    "e2e": "npm-run-all -p -r server:prod:ci protractor",
    "github-deploy:dev": "webpack --config config/webpack.github-deploy.js --progress --profile --env.githubDev",
    "github-deploy:prod": "webpack --config config/webpack.github-deploy.js --progress --profile --env.githubProd",
    "github-deploy": "npm run github-deploy:dev",
    "lint": "npm run tslint --force \"src/**/*.ts\"",
    "postinstall": "npm run webdriver:update",
    "postversion": "git push && git push --tags",
    "preclean:install": "npm run clean",
    "preversion": "npm test",
    "protractor": "protractor",
    "protractor:delay": "sleep 3 && npm run protractor",
    "protractor:live": "protractor --elementExplorer",
    "rimraf": "rimraf",
    "server:dev:hmr": "npm run server:dev -- --inline --hot",
    "server:dev": "webpack-dev-server --port 4200 --config config/webpack.dev.js --open --progress --profile --watch --content-base src/",
    "server:prod": "http-server dist -c-1 --cors",
    "server:prod:ci": "http-server dist -p 3000 -c-1 --cors",
    "server": "npm run server:dev",
    "start:hmr": "npm run server:dev:hmr",
    "start": "npm run server:dev",
    "test": "npm run lint && karma start",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "version": "npm run build",
    "watch:dev:hmr": "npm run watch:dev -- --hot",
    "watch:dev": "npm run build:dev -- --watch",
    "watch:prod": "npm run build:prod -- --watch",
    "watch:test": "npm run test -- --auto-watch --no-single-run",
    "watch": "npm run watch:dev",
    "webdriver-manager": "webdriver-manager",
    "webdriver:start": "npm run webdriver-manager start",
    "webdriver:update": "webdriver-manager update",
    "webpack-dev-server": "webpack-dev-server",
    "webpack": "webpack",
    "updatestart": "npm run update && npm run server:dev"
},
"dependencies": {
    "@angular/animations": "4.3.0",
    "@angular/common": "4.3.0",
    "@angular/compiler": "4.3.0",
    "@angular/core": "4.3.0",
    "@angular/forms": "4.3.0",
    "@angular/http": "4.3.0",
    "@angular/platform-browser": "4.3.0",
    "@angular/platform-browser-dynamic": "4.3.0",
    "@angular/platform-server": "4.3.0",
    "@angular/router": "4.3.0",
    "@angularclass/conventions-loader": "1.0.13",
    "@angularclass/hmr": "2.1.3",
    "@angularclass/hmr-loader": "3.0.3",
    "@types/dragula": "^2.1.31",
    "angular-sortablejs": "^2.0.6",
    "bootstrap-sass": "3.3.7",
    "classlist-polyfill": "^1.2.0",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "font-awesome-sass-loader": "2.0.1",
    "http-server": "0.10.0",
    "ie-shim": "0.1.0",
    "jasmine-core": "2.6.4",
    "mustache": "^2.3.0",
    "ng2-appinsights": "0.5.0",
    "ngx-bootstrap": "1.7.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.2",
    "sortablejs": "^1.6.0",
    "zone.js": "0.8.13"
},
"devDependencies": {
    "@angular/compiler-cli": "4.3.0",
    "@types/hammerjs": "2.0.34",
    "@types/jasmine": "2.5.53",
    "@types/node": "8.0.14",
    "@types/selenium-webdriver": "~3.0.4",
    "@types/source-map": "0.5.0",
    "@types/uglify-js": "2.6.29",
    "@types/webpack": "3.0.4",
    "add-asset-html-webpack-plugin": "2.0.1",
    "angular2-template-loader": "0.6.2",
    "assets-webpack-plugin": "3.5.1",
    "awesome-typescript-loader": "~3.2.1",
    "codelyzer": "~3.1.2",
    "copy-webpack-plugin": "4.0.1",
    "css-loader": "0.28.4",
    "css-to-string-loader": "0.1.3",
    "exports-loader": "0.6.4",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "~3.0.0",
    "file-loader": "0.11.2",
    "find-root": "1.1.0",
    "gh-pages": "1.0.0",
    "html-webpack-plugin": "2.29.0",
    "imports-loader": "0.7.1",
    "istanbul-instrumenter-loader": "2.0.0",
    "jasmine-core": "2.6.4",
    "json-loader": "0.5.4",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage": "1.1.1",
    "karma-jasmine": "1.1.0",
    "karma-mocha-reporter": "2.2.3",
    "karma-remap-coverage": "0.1.4",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "2.0.4",
    "ng-router-loader": "2.1.0",
    "ngc-webpack": "2.0.0",
    "node-sass": "4.5.3",
    "npm-run-all": "4.0.2",
    "optimize-js-plugin": "0.0.4",
    "parse5": "3.0.2",
    "protractor": "5.1.2",
    "raw-loader": "0.5.1",
    "resolve-url-loader": "2.1.0",
    "rimraf": "~2.6.0",
    "sass-loader": "6.0.3",
    "script-ext-html-webpack-plugin": "1.8.5",
    "source-map-loader": "0.2.1",
    "string-replace-loader": "1.3.0",
    "style-loader": "0.18.2",
    "to-string-loader": "1.1.5",
    "ts-node": "3.2.0",
    "tslib": "1.7.1",
    "tslint": "~5.5.0",
    "tslint-loader": "3.5.3",
    "typedoc": "0.7.1",
    "typescript": "~2.4.1",
    "url-loader": "0.5.9",
    "webpack": "3.3.0",
    "webpack-dev-middleware": "1.11.0",
    "webpack-dev-server": "2.5.1",
    "webpack-dll-bundles-plugin": "1.0.0-beta.5",
    "webpack-merge": "~4.1.0"
},
"repository": {
    "type": "git",
    "url": "https://github.com/angularclass/angular2-webpack-starter.git"
},
"bugs": {
    "url": "https://github.com/angularclass/angular2-webpack-starter/issues"
},
"engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
}

}

Answer 1

I have similar problem for angular-starter and I was able to remove this bug after:

• upgrade node and npm to lastes versions (still error)
• remove node_modules
• npm cache clean --force
• npm install (still error)
• npm rebuild node-sass --force (still error)
• and this is CRITICAL (surprisingly) : build app by npm run build:aot

After this steps webpack: npm start command start working properly and not hang.

Answer 2

For anyone running into this issue I would like to share my findings because the other solutions did not work for me.

We have quite a large application running Angular 5.2.11 and CLI 1.6.8. We also use AOT. In the past we ran into memory issues with NODE during NG SERVE, and as it turns out this issue where NG SERVE freezes during recompile also pops up when NODE is running out of memory.

We were already using a max-old-space-size of 8GB and I have increased this to 12GB. Now my NG SERVE is running without any issues and specifically without the "Wait until bundle finshed" freezes.

We use this command as an alternative to 'ng serve':

node --max-old-space-size=12288 node_modules/@angular/cli/bin/ng serve --aot

Hope this helps anyone.