# 1、开发环境介绍
- cli:
@angular/cli@8.3.19 - node:
v13.1.0 - npm:
6.12.1
# 2、创建 angular 空项目
ng new my-workspace --create-application=false --skip-install
1
或者，直接创建空项目并且安装依赖
ng new my-workspace --create-application=false
1
--skip-install表示跳过 npm 安装(因为很慢)
创建成功效果图如下：
D:\GitHub>ng new my-workspace --create-application=false --skip-install
CREATE my-workspace/angular.json (135 bytes)
CREATE my-workspace/package.json (1248 bytes)
CREATE my-workspace/README.md (1029 bytes)
CREATE my-workspace/tsconfig.json (543 bytes)
CREATE my-workspace/tslint.json (1761 bytes)
CREATE my-workspace/.editorconfig (246 bytes)
CREATE my-workspace/.gitignore (631 bytes)
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in tslint.json.
The file will have its original line endings in your working directory.
Successfully initialized git.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 3、安装依赖包
npm install
1
或(推荐使用yarn install，可以将 yarn 设置为淘宝源，加快包安装的速度)
yarn install
1
# 4、创建 library
ng generate library angular-demo-lib --prefix=lib
1
--prefix=lib 默认后缀为 lib，可以自定义，例如 --prefix=mylib
# 5、在本地 和 NPM、私有包管理服务中 发布 library
# 5.1 完成基础配置：
- 在项目根目录中使用如下命令创建
ng-package.prod.json文件。目的是在angular-demo-lib库的根目录创建文件
touch projects/angular-demo-lib/ng-package.prod.json
1
填入如下内容：
tips：特别注意高亮（5）行，angular6 中是public_api.ts
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/angular-demo-lib",
"lib": {
"entryFile": "src/public-api.ts"
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- 在
angular.json文件中找到 library（angular-demo-lib的build）节点，添加如下配置信息
"configurations": {
"production": {
"project": "projects/angular-demo-lib/ng-package.prod.json"
}
}
1
2
3
4
5
2
3
4
5
完整的配置如下：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-demo-lib": {
"projectType": "library",
"root": "projects/angular-demo-lib",
"sourceRoot": "projects/angular-demo-lib/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/angular-demo-lib/tsconfig.lib.json",
"project": "projects/angular-demo-lib/ng-package.json"
},
"configurations": {
"production": {
"project": "projects/angular-demo-lib/ng-package.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/angular-demo-lib/src/test.ts",
"tsConfig": "projects/angular-demo-lib/tsconfig.spec.json",
"karmaConfig": "projects/angular-demo-lib/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/angular-demo-lib/tsconfig.lib.json",
"projects/angular-demo-lib/tsconfig.spec.json"
],
"exclude": ["**/node_modules/**"]
}
}
}
}
},
"defaultProject": "angular-demo-lib"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# 5.2 在本地发布 library：
执行如下命令即可在本地发布
ng build --prod angular-demo-lib
1
执行效果如下：
D:\GitHub\my-workspace> ng build --prod angular-demo-lib
Building Angular Package
------------------------------------------------------------------------------
Building entry point 'angular-demo-lib'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Built angular-demo-lib
------------------------------------------------------------------------------
Built Angular Package!
- from: D:\GitHub\my-workspace\projects\angular-demo-lib
- to: D:\GitHub\my-workspace\dist\angular-demo-lib
------------------------------------------------------------------------------
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 5.3 将 library 发布到私有 npm(Verdaccio)服务中
将 library 发布到 Verdaccio 中
- 配置为
npm私有服务（Verdaccio）地址
npm config set registry=http://******:4873
1
- 往 Verdaccio 添加用户
npm adduser
1
- 登录 Verdaccio
npm login
1
- 发布 library 到 Verdaccio。记住要进入到 library 文件发布根目录
npm publish
1
- 安装 刚发布出来的 library(tips:记得将 npm 切换回 npm 官方网站)
npm install package-name
1
- 将 npm 切换回 npm 官方网站
npm config set registry https://registry.npmjs.org/
1
# 5.4 将 library 发布到 npm 官网中
参考 5.3，步骤相同
# 6、将本地发布的 library 打包成 .tgz 文件
- 方法一：进入到 library 本地发布出来的文件根目录，执行如下命令
npm pack
1
- 方法二：使用脚本打包
打包命令如下(要先配置完再使用)：
npm run package
1
将发布和打包命令做成批处理脚本，添加到package.json文件中的scripts节点
"build_lib": "ng build --prod angular-demo-lib",
"npm_pack": "cd dist/angular-demo-lib && npm pack",
"package": "npm run build_lib && npm run npm_pack"
1
2
3
2
3
package.json完整代码如下：
{
"name": "my-workspace",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build_lib": "ng build --prod angular-demo-lib",
"npm_pack": "cd dist/angular-demo-lib && npm pack",
"package": "npm run build_lib && npm run npm_pack"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.20",
"@angular-devkit/build-ng-packagr": "~0.803.20",
"@angular/cli": "~8.3.19",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"ng-packagr": "^5.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tsickle": "^0.37.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
- 使用 .tgz 文件包（npm install 文件绝对路径）
npm install C:\my-workspace\dist\my-lib\angular-demo-lib-0.0.1.tgz
1