I am in the process of developing an angular library for our company's private npm repository. Within this library, I aim to export classes that are utilized (injected via @Input()) in the library components.
Here is a sample model:
export class AdsToolbarMenuItem {
iconName: string;
label: string;
enabled: boolean = true;
menuAction: () => void;
constructor(init?: Partial<AdsToolbarMenuItem>) {
Object.assign(this, init);
}
}
To achieve this, I have exported all classes in the models folder in moduleExports.ts, as shown below:
export * from './ContactBox';
export * from './AdsToolbarMainActionItem';
export * from './AdsToolbarMenuItem';
Then, in the index.ts file, I included exports to my component's module along with a reference to these module exports:
export * from './lib/angular-components.module';
export * from './lib/models/modelExports';
After successfully packaging and publishing the library to the NPM repository, I installed it in another project using npm. I was able to import the main LibraryModule into my Angular project and use the exported components without any issues.
However, when attempting to utilize any of the exported models from the library, such as the code snippet below:
import { AdsToolbarMainActionItem } from '@ads-shared/ads.shared.angular/lib/models/AdsToolbarMainActionItem';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
items: AdsToolbarMainActionItem[] = [];
constructor() {
this.items.push(new AdsToolbarMainActionItem({ iconName: 'save' }));
}
}
An error message is received:
ERROR in ./src/app/app.component.ts Module not found: Error: Can't resolve '@ads-shared/ads.shared.angular/lib/models/AdsToolbarMainActionItem' in 'C:\SRDEV_npx\empty-angular-project\test\src\app'
If you can provide any assistance on this issue, it would be greatly appreciated.