logo标签列表

在 Angular Cli 工作区之外创建 Angular 库

angularshared-librariesangular-clilibrariesworkspace
3

是否有可能在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 的库，它位于另一个目录中，而不是项目目录内。我在我的工作区的 angular.json 文件中放置了 my-lib2 的配置，使用相对路径，但是当我在 工作区 内编译这个命令 ng build my-lib2 时，出现了以下错误：

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 的条目，以将库从 projects 路径中移出？

你在 my-lib2 中安装了 @angular/core 吗？你可能需要先在 my-lib2 上执行 npm install。 - Jason White
@JasonWhite 当库位于工作区的项目目录中时，在库目录中进行npm安装是不必要的，因为依赖项是从工作区的通用node_modules目录中获取的。 - Cristian Rinaldi
1个回答
0

解决方案是正确配置库的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
------------------------------------------------------------------------------
对我来说，出现了一个未处理的异常：无法找到“node_modules”目录。 - FindOutIslamNow
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接