简体   繁体   中英

Create NPM package from multiple angular2 components for a CRUD application

I am new to angular2 and I have successfully created three components for create/edit, view and listing employees and the component selectors are like <create-employee>, <view-employee>, <list-employee> .

My requirement is I need to create a single npm package in the nodejs library for public distribution of this employee module such a way that the single npm module should have all these three components available.

So far I did create an npm package for with the help of this documentation . And I could install this as node modules in my application and successfully worked the create employee functionality. But what I am lacking is the other two components. Rather than create two other node packages for view and list I would like to make the three components available within a single npm package.

What I am expecting is :

app.module.ts

import { EmployeeModule } from 'employee-library';
@NgModule({
  declarations: [..],
  imports: [EmployeeModule],
  providers: [],
  bootstrap: [AppComponent]
 })

user-create.component.html
  <create-employee></create-employee>

user-view.component.html
  <view-employee></view-employee>

user-list.component.html
  <list-employee></list-employee>

wrap your 3 components in EmployeeModule

import { NgModule } from '@angular/core';
// import ... 3 modules

@NgModule({
  declarations: [ CreateEmployee, ViewEmployee, ListEmployee ],
  imports: [...],
  providers: [...],
  exports: [ CreateEmployee, ViewEmployee, ListEmployee ]
})
export class EmployeeModule{ }

then public your library, after that, you could using your module

import { EmployeeModule } from 'employee-library';
@NgModule({
  declarations: [..],
  imports: [EmployeeModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{ }

exports : Array|any[]> Specifies a list of directives/pipes/modules that can be used within the template of any component that is part of an Angular module that imports this Angular module.

Document link https://angular.io/docs/ts/latest/api/core/index/NgModule-interface.html#!#exports-anchor

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM