web-dev-qa-db-ja.com

Angular 4-webpack：バンドルが完了するまで待機：/

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：バンドルが完了するまで待つ：/

問題の原因となっているパッケージを分離することは可能ですか？ 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 <[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"
}

}

angularwebpackpackagewebpack-dev-serverwebpack-2
7
lohiarahul

angular-starter についても同様の問題があり、このバグを後に削除できました：

  • ノードとnpmを持続バージョンにアップグレードする（まだエラー）
  • node_modulesを削除する
  • npm cache clean --force
  • npm install（まだエラー）
  • npm rebuild node-sass --force（まだエラー）
  • そしてこれは重要です（驚くべきことに）：npm run build:aot

この手順の後、webpack：npm startコマンドが正しく機能し始め、ハングしません。

6
Kamil Kiełczewski

私の場合、HTML内の終了タグに構文エラーがありました<a>Hello<asd a/>

1
BaDr Amer

他の解決策がうまくいかなかったので、この問題に遭遇している人のために、私の発見を共有したいと思います。

Angular 5.2.11およびCLI 1.6.8を実行する非常に大きなアプリケーションがあります。 AOTも使用しています。以前は、NG SERVEの実行中にNODEでメモリの問題が発生しましたが、NODEのメモリが不足すると、再コンパイル中にNG SERVEがフリーズするこの問題が判明しました。

私たちはすでに8GBのmax-old-space-sizeを使用しており、これを12GBに増やしました。これで、私のNG SERVEは問題なく実行され、特に「バンドルが終了するまで待つ」がフリーズしなくなりました。

「ng serve」の代わりにこのコマンドを使用します。

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

これが誰にも役立つことを願っています。

1
Thomas van Rompaey

コンソールの出力の一番上を読んだ場合、含めようとしたファイルはそのディレクトリに存在しません。

0
Eduardo A. Fernández Díaz

このエラーは、正しいフォルダーパスからng serveコマンドを実行していない場合にも表示されます。

ng serveは、すべてのpackage.jsonが存在する同じ場所から起動する必要があります。つまり、/ project /

0
Chetan Laddha