共计 1866 个字符,预计需要花费 5 分钟才能阅读完成。
如果应用 npm install 就能够装置自定义的组件库呢
1、ng new projectname
此处的 projectname 为项目名称,我创立的为 gram-angular2
2、以创立一个 gram.module 和 header.component 为例。能够用 cli 命令或者手动创立
ng generate module modules/gram
ng generate component modules/header
3、在 gram.module.ts 增加内容
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HeaderComponent} from '../header/header.component';
@NgModule({
declarations: [HeaderComponent // 这里改变了],
imports: [CommonModule],
exports: [HeaderComponent // 这里改变了]
})
export class GramModule {}
exports 确保将该模块中导出的组件能够被其它模块引入并应用。
4、增加 GramModule 到 app.module 中:
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {GramModule} from './modules/gram/gram.module';
@NgModule({
declarations: [AppComponent,],
imports: [
BrowserModule,
GramModule // 这里改变了
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
此时,就能够在 app.component.html 应用 HeaderComponent 组件了:
<app-header></app-header>
ng-packagr
ng-packagr 能够将 ng 我的项目编译并打包成一个 umd 标准的 library,以便能够被其它的 ng 我的项目所应用。
5、装置 ng-packagr:
npm install ng-packagr --save-dev
在我的项目根目录下增加两个文件 ng-package.json 和 public_api.ts。
ng-package.json 内容:
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {"entryFile": "public_api.ts"}
}
在 public_api.ts 中导出 header.module.ts:
export * from './src/app/modules/header/header.module'
在 package.json 文件中增加 packagr 脚本命令,并将 private 属性设置为 false:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"packagr": "ng-packagr -p ng-package.json"
},
"private": false
删除掉 dependencies 没有应用的依赖
7、运行 packagr 脚本命令
npm run packagr
完结后会生成一个 dist 文件夹,就是咱们须要的 library 包了。还能够进一步将 dist 打包成 tgz 文件:
cd dist
npm pack
dist 文件夹里就会多出一个 ng-packagr-test-0.0.0.tgz,名称和版本号均取自 package.json。
自此,咱们就能够通过磁盘相对路径来装置本人的 library 了,如:
npm install ../../program-name/dist/gram-angular2-0.0.0.tgz
8、通过本人的 npm 账号公布到 npmjs,前提是确保包名是惟一的:
npm publish dist