Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?

like image 994
psithyros Avatar asked Dec 26 '18 13:12

psithyros


People also ask

What is export in Angular module?

Similarly, the export keyword lets you declare variables, functions, and classes that the module should be exposed to other scripts. Using the export keyword, you can make selected APIs available to other modules. A module's functions, variables, and classes that aren't explicitly exported remain private to the module.

What can the exports array of an Angular module contain?

Export array − This is used to export components, directives, and pipes which can then be used in other modules. Import array − Just like the export array, the import array can be used to import the functionality from other Angular JS modules.


1 Answers

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

like image 195
SeleM Avatar answered Sep 18 '22 08:09

SeleM