0

以前版本的包“angular-devkit/build-angular”：“0.1102.10”，即“0.1102.9”，工作正常，我可以像往常一样访问浏览器中的断点。但是对于“0.1102.10”，它会在“npm start”（成功的“npm install”之后）带来以下错误。

Error: ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\RuneStar_Work\InfinityHeart_Core3\InfinityHeart_Main_02\ClientApp\node_modules\@ngtools\webpack\src\ivy\plugin.js:390:61
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Error: ./src/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\RuneStar_Work\InfinityHeart_Core3\InfinityHeart_Main_02\ClientApp\node_modules\@ngtools\webpack\src\ivy\plugin.js:390:61
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Error: (webpack)-dev-server/client?http://0.0.0.0:0&sockPath=/sockjs-node
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\RuneStar_Work\InfinityHeart_Core3\InfinityHeart_Main_02\ClientApp\node_modules\@ngtools\webpack\src\ivy\plugin.js:390:61
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Error: ./node_modules/@angular-devkit/build-angular/src/webpack/es5-polyfills.js
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\RuneStar_Work\InfinityHeart_Core3\InfinityHeart_Main_02\ClientApp\node_modules\@ngtools\webpack\src\ivy\plugin.js:390:61
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Error: ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\RuneStar_Work\InfinityHeart_Core3\InfinityHeart_Main_02\ClientApp\node_modules\@ngtools\webpack\src\ivy\plugin.js:390:61
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Error: ./src/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\RuneStar_Work\InfinityHeart_Core3\InfinityHeart_Main_02\ClientApp\node_modules\@ngtools\webpack\src\ivy\plugin.js:390:61
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

如果我将 'angular-devkit/build-angular' 的版本提升到 '12.2.6'，以匹配其余的 '@angular/XXX' 包，应用程序会运行，但它存在不停止的问题'npm start' 命令在浏览器中的断点。

此外，让我注意到问题是更新到 ng 13。它也运行良好，但不会在浏览器的断点处停止。我使用以下站点https://update.angular.io/?l=3&v=12.0-中提到的以下命令进行了更新13.0

所以我的问题是，我想更新到更现代的 Angular 版本，但是这些现代版本的问题是不能在浏览器的断点处停止（也不是 VS Code）。这个项目从 Angular 6 开始，从那时起我已经能够成功更新 Angular。我认为，这是我在更新时遇到的第一个严重问题。

注意：这是一个 ASP.Net Core / Angular 项目，我使用“dotnet watch run”和“npm install/npm start”运行我的项目。

通过本教程，断点也不适用于 VS Code 中的这个项目： https ://www.c-sharpcorner.com/article/debug-angular-in-vs-code/#:~:text=Debug%20Angular% 20in%20VS%20Code%201%20Create%20an,like%29%203%20Configure%20Debug%20Environment%3B%204%20Start%20Debugging%3B

还要注意：“调试器；” 关键字也没有应有的断点。

以下是一些文件详细信息：

这是我的 Angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "InfinityHeart_Main_02": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "aot": true,
            "progress": true,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              },
              "src/assets/temp"
            ],
            "styles": [
              "node_modules/summernote/dist/summernote-lite.css",
              "src/styles/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/summernote/dist/summernote-lite.js",
              "node_modules/blueimp-canvas-to-blob/js/canvas-to-blob.min.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "InfinityHeart_Main_02:build"
            //"ssl": true,
            //"port":  4431
          },
          "configurations": {
            "production": {
              "browserTarget": "InfinityHeart_Main_02:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "InfinityHeart_Main_02: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": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/assets"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "dev": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true
            }
          }
        }
      }
    },
    "InfinityHeart_Main_02-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "InfinityHeart_Main_02:serve"
          }
        }
      }
    }
  },
  "defaultProject": "InfinityHeart_Main_02"
}

这是 package.json

{
  "name": "infinityheartmain02",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run InfinityHeart_Main_02:server:dev",
    "build:stats": "ng build --stats-json",
    "analyze": "webpack-bundle-analyzer dist/stats.json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "12.2.6",
    "@angular/common": "12.2.6",
    "@angular/compiler": "12.2.6",
    "@angular/core": "12.2.6",
    "@angular/forms": "12.2.6",
    "@angular/platform-browser": "12.2.6",
    "@angular/platform-browser-dynamic": "12.2.6",
    "@angular/platform-server": "12.2.6",
    "@angular/router": "12.2.6",
    "@ngrx/effects": "12.4.0",
    "@ngrx/store": "12.4.0",
    "@ngrx/store-devtools": "12.4.0",
    "aspnet-prerendering": "^3.0.1",
    "blueimp-canvas-to-blob": "^3.28.0",
    "browser-image-compression": "^1.0.17",
    "core-js": "^3.18.0",
    "cropperjs": "1.5.9",
    "jquery": "^3.6.0",
    "mat-ripple": "^1.0.4",
    "ng-recaptcha": "8.0.1",
    "ng-zorro-antd": "12.1.0",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "summernote": "^0.8.18",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.1102.9",
    "@angular/cli": "12.2.6",
    "@angular/compiler-cli": "12.2.6",
    "@angular/language-service": "^11.2.14",
    "@types/jasmine": "^3.9.1",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.25",
    "codelyzer": "^6.0.2",
    "factory.ts": "^0.5.2",
    "jasmine-core": "~3.6.0",
    "jasmine-marbles": "^0.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.9",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "karma-jquery": "^0.2.4",
    "typescript": "4.3.5",
    "webpack-bundle-analyzer": "^4.4.2"
  },
  "optionalDependencies": {
    "protractor": "~7.0.0",
    "ts-node": "8.10.1",
    "tslint": "~6.1.0"
  }
}

这是launchSettings.json

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iis": {
      "applicationUrl": "http://localhost/InfinityHeart_Main_02",
      "sslPort": 0
    },
    "iisExpress": {
      "applicationUrl": "http://localhost:4201",
      "sslPort": 44359
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "InfinityHeart_Main_02": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "sqlDebugging": false,
      "nativeDebugging": false
    }
  }
}

这是 main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic(providers).bootstrapModule(AppModule)
  .catch(err => console.log(err));

export { renderModule, renderModuleFactory } from '@angular/platform-server';

这是 polyfills.ts （删除大部分评论）

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */

(window as any).global = window;  // required because of an error:  Uncaught ReferenceError: global is not defined... see notes for more detail

这些文件是当应用程序使用断点工作的时候。

使其不起作用的更改是：

  • 将“@angular-devkit/build-angular”换成下一个版本。如上所述，在“npm start”时会引发错误
  • 将“@angular-devkit/build-angular”换成更高的版本。例如 12.2.6 以匹配其余的 '@angular/XXX' 包。哪个运行但没有断点工作。
  • 将所有内容升级到 Angular 的下一个版本，版本 13。使用 'npx @angular/cli@13 update @angular/core@13 @angular/cli@13' 命令。如以下站点 https://update.angular.io/?l=3&v=12.0-13.0所述。它也运行但没有断点工作。

提前致谢。

4

1 回答 1

0

我真的不知道我是怎么错过的，因为我已经为此工作了很多小时并进行了很多搜索，但是这篇 SO 帖子解决了我的问题： https ://stackoverflow.com/a/69220329/230128

于 2021-12-13T03:09:32.780 回答