I'm having headache with primeng and angular, it all happens when I add primeng to my Angular's library (It's already installed in main project). After building both library and main project and running "ng serve" everything is working fine. But after I compile on save I get the following error:
./src/app/app.module.ts - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Symbol Fieldset declared in .../src/main/ngfrontend/ngerp-libraries/node_modules/primeng/fieldset/fieldset.d.ts is not exported from primeng/fieldset (import into .../ngerp-v2/src/app/utils/modules/dynamic-file-import/components/import-matching/import-matching.component.ts)
My library package.json
"peerDependencies": {
"primeicons": "^4.1.0",
"primeng": "^12.2.3"
},
"dependencies": {
"@angular/animations": "~12.2.14",
"@angular/common": "~12.2.14",
"@angular/compiler": "~12.2.14",
"@angular/core": "^12.2.14",
"@angular/forms": "~12.2.14",
"@angular/cdk": "^12.2.13",
"@angular/platform-browser": "~12.2.14",
"@angular/platform-browser-dynamic": "~12.2.14",
"@angular/router": "~12.2.14",
"angular-froala-wysiwyg": "^2.7.6",
"froala-editor": "2.7.6",
"intro.js": "^7.0.1",
"rxjs": "~6.6.7",
"tslib": "^2.0.0",
"util": "^0.12.4",
"zone.js": "~0.11.4"
},
"devDependencies": {
"primeicons": "^4.1.0",
"primeng": "^12.2.3",
"@angular-devkit/build-angular": "~12.2.16",
"@angular/cli": "~12.2.14",
"@angular/compiler-cli": "~12.2.14",
"@types/jasmine": "~3.8.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.8.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"ng-packagr": "^12.1.1",
"typescript": "~4.2"
}
}
My src package.json
"dependencies": {
"@angular-eslint/builder": "^13.0.1",
"@angular-eslint/schematics": "^13.0.1",
"@angular-eslint/template-parser": "^13.0.1",
"@angular/animations": "^12.2.14",
"@angular/cdk": "^12.2.13",
"@angular/cli": "^12.2.16",
"@angular/common": "^12.2.14",
"@angular/compiler": "^12.2.14",
"@angular/core": "^12.2.14",
"@angular/elements": "^15.2.8",
"@angular/forms": "^12.2.14",
"@angular/http": "^6.1.10",
"@angular/localize": "^12.2.14",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "^12.2.14",
"@angular/platform-browser-dynamic": "^12.2.14",
"@angular/router": "^12.2.14",
"@fortawesome/angular-fontawesome": "^0.6.1",
"@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/free-brands-svg-icons": "^5.12.1",
"@fortawesome/free-regular-svg-icons": "^5.12.1",
"@fortawesome/free-solid-svg-icons": "^5.12.1",
"@fullcalendar/core": "^5.10.1",
"@highcharts/map-collection": "^1.1.3",
"@ng-bootstrap/ng-bootstrap": "^4.2.2",
"@ngtools/webpack": "12.2.13",
"@ngx-loading-bar/core": "^5.1.2",
"@ngx-loading-bar/http-client": "^5.1.2",
"@ngx-translate/core": "^10.0.0",
"@ngx-translate/http-loader": "^3.0.0",
"@nrwl/cli": "13.7.1",
"@stomp/stompjs": "^7.0.0",
"@swimlane/ngx-graph": "^6.2.0",
"@types/chart.js": "^2.9.37",
"@typescript-eslint/eslint-plugin": "^5.6.0",
"@typescript-eslint/parser": "^5.6.0",
"angular-calendar": "^0.26.11",
"angular-draggable-droppable": "^4.6.0",
"angular-email-editor": "^0.9.0",
"angular-froala-wysiwyg": "^2.7.6",
"angular-gridster2": "^8.4.2",
"angular-mention": "0.0.5",
"angular-mentions": "^1.5.0",
"angular-resizable-element": "^3.4.0",
"angular-text-input-autocomplete": "^0.3.0",
"angularx-flatpickr": "^6.6.0",
"awesome": "0.0.7",
"bootstrap": "^4.6.1",
"bulma": "^0.9.4",
"calendar-utils": "^0.2.3",
"chart.js": "^2.9.4",
"company-deal-lib": "file:../ngerp-libraries/dist/company-deal-lib",
"core-js": "^2.6.12",
"css-element-queries": "^1.2.3",
"d3": "^5.16.0",
"date-fns": "^1.30.1",
"eslint": "^8.4.1",
"file-saver": "^2.0.5",
"file-viewer-lib": "file:node_external_dependencies/file-viewer-lib-0.0.1.tgz",
"flatpickr": "^4.6.9",
"font-awesome": "^4.7.0",
"froala-editor": "2.7.6",
"fs-extra": "^9.1.0",
"fullcalendar": "^4.0.0-alpha.4",
"google-libphonenumber": "^3.2.25",
"highcharts": "^9.1.0",
"highcharts-angular": "^2.10.0",
"html2canvas": "^1.4.1",
"html2pdf.js": "^0.10.1",
"igniteui-angular-core": "^12.1.2",
"igniteui-angular-excel": "^12.1.2",
"igniteui-angular-spreadsheet": "^12.1.2",
"intro.js": "^7.0.1",
"jquery": "^3.6.0",
"jspdf": "^2.5.1",
"models-lib": "file:../ngerp-libraries/dist/models-lib",
"moment": "^2.29.4",
"moment-timezone": "^0.5.37",
"net": "^1.0.2",
"ng-drag-drop-list": "^3.0.0",
"ng2-file-upload": "^1.4.0",
"ng2-pdf-viewer": "^6.4.1",
"ngx-embed-video": "^1.0.4",
"ngx-image-cropper": "^3.3.5",
"ngx-international-phone-number": "^1.0.6",
"ngx-loading": "^8.0.0",
"ngx-quill": "^13.0.1",
"ngx-spinner": "^12.0.0",
"ngx-take-until-destroy": "^5.4.0",
"ngx-tribute": "^1.5.1",
"node": "^12.22.7",
"number-2-letters": "^0.5.0",
"powerbi-client": "^2.22.3",
"primeflex": "^1.3.1",
"primeicons": "^4.1.0",
"primeng": "^12.2.3",
"quill": "^1.3.7",
"quill-mention": "^3.1.0",
"rrule": "^2.6.8",
"rxjs": "^6.6.7",
"save-as": "^0.1.8",
"sockjs-client": "^1.6.1",
"stomp": "^0.1.1",
"stompjs": "^2.3.3",
"subsink": "^1.0.2",
"sweetalert2": "^7.33.1",
"tributejs": "^5.1.3",
"tslib": "^2.0.0",
"util": "^0.12.4",
"utils-lib": "file:../ngerp-libraries/dist/utils-lib",
"webpack": "^5.75.0",
"window-lib": "file:../ngerp-libraries/dist/window-lib",
"xlsx": "^0.18.5",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.2.16",
"@angular/compiler-cli": "^12.2.14",
"@angular/language-service": "^12.2.14",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "^2.0.10",
"@types/node": "^12.20.37",
"codelyzer": "~4.5.0",
"config": "^3.3.6",
"css-minimizer-webpack-plugin": "^4.0.0",
"jasmine-core": "~3.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.5.0",
"protractor": "~7.0.0",
"ts-node": "~5.0.1",
"tslint": "~5.11.0",
"typescript": "4.2"
}
I couldn't understand the reason, can somebody please suggest what needs to be done?
I tried the official documentation. adding Primeng to peerDeependecies....
The Problem was solved by adding "preserveSymlinks": true as a builder option in angular.json. Quoting JoostK answer on this GitHub issue:
Here's what was going on:
NPM installs my-lib using a symlink into the app's node_modules, which is unlike Yarn which does not create a symlink. Symlinks cause file paths to be resolved to their real path on disk, which subsequently affects module resolution as module requests then occur from the directory that is pointed to by the symlink (which is outside of the workspace root).
The initial build succeeds because the compiler resolves the my-dir module from the app.module.ts file in the project and then caches the result. There is also a request for my-lib from within my-lib (upon first thought I think this is a bug) which is not resolved during the initial compilation, as it leverages the cached result from app.module.ts. During the rebuild however the app.module.ts is not affected, such that the request for my-lib from within my-lib no longer leverages the existing cache but resolve the my-lib module by itself. The key difference is that it starts searching for my-lib inside the my-lib/dist directory (which was symlinked) but now there is no node_modules directory in the ancestor directories that have my-lib and so this request fails to resolve.