I'm trying to make a custom module that holds all my UI components. I need it to be compatible with Angular 10 upwards. The package.json of my library looks like this:
{
"name": "myLibModule",
"version": "0.0.15",
"peerDependencies": {
"@angular/core": "^10.2.5",
"@angular/common": "^10.2.5",
"@angular/material": "^10.2.7",
"@angular/router": "^10.2.5"
},
"dependencies": {
"tslib": "^2.0.0"
}
}
Plus my Module:
import { NgModule } from '@angular/core';
import { HeaderComponent } from './components/header/header.component';
import { NotificationTrayComponent } from './poettinger-notifications/components/notification-tray/notification-tray.component';
import { CommonModule } from '@angular/common';
import { NotificationComponent } from './poettinger-notifications/components/notification/notification.component';
import { NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [HeaderComponent, NotificationTrayComponent, NotificationComponent],
imports: [
CommonModule,
NgbProgressbarModule
],
exports: [HeaderComponent, NotificationTrayComponent]
})
export class NgxPoettingerComponentsModule { }
Now when i try to use it in my Angular application, that has the following package.json:
{
"name": "libtest",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.0",
"@angular/cdk": "^12.2.13",
"@angular/common": "~12.2.0",
"@angular/compiler": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/forms": "~12.2.0",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"@it-entwicklung/ngx-poettinger-components": "file:../lib-workspace/dist/myLibModule",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.13",
"@angular/cli": "~12.2.13",
"@angular/compiler-cli": "~12.2.0",
"@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",
"typescript": "~4.3.5"
}
}
I get the following Error:
Uncaught Error: Type NgxPoettingerComponentsModule does not have 'ɵmod' property.
at getNgModuleDef (core.js:1131:1)
at recurse (core.js:25285:1)
at recurse (core.js:25296:1)
at registerNgModuleType (core.js:25281:1)
at new NgModuleFactory$1 (core.js:25395:1)
at compileNgModuleFactory__POST_R3__ (core.js:29094:1)
at PlatformRef.bootstrapModule (core.js:29344:1)
at Module.4431 (main.ts:11:26)
at __webpack_require__ (bootstrap:19:1)
at __webpack_exec__ (log$:23:1)
I did compile it without Ivy in production mode. Can anyone tell me what I'm doing wrong?
Seems like you are missing something in your imports section in your NgxPoettingerComponentsModule module. My guess is you have some component/pipe/service which should be in imports but currently, they are in the declaration section or imports section in your module.
It's better if you can post your module here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With