CODEWITHSUNDEEP
angularangular-library
psithyros
psithyros

Reputation: 91

How to export models from libraries in Angular?

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 ?

Upvotes: 9

Views: 14308

Answers (2)

Evan MJ
Evan MJ

Reputation: 2813

  1. Remove 'LibraryModel' from your declarations and exports in my-library.module.ts
  2. Make sure it is exported in public_api.ts
  3. 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!

Upvotes: 1

SeleM
SeleM

Reputation: 9658

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).

Upvotes: 4

Related Questions