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 ?
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.
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.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With