Angular npm start 它正在生成浏览器应用程序包，尽管该应用程序未投入生产

Posted 2023-03-07

【中文标题】Angular npm start 它正在生成浏览器应用程序包，尽管该应用程序未投入生产

【英文标题】：Angular npm start it is generating browser application bundles although the app is not in production

【发布时间】：2021-03-04 05:33:13

【问题描述】：

我正在处理 npm start 的意外更改，它使 Angular 的服务器非常慢。 在npm start 期间，它即将生成浏览器应用程序包（阶段：构建）......这需要很多时间

这是我的 package.json

    
  "name": "project-name",
  "version": "0.0.0",
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc",
    "proxy": "http://localhost:5000"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "~11.0.3",
    "@angular/cdk": "^11.0.2",
    "@angular/common": "~11.0.3",
    "@angular/compiler": "~11.0.3",
    "@angular/core": "~11.0.3",
    "@angular/forms": "~11.0.3",
    "@angular/material": "^11.0.2",
    "@angular/platform-browser": "~11.0.3",
    "@angular/platform-browser-dynamic": "~11.0.3",
    "@angular/router": "~11.0.3",
    "@fortawesome/angular-fontawesome": "^0.8.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/jwt-decode": "^2.2.1",
    "angular-cropperjs": "^1.0.2",
    "bootstrap": "^4.5.3",
    "chart.js": "^2.9.3",
    "core-js": "^2.5.4",
    "cropperjs": "^1.5.9",
    "express": "^4.17.1",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "google-libphonenumber": "^3.2.14",
    "intl-tel-input": "^17.0.8",
    "jquery": "^3.5.1",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.20",
    "lodash-es": "^4.17.15",
    "moment": "^2.28.0",
    "ngx-awesome-uploader": "^9.0.7",
    "ngx-bootstrap": "^6.1.0",
    "ngx-color-picker": "^10.1.0",
    "ngx-gravatar": "^10.0.0",
    "ngx-image-cropper": "^3.2.1",
    "ngx-intl-tel-input": "^3.0.3",
    "ngx-quill": "^13.0.1",
    "ngx-sharebuttons": "^8.0.5",
    "popper.js": "^1.16.1",
    "quill": "^1.3.7",
    "quill-emoji": "^0.1.8",
    "quill-image-resize-module": "^3.0.0",
    "quill-mention": "^3.0.0",
    "rxjs": "~6.5.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "^0.1100.3",
    "@angular/cli": "~11.0.3",
    "@angular/compiler-cli": "~11.0.3",
    "@angular/language-service": "~11.0.3",
    "@angular/localize": "^11.0.3",
    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": ">=4.0 <4.1"
  ,
  "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.1.",
  "main": "index.js",
  "repository": 
    "type": "git",
    "url": "git+https://github.com/username/career.git"
  ,
  "author": "",
  "license": "ISC",
  "bugs": 
    "url": "https://github.com/username/career/issues"
  ,
  "homepage": "https://github.com/username/career#readme"

这是我的angular.json

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": 
    "my-project-ng": 
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": 
        "@schematics/angular:component": 
          "style": "scss"
        
      ,
      "architect": 
        "build": 
          "builder": "@angular-devkit/build-angular:browser",
          "options": 
            "allowedCommonJsDependencies": [
              "lodash",
              "jwt-decode"
           ],
            "aot": true,
            "outputPath": "dist/my-project-ng",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/font-awesome/css/font-awesome.css",
              "./node_modules/intl-tel-input/build/css/intlTelInput.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/cropperjs/dist/cropper.min.css",
              "./node_modules/quill-emoji/dist/quill-emoji.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
              "node_modules/cropperjs/dist/cropper.js",
              "node_modules/popper.js/dist/umd/popper.min.js"
            ]
          ,
          "configurations": 
            "production": 
              "fileReplacements": [
                
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                ,
                
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                
              ]
            
          
        ,
        "serve": 
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": 
            "browserTarget": "my-project-ng:build"
          ,
          "configurations": 
            "production": 
              "browserTarget": "my-project-ng:build:production"
            
          
        ,
        "extract-i18n": 
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": 
            "browserTarget": "my-project-ng:build"
          
        ,
        "test": 
          "builder": "@angular-devkit/build-angular:karma",
          "options": 
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",

            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          
        ,
        "lint": 
          "builder": "@angular-devkit/build-angular:tslint",
          "options": 
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          
        
      
    ,
    "my-project-ng-e2e": 
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": 
        "e2e": 
          "builder": "@angular-devkit/build-angular:protractor",
          "options": 
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "my-project-ng:serve"
          ,
          "configurations": 
            "production": 
              "devServerTarget": "my-project-ng:serve:production"
            
          
        ,
        "lint": 
          "builder": "@angular-devkit/build-angular:tslint",
          "options": 
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          
        
      
    
  ,
  "defaultProject": "my-project-ng",
  "cli": 
    "analytics": false
  

