I have migrated my angular app from 14.0.2 -> 15.0.4. And I have the following error in my browser :
I have found what is causing this error. It's when I add a dependency (thats relies on Angular) in wrapper1's package.json.
project structure
projects
|
|___ lib
| |
| |___ src
| package.json
|
|___ wrapper1
| |
| |___ src
| package.json
|
|
|___ wrapper2
| |
| |___ src
| package.json
|
package.json
angular.json
{
"$schema": "node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"projects": {
"wrapper1": {
"projectType": "application",
"root": "projects/wrapper1",
"sourceRoot": "projects/wrapper1/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/wrapper1",
"index": "projects/wrapper1/src/index.html",
"main": "projects/wrapper1/src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "projects/wrapper1/tsconfig.app.json",
"assets": [],
"styles": ["projects/wrapper1/src/styles.scss"],
"scripts": [],
"preserveSymlinks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "projects/wrapper1/src/environments/environment.ts",
"with": "projects/wrapper1/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "7mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "7kb",
"maximumError": "10kb"
}
]
},
"local": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "wrapper1:build"
},
"configurations": {
"production": {
"browserTarget": "wrapper1:build:production"
},
"local": {
"browserTarget": "wrapper1:build:local"
},
"development": {
"browserTarget": "wrapper1:build:development"
}
},
"defaultConfiguration": "development"
}
}
},
}
}
package.json
{
"name": "test",
"version": "1.0.0-SNAPSHOT",
"scripts": {
"ng": "ng",
"start:wrapper1": "ng serve --port 3000 wrapper1 -o",
"start:wrapper2": "ng serve --configuration development --port 3002 wrapper2",
"build": "ng build",
"build:wrapper1": "cd projects/wrapper1 && npm run build",
"build:wrapper2": "cd projects/wrapper2 && npm run build",
"test": "ng test --detect-open-handles --pass-with-no-tests",
"test:ci": "ng test --ci --pass-with-no-tests --collect-coverage",
"e2e": "ng e2e",
"postinstall": "concurrently \"cd projects/lib && npm install\" \"cd projects/wrapper1 && npm install\" \"cd projects/wrapper2 && npm install\""
},
"private": true,
"dependencies": {
"@angular/animations": "^15.0.4",
"@angular/common": "^15.0.4",
"@angular/compiler": "^15.0.4",
"@angular/core": "^15.0.4",
"@angular/forms": "^15.0.4",
"@angular/platform-browser": "^15.0.4",
"@angular/platform-browser-dynamic": "^15.0.4",
"@angular/router": "^15.0.4",
"rxjs": "^6.6.7",
"tslib": "^2.4.0",
"zone.js": "^0.12.0"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^15.0.0",
"@angular-builders/jest": "^15.0.0",
"@angular-devkit/build-angular": "^15.0.4",
"@angular-eslint/builder": "15.1.0",
"@angular-eslint/eslint-plugin": "15.1.0",
"@angular-eslint/eslint-plugin-template": "15.1.0",
"@angular-eslint/schematics": "15.1.0",
"@angular-eslint/template-parser": "15.1.0",
"@angular/cli": "^15.0.4",
"@angular/compiler-cli": "^15.0.4",
"@types/jest": "^29.2.4",
"@typescript-eslint/eslint-plugin": "5.47.1",
"@typescript-eslint/parser": "5.47.1",
"autoprefixer": "^10.4.13",
"concurrently": "^7.4.0",
"eslint": "^8.30.0",
"jest": "^28.1.3",
"jest-environment-jsdom": "^28.1.3",
"jest-preset-angular": "^12.2.3",
"lint-staged": "^13.0.3",
"ng-packagr": "^15.0.3",
"stylelint": "^14.16.1",
"stylelint-config-standard": "^29.0.0",
"stylelint-config-standard-scss": "^6.1.0",
"ts-node": "^10.9.1",
"typescript": "^4.8.2"
},
"engines": {
"node": ">= 16.16.0",
"npm": ">= 8"
},
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"<rootDir>/setup-jest.ts"
],
"globalSetup": "jest-preset-angular/global-setup",
"snapshotResolver": "<rootDir>/config/jest/snapshotResolver.js",
"transformIgnorePatterns": [
"^.+\\.js$"
]
}
}
wrapper1/tsconfig.app.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"paths": {
"rxjs": ["node_modules/rxjs"],
"rxjs/*": ["node_modules/rxjs/*"]
}
},
"exclude": ["**/*.spec.ts", "**/*-mock*.ts", "**/*-local*.ts"]
}
wrapper1/package.json
{
"name": "wrapper1",
"version": "1.0.0-SNAPSHOT",
"scripts": {
},
"dependencies": {
"angular-oauth2-oidc": "^15.0.0",
"tslib": "^2.4.0"
}
}
adding "angular-oauth2-oidc": "^15.0.0", in this package.json is causing the error. Same if I add a custom component librairy (based on Angular).
I had already "preserveSymlinks": true in my angular.json but it's not enough anymore.
Do you have any idea why ?
