Angular 4 - webpack：等待捆绑完成：/
Angular 4 - webpack: wait until bundle finished: /
我正在使用 Angular-Cli，并且我已经使用 ncu 工具更新了我所有的 package.json。现在，当我执行 npm start (webpack-dev-server --port 4200 --config config/webpack.dev.js --open --progress --profile --watch --content-base src/ ), webpack 挂在
webpack: wait until bundle finished: /
是否可以隔离导致问题的包？我尝试使用 display-error-details 标志，但它说无法识别。我认为即使设置了也无济于事。没有抛出任何错误，只是让你无限期地等待。
{
"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"
}
}
我在 angular-starter 上遇到了类似的问题，我能够在以下时间后删除此错误：
- 将节点和 npm 升级到最新版本（仍然错误）
- 移除 node_modules
npm cache clean --force npm install（还是报错）npm rebuild node-sass --force（还是报错）- 这很重要（令人惊讶）：通过
npm run build:aot 构建应用程序
执行此步骤后 webpack：npm start 命令开始正常工作，不会挂起。
如果您正在使用 webpack，请尝试将其从 angular-cli.json 中删除，现在您可以 运行 您的应用程序 运行 自动。稍后你可以将你的 webpack 添加到你的应用程序中。
如果您没有从正确的文件夹路径 运行 ng serve 命令，也会出现此错误。
ng serve 需要从所有 package.json 所在的同一位置启动。
即 /project/
对于 运行 这个问题的任何人，我想分享我的发现，因为其他解决方案对我不起作用。
我们有相当大的应用程序 运行 Angular 5.2.11 和 CLI 1.6.8。我们也使用 AOT。
过去，我们 运行 在 NG SERVE 期间解决了 NODE 的内存问题，事实证明，当 NODE 运行 内存不足时，NG SERVE 在重新编译期间冻结的问题也会弹出。
我们已经使用了 8GB 的 max-old-space-size，我已将其增加到 12GB。现在我的 NG SERVE 运行 没有任何问题，特别是没有 "Wait until bundle finshed" 冻结。
我们使用此命令替代 'ng serve':
node --max-old-space-size=12288 node_modules/@angular/cli/bin/ng serve --aot
希望这对任何人都有帮助。
如果您在控制台输出的最顶部看到您尝试包含的文件在该目录中不存在。
就我而言，HTML <a>Hello<asd a/>
中的结束标记存在语法错误
我的情况有点不同，但我不得不 降级 Node.js 版本 来解决我的问题，也许这可能对某人有帮助
要降级，您必须先卸载旧版本，然后从这里下载旧版本
https://nodejs.org/en/download/releases/
在我的 React 项目中遇到了这个问题。
我用的是 yarn，你可以通过 npm 试试
我的解决方案：
- 完全删除了
node-sass。 yarn remove node-sass
- 添加了
sass 包。看来，node-sass 已被弃用 yarn add sass
- 已将
sass-loader 升级到 7.0 版（因为默认 node-sass 已被删除）
我正在使用 Angular-Cli，并且我已经使用 ncu 工具更新了我所有的 package.json。现在，当我执行 npm start (webpack-dev-server --port 4200 --config config/webpack.dev.js --open --progress --profile --watch --content-base src/ ), webpack 挂在
webpack: wait until bundle finished: /
是否可以隔离导致问题的包？我尝试使用 display-error-details 标志，但它说无法识别。我认为即使设置了也无济于事。没有抛出任何错误，只是让你无限期地等待。
{
"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"
}
}
我在 angular-starter 上遇到了类似的问题，我能够在以下时间后删除此错误：
- 将节点和 npm 升级到最新版本（仍然错误）
- 移除 node_modules
npm cache clean --forcenpm install（还是报错）npm rebuild node-sass --force（还是报错）- 这很重要（令人惊讶）：通过
npm run build:aot 构建应用程序
执行此步骤后 webpack：npm start 命令开始正常工作，不会挂起。
如果您正在使用 webpack，请尝试将其从 angular-cli.json 中删除，现在您可以 运行 您的应用程序 运行 自动。稍后你可以将你的 webpack 添加到你的应用程序中。
如果您没有从正确的文件夹路径 运行 ng serve 命令，也会出现此错误。
ng serve 需要从所有 package.json 所在的同一位置启动。 即 /project/
对于 运行 这个问题的任何人，我想分享我的发现，因为其他解决方案对我不起作用。
我们有相当大的应用程序 运行 Angular 5.2.11 和 CLI 1.6.8。我们也使用 AOT。 过去，我们 运行 在 NG SERVE 期间解决了 NODE 的内存问题，事实证明，当 NODE 运行 内存不足时，NG SERVE 在重新编译期间冻结的问题也会弹出。
我们已经使用了 8GB 的 max-old-space-size，我已将其增加到 12GB。现在我的 NG SERVE 运行 没有任何问题，特别是没有 "Wait until bundle finshed" 冻结。
我们使用此命令替代 'ng serve':
node --max-old-space-size=12288 node_modules/@angular/cli/bin/ng serve --aot
希望这对任何人都有帮助。
如果您在控制台输出的最顶部看到您尝试包含的文件在该目录中不存在。
就我而言，HTML <a>Hello<asd a/>
我的情况有点不同，但我不得不 降级 Node.js 版本 来解决我的问题，也许这可能对某人有帮助
要降级，您必须先卸载旧版本，然后从这里下载旧版本 https://nodejs.org/en/download/releases/
在我的 React 项目中遇到了这个问题。 我用的是 yarn，你可以通过 npm 试试 我的解决方案：
- 完全删除了
node-sass。yarn remove node-sass - 添加了
sass包。看来，node-sass 已被弃用yarn add sass - 已将
sass-loader升级到 7.0 版（因为默认node-sass已被删除）