During recent Angular project development, there was a requirement that the same interface be used in two different projects (client, management). So we decided to add a Git repository for components that can be reused for multiple projects!

Background: This project has a lot of permissions, and it requires a lot of process to distribute NPM packages. Therefore, in the following method attempts, the priority is not to distribute packages!

Use subtree

Ideas:

  • Create a new subproject *github.com/Heyff12/reu… Angular project that makes it easy to reference and test common components
  • Outside the SRC directory, create a new onereuse/srcDirectory, where you write common component code
  • Third parties need to use the library of the common component, just pullreuse/srcdirectory

The following operations are performed in third-party libraries

1. Pull the subproject code

git subtree add --prefix=reuse https://github.com/Heyff12/reuseSon.git master --squash
Copy the code

2. Submit the code to the subproject after modification

You need to commit the current changes to this project (third-party project) before performing the subtree push below

git subtree push --prefix=reuse https://github.com/Heyff12/reuseSon.git master
Copy the code

This reference updates the subtree library code; The subtree library needs to pull for the latest changes

3. Pull the latest code of the subproject

git subtree pull --prefix=reuse https://github.com/Heyff12/reuseSon.git master --squash
Copy the code

4, disadvantages

  • In Angular projects, components need to be registered with the Module. Modules pulled from common components need to be imported in third-party project app.module.ts
  • Configuration compilation needs to be added

File tsconfig. App. Json

"include": [
    "reuse/src/app/components/**/*.ts",]."exclude": [
    "reuse/src/app/components/**/*.spec.ts"
  ]
Copy the code

Release NPM package

Ideas:

  • Based on the first method, the operation of subtree is complicated, so we try to send packets

1. Sub-project outsourcing

  • npm init
  • Create a.npmignore file
  • npm login
  • npm publish

Note: If the package name starts with @, for example, @hey_ff/ testButton, attributes need to be added when the package is published

npm publish --access public
Copy the code

2. Install plug-ins in third-party projects

npm install @hey_ff/testbutton
Copy the code

3. Way of use

  • The introduction of

The file app. The module. Ts

import {TheButtonComponent} from '@hey_ff/testbutton/the-button/the-button.component'

@NgModule({
  declarations: [
    AppComponent,TheButtonComponent
  ],
Copy the code
  • The code that sends the packet, i.ereuse/srcDirectories are native, uncompiled Angular code that needs to be compiled and configured in a third-party project

File tsconfig. App. Json

"include": [
    "node_modules/@hey_ff/testbutton/the-button/**/*.ts",]."exclude": [
    "node_modules/@hey_ff/testbutton/the-button/**/*.spec.ts",]Copy the code

4, summarize

Compared to the first method, it just changes the method of obtaining the common component library code from subtree to NPM install, and does not simplify the tedious configuration in actual use

Third, the subproject does not send packages, by pulling the common component code, configure the absolute path to package.json implementation reference

Releasing the package still doesn’t make it any easier to use compared to the first two, so keep trying the no-package approach.

1. Pull the subproject code to a third party project, or use the subtree path in the first one

Modify package.json for third-party projects to specify import names for common component paths

"btn": "file:./reuse/src/app/components",
Copy the code

3. Introduce in app.module.ts


import {TheButtonComponent} from 'btn'

@NgModule({
  declarations: [
    AppComponent,TheButtonComponent
  ],
Copy the code

4. Add compilation in tsconfig.app.json

"include": [
    "reuse/src/app/components/**/*.ts",]."exclude": [
    "reuse/src/app/components/**/*.spec.ts"
  ]
Copy the code

4, the subproject does not send the package, by configuring the code Url to package.json implementation reference

Package. json can be configured without pulling code from common components.

Github.com/Heyff12/reu… This library only has code for common components

1. Modify package.json for third-party projects

"btnUrl": "https://github.com/Heyff12/reuseBtn",
Copy the code

2. Introduce in app.module.ts

import {TheButtonComponent} from 'btnUrl'

@NgModule({
  declarations: [
    AppComponent,TheButtonComponent
  ],
Copy the code

3. Add compilation in tsconfig.app.json

"include": [
    "node_modules/btnUrl/**/*.ts",]."exclude": [
    "node_modules/btnUrl/**/*.spec.ts",]Copy the code

4, summarize

Based on the current 4 methods, only the way of introducing common component library is optimized, but the actual use is still cumbersome, so it can be regarded as the reference exploration for package.json ~

Tedious to use, in the final analysis, is due to the introduction of common component code not compiled!!

By reviewing the Angular documentation again, let’s focus on compiling the code!

Subprojects publish compiled Angular component packages

Build the Library configuration in the subproject, you can build and publish the compiled and packaged component package

1. Create a workspace

ng new xxxx –create-application=false

XXXX is the project name

2. Go to the project folder

cd xxxx

ng g library my-lib –prefix=ml

3. Build ng build my-lib –prod

4. The dist file CD dist CD my-lib is generated after compilation

5. Packaging

npm pack

6. Publish –access public

2, in the third party project installation package, can be directly used

import { MyLibModule } from '@hey_ff/my-lib';

@NgModule({
  declarations: [AppComponent, TheButtonComponent],
  imports: [BrowserModule, AppRoutingModule, MyLibModule],
Copy the code

3. If it is not convenient to publish to NPM

1. In the common component project, push the packaged file dist/my-lib from the first step to the specified branch

git subtree push --prefix dist/my-lib origin reuse
Copy the code

2, in the third-party project through the specified branch path to install the above packaged files

"reuse": "[email protected]:Heyff12/angularPackage.git#reuse".Copy the code

3, in the third party project, normal use

import { MyLibModule } from 'reuse';

@NgModule({
  declarations: [AppComponent, TheButtonComponent],
  imports: [BrowserModule, AppRoutingModule, MyLibModule],
Copy the code

Sixth, the best solution not to send NPM package

  • The fifth way, step 3

Seven, to reflect on

The above implementation process is very twisted after watching.

  • Why not send NPM package? — Specific projects, resulting in a complicated application process, so we want to go to the way of not bothering more irrelevant personnel 😢
  • Why waste time on package.json? — Misguided exploration of package.json 😿
  • Why not compile directly? It comes from the nice, half-baked idea that any project that uses a common component library can change the code in the common component library itself

Eight, summary

  • If you want to develop common components, keep the common component development uniform and only develop and debug the code in the common component repository. Other libraries are only responsible for use
  • In the common component repository, configure Settings that enable debugging of common components
  • For common component code, must be compiled and packaged, to ensure the use of simplicity
  • In a common component library, only the code for the common component is compiled at compile time
  • Although this article uses Angular as an example, we encourage you to avoid missteps when developing in other languages.

Ix. Related libraries

  • Fifth, build Angular component packages
  • Uncompiled component packages
  • Uncompiled component packages. Fourth, subprojects are not packaged and referenced via urls
  • The original connection