The previous version of package 'angular-devkit/build-angular': '0.1102.10', that being "0.1102.9", works fine and I'm able to access breakpoints in the browser like normal. But with '0.1102.10' it brings the following error upon 'npm start' (after a successful '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)
If I bump up the version of 'angular-devkit/build-angular' to '12.2.6', to match the rest of the '@angular/XXX' packages, the app runs, but it has the problem of not stopping in breakpoints within the browser upon an 'npm start' command.
Also, what made me notice the problem was updating to ng 13. Which also runs fine, but does not stop at breakpoints in the browser. I updated with the following command 'npx @angular/cli@13 update @angular/core@13 @angular/cli@13' mentioned in the following site https://update.angular.io/?l=3&v=12.0-13.0
So my problem is, I want to update to a more modern Angular version, but these modern versions are having the problem of not stopping at breakpoints in the browser (nor VS Code). This project has started with Angular 6 and I've been able to have successful updates of Angular since then. This, I think, is the first serious problem I've had with updating.
To note: This is an ASP.Net Core / Angular project, and I run my projects with 'dotnet watch run' and 'npm install/npm start'.
Breakpoints also don't work for this project in VS Code through this tutorial: 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
Also to note: The 'debugger;' keyword also doesn't breakpoint as it should.
Here are some file details:
Here is my 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"
}
Here is 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"
}
}
Here is 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
}
}
}
Here is 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';
Here is polyfills.ts (Stripping most of the comments out)
/** 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
These files are when the app is working with breakpoints working as well.
The changes to make it not work is to, either:
- Swap out "@angular-devkit/build-angular" to the next version. Which throws an error upon 'npm start' as stated above
- Swap out "@angular-devkit/build-angular" to an even higher version. Such as 12.2.6 to match the rest of the '@angular/XXX' packages. Which runs but no breakpoints working.
- Upgrade everything to the next version of Angular, version 13. With the 'npx @angular/cli@13 update @angular/core@13 @angular/cli@13' command. As mentioned in the following site https://update.angular.io/?l=3&v=12.0-13.0. Which also runs but no breakpoints working.
Thanks in advance.
