How to export models from libraries in Angular?

Question

I created an Angular library, but I want to export a Model which my application can use. How can I do that ?

For example :

my-library

library-model.ts

export class LibraryModel{
  //some model data
}

my-library.component.ts

import { Component, OnInit, Input } from '@angular/core';

//some imports    

@Component( {
    selector: '...',
    templateUrl: '...',
    styleUrls: [...]
} )
export class MyLibraryComponent implements OnInit {

    @Input() libInputData: LibraryModel;

    // some other codes
}

my-library.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { MyLibraryComponent} from './my-library.component';
import { LibraryModel} from './library-model';

@NgModule( {
    declarations: [MyLibraryComponent, LibraryModel],
    imports: [
        BrowserModule
    ],
    exports: [MyLibraryComponent, LibraryModel]
} )
export class MyLibraryModule { }

public_api.ts

export * from './lib/my-library.service';
export * from './lib/my-library.component';
export * from './lib/my-library.module';
export * from './lib/library-model';

my-app

app.component.ts

import { Component } from '@angular/core';
import { LibraryModel } from 'my-library';

@Component({
  selector: 'grc-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-application';

  libraryModel : LibraryModel ;

  initializeData() {

     //initialize and set data for libraryModel 

  }
}

app.component.html

<my-lib-component libInputData="libraryModel" ></my-lib-component>

However with this set-up, I get a "Can't export value LibraryModel ..." error during build of the library. I wanted to use the LibraryModel so I can easily pass the data in app.component.html. How can I achieve this ?

Also, LibraryModel is not a declarable nor a module, so it has nothing to do in the exports of your library module. It's just a class, unrelated to angular. — JB Nizet, Dec 26 '18 at 13:42
sorry, typo ... LibraryData -> LibraryModel ... corrected detail of question. — psithyros, Dec 26 '18 at 13:48

SeleM · Answer 1 · 2018-12-26T14:16:13.820

4

You cannot declare / export it, it is a model, simple non-angular class not a component, remove it from both arrays (declarations & exports). It is already exported by export class LibraryModel.

Don't declare the following:

A class that's already declared in another NgModule

An array of directives imported from another package. For example, don't declare FORMS_DIRECTIVES from @angular/forms

NgModule classes

Service classes

Non-Angular classes and objects, such as strings, numbers, functions, entity models, configurations, business logic, and helper classes

MDN.

Don't declare (Official doc).

edited Dec 26 '18 at 14:16

answered Dec 26 '18 at 14:04

SeleM

9,310
5
32
51

15

To clarify the answer, you do need to add it to the public_api.ts as the op did. – Kfir Erez Feb 27 '19 at 15:38

score 1 · Answer 2 · answered Jan 21 '22 at 17:51

Remove 'LibraryModel' from your declarations and exports in my-library.module.ts
Make sure it is exported in public_api.ts
Make sure the library import URLs are right in your component.

E.g.

Right: import { MenuItemsModel } from 'dist/ngx-circular-menu';

Wrong: import { MenuItemsModel } from 'dist/ngx-circular-menu/lib/menu-items.model';

That's it!

How to export models from libraries in Angular?

2 Answers2