Angular Angular CLI 工作区外的库
Angular Library outside the Angular Cli Workspace
是否可以在 angular cli 的工作空间之外创建一个库?
传统方案:
my-workspace/
... (workspace-wide config files)
projects/ (generated applications and libraries)
my-first-app/ --(an explicitly generated application)
... --(application-specific config)
e2e/ ----(corresponding e2e tests)
src/ ----(e2e tests source)
... ----(e2e-specific config)
src/ --(source and support files for application)
my-lib/ --(a generated library)
... --(library-specific config)
src/ --source and support files for library)
现在,我有一个库:my-lib2 它位于另一个目录中,而不是在项目目录中。我将 my-lib2 的配置放在 my-workspace 的 angular.json 文件中,使用相对路径,但是,当我编译这个时:ng build my-lib2,在 workspace,我有这个错误:
Building Angular Package
** It is not recommended to publish Ivy libraries to NPM repositories **
------------------------------------------------------------------------------
Building entry point 'my-lib2'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: ../my-lib2/src/lib/my-lib2.component.ts(1,35): error TS2307: Cannot find module '@angular/core'.
../my-lib2/src/lib/my-lib2.module.ts(1,26): error TS2307: Cannot find module '@angular/core'.
../my-lib2/src/lib/my-lib2.service.ts(1,28): error TS2307: Cannot find module '@angular/core'.
../my-lib2/src/lib/my-lib2.service.ts(3,1): error TS2354: This syntax requires an imported helper but module 'tslib' cannot be found.
An unhandled exception occurred: ../my-lib2/src/lib/my-lib2.component.ts(1,35): error TS2307: Cannot find module '@angular/core'.
../my-lib2/src/lib/my-lib2.module.ts(1,26): error TS2307: Cannot find module '@angular/core'.
../my-lib2/src/lib/my-lib2.service.ts(1,28): error TS2307: Cannot find module '@angular/core'.
../my-lib2/src/lib/my-lib2.service.ts(3,1): error TS2354: This syntax requires an imported helper but module 'tslib' cannot be found.
See "/tmp/ng-bt10hE/angular-errors.log" for further details.
架构
my-lib2/
...
src/
my-workspace/
...
projects/
my-first-app/
...
e2e/
src/
...
src/
my-lib/
...
src/
工作区内angular.json的配置:
...
...
"my-lib2": {
"projectType": "library",
"root": "projects/../../my-lib2/",
"sourceRoot": "projects/../../my-lib2/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/../../my-lib2/tsconfig.lib.json",
"project": "projects/../../my-lib2/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/../../my-lib2/tsconfig.lib.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/../../my-lib2/src/test.ts",
"tsConfig": "projects/../../my-lib2/tsconfig.spec.json",
"karmaConfig": "projects/../../my-lib2/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/../../my-lib2/tsconfig.lib.json",
"projects/../../my-lib2/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}},
...
...
tsconfig.lib.ts(my-lib2的配置文件)
{
"extends": "../my-workspace/tsconfig.json",
"compilerOptions": {
"outDir": "../my-workspace/out-tsc/lib",
"target": "es2015",
"declaration": true,
"inlineSources": true,
"types": [],
"lib": [
"dom",
"es2018"
]
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
可以看出,所有路径都是相对的...
知道如何配置工作区 angular.json 中的条目以将库从 项目 中取出路径?
解决方案是正确配置库的 tsconfig.lib.ts 文件。
目录架构:
my-lib2/
...
src/
my-workspace/
...
projects/
my-first-app/
...
e2e/
src/
...
src/
my-lib/
...
src/
工作区中angular.json文件中的my-lib2条目:
"my-lib2": {
"projectType": "library",
"root": "../my-lib2",
"sourceRoot": "../my-lib2/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "../my-lib2/tsconfig.lib.json",
"project": "../my-lib2/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "../my-lib2/tsconfig.lib.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "../my-lib2/src/test.ts",
"tsConfig": "../my-lib2/tsconfig.spec.json",
"karmaConfig": "../my-lib2/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"../my-lib2/tsconfig.lib.json",
"../my-lib2/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}},
tsconfig.lib.ts my-lib2目录下的文件配置:
{
"extends": "../my-workspace/tsconfig.json",
"compilerOptions": {
"outDir": "../my-workspace/out-tsc/lib",
"target": "es2015",
"declaration": true,
"inlineSources": true,
"types": [],
"lib": [
"dom",
"es2018"
],
"baseUrl": "../my-workspace/",
"paths": {
"*": ["../my-workspace/node_modules/*"]
}
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
这是配置中的重要部分:
...
"baseUrl": "../my-workspace/",
"paths": {
"*": ["../my-workspace/node_modules/*"]
}
...
运行编译:
Building Angular Package
** It is not recommended to publish Ivy libraries to NPM repositories **
------------------------------------------------------------------------------
Building entry point 'my-lib2'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Built my-lib2
------------------------------------------------------------------------------
Built Angular Package!
- from: /home/usuario/my-project/my-lib2
- to: /home/usuario/my-project/my-workspace/dist/my-lib2
------------------------------------------------------------------------------
是否可以在 angular cli 的工作空间之外创建一个库?
传统方案:
my-workspace/
... (workspace-wide config files)
projects/ (generated applications and libraries)
my-first-app/ --(an explicitly generated application)
... --(application-specific config)
e2e/ ----(corresponding e2e tests)
src/ ----(e2e tests source)
... ----(e2e-specific config)
src/ --(source and support files for application)
my-lib/ --(a generated library)
... --(library-specific config)
src/ --source and support files for library)
现在,我有一个库:my-lib2 它位于另一个目录中,而不是在项目目录中。我将 my-lib2 的配置放在 my-workspace 的 angular.json 文件中,使用相对路径,但是,当我编译这个时:ng build my-lib2,在 workspace,我有这个错误:
Building Angular Package
** It is not recommended to publish Ivy libraries to NPM repositories **
------------------------------------------------------------------------------
Building entry point 'my-lib2'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: ../my-lib2/src/lib/my-lib2.component.ts(1,35): error TS2307: Cannot find module '@angular/core'.
../my-lib2/src/lib/my-lib2.module.ts(1,26): error TS2307: Cannot find module '@angular/core'.
../my-lib2/src/lib/my-lib2.service.ts(1,28): error TS2307: Cannot find module '@angular/core'.
../my-lib2/src/lib/my-lib2.service.ts(3,1): error TS2354: This syntax requires an imported helper but module 'tslib' cannot be found.
An unhandled exception occurred: ../my-lib2/src/lib/my-lib2.component.ts(1,35): error TS2307: Cannot find module '@angular/core'.
../my-lib2/src/lib/my-lib2.module.ts(1,26): error TS2307: Cannot find module '@angular/core'.
../my-lib2/src/lib/my-lib2.service.ts(1,28): error TS2307: Cannot find module '@angular/core'.
../my-lib2/src/lib/my-lib2.service.ts(3,1): error TS2354: This syntax requires an imported helper but module 'tslib' cannot be found.
See "/tmp/ng-bt10hE/angular-errors.log" for further details.
架构
my-lib2/
...
src/
my-workspace/
...
projects/
my-first-app/
...
e2e/
src/
...
src/
my-lib/
...
src/
工作区内angular.json的配置:
...
...
"my-lib2": {
"projectType": "library",
"root": "projects/../../my-lib2/",
"sourceRoot": "projects/../../my-lib2/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/../../my-lib2/tsconfig.lib.json",
"project": "projects/../../my-lib2/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/../../my-lib2/tsconfig.lib.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/../../my-lib2/src/test.ts",
"tsConfig": "projects/../../my-lib2/tsconfig.spec.json",
"karmaConfig": "projects/../../my-lib2/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/../../my-lib2/tsconfig.lib.json",
"projects/../../my-lib2/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}},
...
...
tsconfig.lib.ts(my-lib2的配置文件)
{
"extends": "../my-workspace/tsconfig.json",
"compilerOptions": {
"outDir": "../my-workspace/out-tsc/lib",
"target": "es2015",
"declaration": true,
"inlineSources": true,
"types": [],
"lib": [
"dom",
"es2018"
]
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
可以看出,所有路径都是相对的...
知道如何配置工作区 angular.json 中的条目以将库从 项目 中取出路径?
解决方案是正确配置库的 tsconfig.lib.ts 文件。
目录架构:
my-lib2/
...
src/
my-workspace/
...
projects/
my-first-app/
...
e2e/
src/
...
src/
my-lib/
...
src/
工作区中angular.json文件中的my-lib2条目:
"my-lib2": {
"projectType": "library",
"root": "../my-lib2",
"sourceRoot": "../my-lib2/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "../my-lib2/tsconfig.lib.json",
"project": "../my-lib2/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "../my-lib2/tsconfig.lib.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "../my-lib2/src/test.ts",
"tsConfig": "../my-lib2/tsconfig.spec.json",
"karmaConfig": "../my-lib2/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"../my-lib2/tsconfig.lib.json",
"../my-lib2/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}},
tsconfig.lib.ts my-lib2目录下的文件配置:
{
"extends": "../my-workspace/tsconfig.json",
"compilerOptions": {
"outDir": "../my-workspace/out-tsc/lib",
"target": "es2015",
"declaration": true,
"inlineSources": true,
"types": [],
"lib": [
"dom",
"es2018"
],
"baseUrl": "../my-workspace/",
"paths": {
"*": ["../my-workspace/node_modules/*"]
}
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
这是配置中的重要部分:
...
"baseUrl": "../my-workspace/",
"paths": {
"*": ["../my-workspace/node_modules/*"]
}
...
运行编译:
Building Angular Package
** It is not recommended to publish Ivy libraries to NPM repositories **
------------------------------------------------------------------------------
Building entry point 'my-lib2'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Built my-lib2
------------------------------------------------------------------------------
Built Angular Package!
- from: /home/usuario/my-project/my-lib2
- to: /home/usuario/my-project/my-workspace/dist/my-lib2
------------------------------------------------------------------------------