Closed cfeltz34 closed 2 years ago
Remark :
my angular.json file of my library is :
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-helpers": {
"projectType": "library",
"root": "projects/Libs/angular-helpers",
"sourceRoot": "projects/Libs/angular-helpers/src",
"prefix": "frmk",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"tsConfig": "projects/Libs/angular-helpers/tsconfig.lib.json",
"project": "projects/Libs/angular-helpers/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/Libs/angular-helpers/tsconfig.lib.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/Libs/angular-helpers/src/test.ts",
"tsConfig": "projects/Libs/angular-helpers/tsconfig.spec.json",
"karmaConfig": "projects/Libs/angular-helpers/karma.conf.js"
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"projects/Libs/angular-helpers/**/*.ts",
"projects/Libs/angular-helpers/**/*.html"
]
}
}
}
}
},
"defaultProject": "angular-helpers",
"cli": {
"analytics": false,
"defaultCollection": "@angular-eslint/schematics"
}
}
If I reference my library with command
npm i file:../MyLibrary/dist/angular-helpers
instead of "paths" attribute in tsconfig.json
--> same issue
Angular CLI: 13.1.4
Node: 16.13.2
Package Manager: npm 8.1.2
OS: win32 x64
Angular: 13.1.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router, service-worker
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1301.4
@angular-devkit/build-angular 13.1.4
@angular-devkit/core 13.1.4
@angular-devkit/schematics 13.1.4
@angular/cli 13.1.4
@angular/flex-layout 13.0.0-beta.36
@schematics/angular 13.1.4
ng-packagr 13.1.3
rxjs 7.5.2
typescript 4.5.5
Can you please share the package.json of your library?
{
"name": "MyLibrary",
"version": "0.0.2",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build-prod": "ng build --configuration production",
"install-puppeteer": "cd node_modules/puppeteer && npm run install",
"test": "npm run install-puppeteer && ng test --browsers=ChromeHeadless --watch=false --code-coverage",
"lint": "ng lint --format=stylish",
"e2e": "npm run install-puppeteer && ng e2e"
},
"private": false,
"dependencies": {
"@angular-devkit/build-angular": "^13.1.4",
"@angular-devkit/core": "^13.1.4",
"@angular-devkit/schematics": "^13.1.4",
"@angular-material-components/datetime-picker": "^7.0.1",
"@angular-material-components/moment-adapter": "^7.0.0",
"@angular/animations": "^13.1.3",
"@angular/cdk": "^13.1.3",
"@angular/common": "^13.1.3",
"@angular/compiler": "^13.1.3",
"@angular/core": "^13.1.3",
"@angular/flex-layout": "^13.0.0-beta.36",
"@angular/forms": "^13.1.3",
"@angular/material": "^13.1.3",
"@angular/platform-browser": "^13.1.3",
"@angular/platform-browser-dynamic": "^13.1.3",
"@angular/router": "^13.1.3",
"@angular/service-worker": "^13.1.3",
"@microsoft/signalr": "^6.0.1",
"@ngneat/until-destroy": "^9.0.0",
"@swimlane/ngx-charts": "^20.0.1",
"@typescript-eslint/eslint-plugin-tslint": "^5.10.1",
"angular-hashtable": "0.2.1",
"angular-oauth2-oidc": "^13.0.1",
"core-js": "^3.20.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsdoc": "^37.6.3",
"eslint-plugin-prefer-arrow": "^1.2.3",
"flex-layout-srcs": "^5.0.0-beta.14",
"jquery": "^3.6.0",
"jspdf": "^2.5.0",
"karma-coverage": "^2.1.0",
"moment": "^2.29.1",
"ngx-capture": "^0.12.1",
"ngx-logger": "^5.0.7",
"ngx-toastr": "^14.2.1",
"rxjs": "^7.5.2",
"tslib": "^2.3.1",
"typescript-string-operations": "^1.4.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-eslint/builder": "13.0.1",
"@angular-eslint/eslint-plugin": "13.0.1",
"@angular-eslint/eslint-plugin-template": "13.0.1",
"@angular-eslint/schematics": "13.0.1",
"@angular-eslint/template-parser": "13.0.1",
"@angular/cli": "^13.1.4",
"@angular/compiler-cli": "^13.1.3",
"@angular/language-service": "^13.1.3",
"@schematics/angular": "^13.1.4",
"@types/jasmine": "^3.10.3",
"@types/jasminewd2": "^2.0.10",
"@types/node": "^17.0.10",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"eslint": "^8.2.0",
"jasmine-core": "~4.0.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.3.11",
"karma-chrome-launcher": "~3.1.0",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.7.0",
"karma-junit-reporter": "^2.0.1",
"karma-scss-preprocessor": "^4.0.0",
"ng-packagr": "^13.1.3",
"node-sass": "^7.0.1",
"protractor": "~7.0.0",
"puppeteer": "^13.1.1",
"ts-node": "~10.4.0",
"typescript": "~4.5.5"
}
}
And package.json of my application :
{
"name": "MyApplication",
"version": "0.0.2",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build-prod": "ng build --configuration production",
"install-puppeteer": "cd node_modules/puppeteer && npm run install",
"test": "npm run install-puppeteer && ng test --browsers=ChromeHeadless --watch=false --code-coverage",
"lint": "ng lint --format=stylish",
"e2e": "npm run install-puppeteer && ng e2e"
},
"private": false,
"dependencies": {
"@angular-devkit/build-angular": "^13.1.4",
"@angular-devkit/core": "^13.1.4",
"@angular-devkit/schematics": "^13.1.4",
"@angular-material-components/datetime-picker": "^7.0.1",
"@angular-material-components/moment-adapter": "^7.0.0",
"@angular/animations": "^13.1.3",
"@angular/cdk": "^13.1.3",
"@angular/common": "^13.1.3",
"@angular/compiler": "^13.1.3",
"@angular/core": "^13.1.3",
"@angular/flex-layout": "^13.0.0-beta.36",
"@angular/forms": "^13.1.3",
"@angular/material": "^13.1.3",
"@angular/platform-browser": "^13.1.3",
"@angular/platform-browser-dynamic": "^13.1.3",
"@angular/router": "^13.1.3",
"@angular/service-worker": "^13.1.3",
"@microsoft/signalr": "^6.0.1",
"@ngneat/until-destroy": "^9.0.0",
"@swimlane/ngx-charts": "^20.0.1",
"@syncfusion/ej2-angular-inputs": "^19.4.43",
"@typescript-eslint/eslint-plugin-tslint": "^5.10.1",
"angular-hashtable": "0.2.1",
"angular-helpers": "^0.0.2-20220128.1",
"angular-oauth2-oidc": "^13.0.1",
"bootstrap": "^3.4.1",
"core-js": "^3.20.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsdoc": "^37.6.3",
"eslint-plugin-prefer-arrow": "^1.2.3",
"flex-layout-srcs": "^5.0.0-beta.14",
"jquery": "^3.6.0",
"jspdf": "^2.5.0",
"karma-coverage": "^2.1.0",
"moment": "^2.29.1",
"ngx-capture": "^0.12.1",
"ngx-logger": "^5.0.7",
"ngx-toastr": "^14.2.1",
"rxjs": "^7.5.2",
"tslib": "^2.3.1",
"typescript-string-operations": "^1.4.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-eslint/builder": "13.0.1",
"@angular-eslint/eslint-plugin": "13.0.1",
"@angular-eslint/eslint-plugin-template": "13.0.1",
"@angular-eslint/schematics": "13.0.1",
"@angular-eslint/template-parser": "13.0.1",
"@angular/cli": "^13.1.4",
"@angular/compiler-cli": "^13.1.3",
"@angular/language-service": "^13.1.3",
"@schematics/angular": "^13.1.4",
"@types/jasmine": "^3.10.3",
"@types/jasminewd2": "^2.0.10",
"@types/node": "^17.0.10",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"eslint": "^8.2.0",
"jasmine-core": "~4.0.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.3.11",
"karma-chrome-launcher": "~3.1.0",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.7.0",
"karma-junit-reporter": "^2.0.1",
"karma-scss-preprocessor": "^4.0.0",
"ng-packagr": "^13.1.3",
"node-sass": "^7.0.1",
"protractor": "~7.0.0",
"puppeteer": "^13.1.1",
"ts-node": "~10.4.0",
"typescript": "~4.5.5"
}
}
The reason why this is failing when you install your library when using npm i
because your library has incorrectly configured dependencies, which causes multiple @angular/
packages to be present in the node_modules tree.
Typically in a library you want to avoid having direct dependencies. Libraries that are required for the library to work, such as rxjs
, @angular/x
etc.. should be listed as peerDependencies
, while other dependencies that are needed to build your library such as @angular-devkit/build-angular
, karma-coverage
etc... should be listed as devDependency
.
While developing a library, you must install all peer dependencies through devDependencies to ensure that the library compiles properly. A linked library through path mappings has its own set of Angular libraries that it uses for building, located in its node_modules tree.
To get around this problem use TypeScript path mapping to tell TypeScript that it should load some modules from a specific location. List all the peer dependencies that your library uses in the workspace TypeScript configuration file ./tsconfig.json, and point them at the local copy in the application's node_modules folder.
{
"compilerOptions": {
// ...
// paths are relative to `baseUrl` path.
"paths": {
"@angular/*": [
"./node_modules/@angular/*"
]
}
}
}
This mapping ensures that your library always loads the local copies of the modules it needs.
Closing as this issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli
.
If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.
This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
🐞 Bug report
Command (mark with an
x
)Is this a regression?
Yes, it's work on Angular 11. I just migrated my project to Angular 13 and it doesn't work anymore
Description
I develop a library independently of an application. The library and the application are therefore not in the same workspace. When I reference my library with npm, no problem. When I reference my library on tsconfig.json "paths" attribute, I have an error like "incompatible between types" (Angular 13 only)
🔬 Minimal Reproduction
On debug, to reference my library on my application I update the tsconfig.json file like this : "paths": { "my-library": [ "../MyLibrary/dist/my-library" ] My application have a class witch extends a class from my library. Both projects use the same version of @angular/common (13.1.3) (see on package.json and on node_modules folder). I compile my library project. I compile my application project. --> Exception with Angular 13
🔥 Exception or Error
🌍 Your Environment
package.json reference of @angular/common :