CODEWITHSUNDEEP
angulartypescriptnpmangular-library
Robert J.
Robert J.

Reputation: 2701

Angular library export models together with library

I am trying to create an angular library which can be published to our company's private npm repository. In my library, I want to also export classes that are used (injected via @Input()) in my library components.

Here is a model sample:

export class AdsToolbarMenuItem {
    iconName: string;
    label: string;
    enabled: boolean = true;
    menuAction: () => void;

    constructor(init?: Partial<AdsToolbarMenuItem>) {
        Object.assign(this, init);
    }
}

Now what I did, was that I have exported all classes in models folder in moduleExports.ts like following:

export * from './ContactBox';
export * from './AdsToolbarMainActionItem';
export * from './AdsToolbarMenuItem';

Then, under index.ts I have included export to my component's module together with reference to these moduleExports:

export * from './lib/angular-components.module';
export * from './lib/models/modelExports';

Afterwards I succesfully package my library, publish it to NPM repository and then, in the other project I install it via npm (so far so good). I can import the main LibraryModule inside my Angular project and use exported components without any problem.

Nonetheless, as soon as I try to use any models that I exported from a library, like following:

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' }));
  }
}

I get the following error message:

ERROR in ./src/app/app.component.ts Module not found: Error: Can'tresolve '@ads-shared/ads.shared.angular/lib/models/AdsToolbarMainActionItem' in 'C:\SRDEV_npx\empty-angular-project\test\src\app'

What am I doing wrong in here? Any help in respect to this matter would be highly appreciated.

Upvotes: 3

Views: 2272

Answers (1)

Mike Jerred
Mike Jerred

Reputation: 10555

If these classes are exported by you library then you just need to do:

import { AdsToolbarMainActionItem } from '@ads-shared/ads.shared.angular';

Upvotes: 3

Related Questions