然后它添加了一些奇怪的警告。

node_modules\canvg\lib\index.es.js depends on '@babel/runtime-corejs3/regenerator'. CommonJS or AMD dependencies can cause optimization bailouts.

我尝试了Angular 页面，上面写着https://angular.io/guide/build#configuring-commonjs-dependencies 但它没有帮助，我确实再次看到了这些消息。

并且 npm npm start & ng serve 的持续时间超过 1 分钟。

【问题讨论】：

如果您使用的是 CommonJS 或 AMD 依赖项，则会出现警告。

@mwilson 我没有使用它们。

你是。它在警告中说。看起来你有一个名为 canvg 的 npm 包正在使用它。

@mwilson 那么 npm start 呢？

怎么样？ ng start 有点慢。这绝对不是即时的。

【参考方案1】：

我有同样的麻烦并找到解决方案。我可以试试这个： 首先到 node-modules/@ngtools/webpack/src/benchmark.js 并将“__esModule”从 false 更改为 true，然后运行 ​​ng serve --verbose --no-progress，这样你会看到需要多长时间在构建过程中加载每个文件，我的问题是这些文件：

AngularCompilerPlugin._emit.ng.gatherDiagnostics.ng.getTsSemanticDiagnostics: 4.357s
AngularCompilerPlugin._emit.ng.gatherDiagnostics.ng.getNgSemanticDiagnostics: 43:06.434 (m:ss.mmm)
AngularCompilerPlugin._emit.ng.emit: 1.631s
AngularCompilerPlugin._emit: 43:12.435 (m:ss.mmm)
AngularCompilerPlugin._update._emit: 43:12.437 (m:ss.mmm)
AngularCompilerPlugin._update: 43:22.868 (m:ss.mmm)
AngularCompilerPlugin._make: 43:22.869 (m:ss.mmm)
ngcLoader+C:\Users\Vasil\t\src\main.ts+.ngcLoader.AngularCompilerPlugin: 0.924ms
ngcLoader+C:\Users\Vasil\t\src\main.ts+: 13.404ms
ngcLoader+C:\Users\Vasil\t\src\polyfills.ts+.ngcLoader.AngularCompilerPlugin: 17.251ms

之后我转到 tsconfig.json 并将“strictTemplates”从 true 更改为 false，现在可以正常工作了。 我认为问题是在安装角材料后出现的，但不确定。

【讨论】：

我已经解决了这个问题，我唯一的问题是在npm start 它开始生成用于生产的包。

@Abedin.Zhuniqi 你能把答案写在这里并标记为接受吗。

@GauravTyagi 还没有解决。因为它仍在生成捆绑包。

【参考方案2】：

您好，我遇到了同样的问题，然后再次运行 npm install ，它对我有用。

【讨论】：

Welcome to Stack Overflow!这是作为答案发布的，但它并不试图回答这个问题。应该是编辑或评论。

@JuanBaquero 我做了很多次，甚至我删除了 node_modules 和所有东西，但它又发生了。

【参考方案3】：

我已经找到了解决方案。您需要添加自己的开发配置，这将解决错误，它还会在开发工具中向您显示源代码。

这里是答案的链接： 'Generating browser application bundles' message while building dev version

【讨论】：

哪种解决方案？我没有看到接受的答案。

我已经更新了我的问题有 angular.json

我想你正在寻找的答案在这里github.com/MrRio/jsPDF/issues/3144

我已经修复了那部分，只留下了你说的angular.json部分。