Reputation: 1
I am upgrading angular app from 11 to 18.As suggested, I am doing it step by step means from 11 to 12 then 12 to 13 and so on...I am able to upgrade till Angular 15 and app run as expected post upgrade.
But From 15 to 16 it gives many errors which I resolved (either by upgrading some packages or changing it to required one)But when I run app it gives below problem
1. it append "home" to route every time I refresh browserlike refresh1-> <http://localhost:4201/#/home>refresh2-> <http://localhost:4201/#/home/home>refresh3 -> <http://localhost:4201/#/home/home/home> and so on.
2. To debug above issue I added debuggers in my component. but unable to open component.ts file in developer tool console window. I know in Angular 12 ng build now defaults to production. but I think I should be able to debug in local host.
Below is my angular.json file
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"abc-core-reports": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "css"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "ngx-build-plus:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"aot": true,
"buildOptimizer": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [
{
"input": "node_modules/document-register-element/build/document-register-element.js"
},
"./node_modules/jquery/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.bundle.js"
]
},
"configurations": {
"prod": {
"aot": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "7mb"
}
],
"buildOptimizer": false,
"extractLicenses": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": false,
"outputHashing": "all",
"scripts": [
{
"input": "node_modules/document-register-element/build/document-register-element.js"
}
],
"sourceMap": true,
"vendorChunk": true
}
}
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "abc-core-reports:build"
},
"configurations": {
"production": {
"browserTarget": "abc-core-reports:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "abc-core-reports:build"
}
},
"test": {
"builder": "ngx-build-plus:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
}
}
}
}
}
Below is my package.json
{
"name": "reports-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --open --port 4201",
"build": "ng build --configuration=prod --output-hashing=none --extra-webpack-config webpack.extra.js",
"prod": "npm run build && node build.js",
"test": "set NODE_OPTIONS=--max_old_space_size=16384 & ng test --code-coverage --watch=false --browsers=ChromeHeadless",
"test-dev": "ng test --watch=true",
"lint": "ng lint",
"sync-dependencies": "node node_modules/@abc/abc-app-core/assets/build/sync-dependencies.js",
"sd": "node node_modules/@abc/abc-app-core/assets/build/sync-dependencies.js"
},
"dependencies": {
"@ag-grid-community/angular": "27.0.0",
"@ag-grid-enterprise/all-modules": "27.0.0",
"@ali-hm/angular-tree-component": "^16.0.1",
"@angular/animations": "16.2.12",
"@angular/common": "16.2.12",
"@angular/compiler": "16.2.12",
"@angular/core": "16.2.12",
"@angular/elements": "16.2.12",
"@angular/forms": "16.2.12",
"@angular/localize": "16.2.12",
"@angular/platform-browser": "16.2.12",
"@angular/platform-browser-dynamic": "16.2.12",
"@angular/router": "16.2.12",
"@auth0/angular-jwt": "5.2.0",
"@compodoc/compodoc": "1.1.2",
"@fortawesome/angular-fontawesome": "^0.13.0",
"@fortawesome/fontawesome-svg-core": "1.2.35",
"@fortawesome/free-solid-svg-icons": "5.15.2",
"@abc/fontawesome-pro": "5.13.0",
"@abc/lds-css-assets": "0.3.5",
"@abc/abc-app-core": "^18.0.0-develop-angular18.16",
"@ng-bootstrap/ng-bootstrap": "^11.0.1",
"ag-grid-angular": "^32.3.3",
"ag-grid-community": "^32.3.3",
"ajv": "6.10.0",
"applicationinsights-js": "1.0.20",
"bootstrap": "4.6.0",
"chart.js": "2.7.2",
"concurrently": "3.5.1",
"core-js": "3.1.4",
"document-register-element": "1.7.2",
"elements-zone-strategy": "8.0.0",
"font-awesome": "4.7.0",
"fs-extra": "5.0.0",
"glyphicons": "0.2.0",
"graceful-fs": "4.1.11",
"intl": "1.2.5",
"jquery": "1.9.1",
"js-base64": "2.4.3",
"js-cookie": "2.2.0",
"lite-server": "2.3.0",
"lodash": "4.17.11",
"moment": "2.24.0",
"ng2-gantt": "1.11.1-alpha.9",
"ngx-bootstrap": "18.1.3",
"ngx-papaparse": "8.0.0",
"ngx-select-dropdown": "1.0.1",
"ngx-toastr": "16.2.0",
"node-watch": "0.5.8",
"popper.js": "1.16.1",
"powerbi-client": "2.18.6",
"primeicons": "2.0.0",
"primeng": "^16.9.1",
"rollup": "0.49.3",
"run-sequence": "1.2.2",
"rxjs": "7.4.0",
"sweetalert2": "8.12.2",
"ts-md5": "1.2.6",
"tslib": "2.0.0",
"zone.js": "~0.13.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "16.2.16",
"@angular/cdk": "14.2.7",
"@angular/cli": "^16.2.16",
"@angular/compiler-cli": "16.2.12",
"@angular/language-service": "16.2.12",
"@types/applicationinsights-js": "1.0.9",
"@types/jasmine": "3.6.0",
"@types/jasminewd2": "2.0.3",
"@types/js-base64": "2.3.1",
"@types/js-cookie": "2.2.2",
"@types/lodash": "4.14.134",
"@types/node": "12.11.1",
"angular-inline-resources": "1.3.2",
"codelyzer": "6.0.0",
"glob": "7.1.3",
"jasmine-core": "3.6.0",
"jasmine-spec-reporter": "5.0.0",
"jscat": "0.0.2",
"karma": "^6.3.12",
"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",
"md5": "2.2.1",
"minimist": "1.2.0",
"ncp": "2.0.0",
"ngx-build-plus": "16.0.0",
"protractor": "7.0.0",
"rimraf": "2.6.2",
"ts-node": "8.3.0",
"tslint": "6.1.0",
"typescript": "4.9.5",
"uglify-js": "3.6.0"
}
}
My expectation is
1. I should be able to debug my component.ts files in chrome. So how should I modified angular.json in order to debug in chrome
2. Route fixed. (I can check once I am able to debug in chrome my project ) but If you a find any discrepancy in packages please let me know
Any help is appreciated
Upvotes: -1
Views: 29
Reputation: 1
I need to modified my angular.json file
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "myAppName:build"
},
"configurations": {
"production": {
"browserTarget": "myAppName:build:production"
},
"development": {
"browserTarget": "myAppName:build:development"
}
},
"defaultConfiguration": "development"
},
Also added below in architect-> build -> configurations section
"development": {
"optimization": false,
"sourceMap": true,
"namedChunks": true,
"extractLicenses": false,
"vendorChunk": true,
"buildOptimizer": false
}
Upvotes: -1