Nanny level use angular to build their own component library

Time:2021-1-14

If you use NPM install, you can install a custom component library

1、 ng new projectname

The project name here is the name of the project, and the one I created is gram-angular2

2. To create a gram.module and header.component For example. It can be created with the CLI command or manually

ng generate module modules/gram
ng generate component modules/header

3. In gram.module.ts Add content

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from '../header/header.component';

@NgModule({
 declarations: [
 Headercomponent // changed here
 ],
 imports: [
 CommonModule
 ],
 exports: [
 Headercomponent // changed here
 ]
})
export class GramModule { }

Exports ensures that the components exported from this module can be introduced and used by other modules.

4. Add grammodule to app.module Medium:

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 // changed here
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

At this point, you can app.component.html The headercomponent component is used

<app-header></app-header>

ng-packagr

Ng packagr can compile and package ng projects into a UMD standard library, which can be used by other ng projects.

5. To install ng packagr:

npm install ng-packagr --save-dev 

Add two files to the root of the project- package.json And “public”_ api.ts 。

Ng- package.json Content:

{
 "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
 "lib": {
 "entryFile": "public_api.ts"
 }
}

In public_ api.ts Export from header.module.ts :

export * from './src/app/modules/header/header.module'

stay package.json Add the packgr script command to the file, and set the private property to 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

Remove dependencies that are not used by dependencies

7. Run the packagr script command

npm run packagr

After that, a dist folder will be generated, which is the library package we need. You can also package dist as a tgz file

cd dist
npm pack

In the dist folder, there will be an additional ng-packagr-test-0.0.0.tgz, with the name and version number taken from package.json 。

Since then, we can install our own library through the disk relative path, such as:

npm install ../../program-name/dist/gram-angular2-0.0.0.tgz  

8. Publish to npmjs through your own NPM account on the premise that the package name is unique:

npm publish dist

Recommended Today

Using kotlin to develop Android Applications (4) – common basic controls

Some Base Widget in Android App Some common controls in Android Applications Several basic properties of control ID control ID layout_ Width: Wrap_ Content or match_ parent layout_ Height: Wrap_ Content or match_ parent Background: color / picture 1. Display control Textview text <TextView android:id=”@+id/tv_user_label” android:layout_width=”wrap_content” android:layout_height=”50dp” android:text= “User name” android:gravity=”center” android:textSize=”24sp” android:textColor=”#0000FF” android:textStyle=”normal” android:singleLine=”true” […]