Angular Cli工作区之外的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 中strong>,我遇到了以下错误:

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,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 中的条目以将库从 projects 路径中删除吗?

shaouwu 回答:Angular Cli工作区之外的Angular库

解决方案是正确配置库的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/**"
            ]
          }
        }
      }
    }},
my-lib2目录中的

tsconfig.lib.ts 文件配置:

{
  "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
------------------------------------------------------------------------------
本文链接:https://www.f2er.com/3152402.html

大家都在问