Angular 4 - webpack: wait until bundle finished: /

webpack-dev-middleware wait until bundle finished
webpack-dev-server
ng serve hangs
404s will fallback to /index html angular 8
npm run serve hanging
webpack compiled successfully stuck react
webpack beforeemit
webpack-dev-server write to disk

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 <patrick@angularclass.com>",
"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"
}

}

Karma webpack outputting multiple "webpack: wait until bundle , karma-webpack treats every single spec file as separate entry point and produces a separate webpack bundle for each. Thus your console logs  $ npm start > ng2-admin@0.9.0 start C:\Users\dave.pollastrini\git g2-admin > npm run server:dev > ng2-admin@0.9.0 server:dev C:\Users\dave.pollastrini\git g2-admin > webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/ fallbackLoader option has been deprecated - replace with "fallback" loader

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.

NPM START Hangs with Webpack: Wait Until Bundle Finished #748, What is the motivation / use case for changing the behavior? Please tell us about your environment: Angular version: 2.0.0-rc.X; Browser: [all |  it is all. There is nothing more in console. Compilation doesn't happen. When i go to localhost i have endless loading page. log file is empty. I've tried to perform advice from there Angular 4 - webpack: wait until bundle finished: / but it didn't work for me. package.json

In my case, there was a syntax error in the closing tag inside HTML <a>Hello<asd a/>

NPM run dev hangs on "webpack: wait until bundle finished: /dist , NPM run dev hangs on "webpack: wait until bundle finished: /dist/bundle.js" #640​. Closed [0] Happy[1]: Version: 4.0.0-beta.2. Threads: 3 "webpack: wait until bundle finished: / 46% building modules 301/305 modules 4 active aker-admin\src\app\theme\initial.scss" $ node --version v7.5.0 $ npm --version 4.1.2. Freezes on this step forever. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via

This error also appears if you are not running ng serve command from the correct folder path.

ng serve needs to be launched from the same location where all package.json exists. i.e. /project/

Angular 4 - webpack: wait until bundle finished: / - angular - html, --port 4200 --config config/webpack.dev.js --open --progress --profile --watch --​content-base src/), webpack hangs at webpack: wait until bundle finished: / Is it  Okey! Setting up karma runner is done! Let’s go to next step. Use modules and karma-webpack. Now, our test is only one file. So after now, all tests have to be written in test/main.js or add new

If you read on the very top of the output at the console one the files you tried to include doesn't exist at that directory.

Karma webpack outputting multiple “webpack: wait until bundle , For example, this: Hash: 255562a2a96fffe34fae Version: webpack 1.14.0 Time: 408ms If you want to get rid of the multiple webpack: wait until bundle finished:​  Maybe webpack-dev-server compiles your code, but did not know when to send them to the browser. Also, webpack-dev-server stores the compiled bundle in memory, thus the old copy remains in the file system. That's why your browser are always getting the old files. Webpack-dev-server reads output.publicPath in the config. Whenever browser sends a

webpack/webpack, Hey, quick question here : I am getting a Cannot find type definition file for 'node' error. it alter me webpack: wait until bundle finished:/, which take a long long time, and still show Is there any working example of Angular 9 with webpack 5 ? Hey all, MacOS 10.12 Sierra Public Beta Versions. angular-cli: 1.0.0-beta.11-webpack node: 5.7.1 os: darwin x64 After running the following command: ng new foo2 --style=less --mobile cd foo2 sudo ng link angular-cli ng genererate compone

NPM START Hangs with Webpack: Wait Until Bundle Finished, NPM START Hangs with Webpack: Wait Until Bundle Finished. akveo. 15 February 2017 Posted by dpollastrini. I'm submitting a [* ] bug report [ ] feature  It might be that it just isn't working well with rebuilds. We're getting really close to Webpack 4 betas so that might fix it. I tried with that PR and it seems fixed. So I think you're right, it is a bug in ModuleConcatenationPlugin rebuilds that is fixed in Webpack 4.

npm run serve is stuck, After I run npm run serve, webpack compile the files, but the localhost page is not 4/4 build moduleswebpack: wait until bundle finished: / 34% 4/10 build Usually use angular-cli, munis the Quickstart and Tour of Heroes. npm run serve is stuck. After I run npm run serve, webpack compile the files, but the localhost page is not working. wait until bundle finished: / 34% 4/10 build

Comments
  • take the look @ this github.com/akveo/ng2-admin/issues/748
  • Can you update the question angular-cli.json and package.json?
  • @RahulSingh I tried deleting the folder. Doesnt seem to work. When I revert to all the old package versions that I am currently using, it seems to work.
  • @RahulPatil Added.
  • Additionally npm@5.3.0
  • Hi Kamil. Your way seems working for me, but the last command (npm run build:aot) doesn't go through. The errors are the following: "missing script: build:aot Did you mean this? build".
  • The OP in question provide his package.json file where you can find line "build:aot": "npm run build:aot:prod", - probably your package.json file is different (but may be there is defined some similar command or you can define it by yourself - more info about aot here)
  • Actually the problem is not solved. VSCode still keeps compiling. I'll keep searching for the solution.