如何在 Angular 的另一个库中创建一个库？

Question

这应该是一件非常微不足道的事情，因为我没有找到任何关于此的参考资料，或者我不知道在哪里以及如何查找它。假设我有一个作用域库core

@myscope/core

现在在这个库中，我有一个文件夹 auth 用于身份验证工作流。

当我想在我的App 中使用库时，我会使用它来导入它：

import {AuthService} from @myscope/core

我想要实现的是创建一个sub-library，这样我就可以这样使用：

import {AuthService} from @myscope/core/auth

我知道这可以通过在tsconfig 中创建一个新路径来实现，但我不认为这是一个好的解决方案，因为一旦我从这个库中创建了一个包，这个路径就不会被传递。

最好的方法是什么？

Answer 1

这是一个老问题，但我设法使用辅助入口点解决了这个问题 https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md

对于您的设置，您的库的结构应如下所示..

myscope
├── src
|   ├── public_api.ts
|   └── *.ts
├── ng-package.json
├── package.json
└── auth
    ├── src
    |   ├── public_api.ts
    |   └── *.ts
    └── ng-package.json

请注意，在文档中它说您可以只使用 package.json 但这对我不起作用，我必须创建另一个 ng-package.json，如文章中所述，Alternative到 package.json

在 auth 目录中的 ng-package.json 中，您需要放置类似这样的内容

{
    "lib": {
        "entryFile": "src/public-api.ts"
    }
}

这应该是你所需要的，对我有用

希望对你有帮助

Answer 2

好问题。使用 Angular 6，我尝试了以下命令：

ng new sublibs
cd sublibs
ng generate library @myscope/core
ng generate library @myscope/core/auth
Project name "@myscope/core/auth" is invalid.

如您所见，它不起作用。但我没有放弃。我打开 VS Code 并复制 sublibs/projects/myscope/core 并将其粘贴到自身内部，然后将 sublibs/projects/myscope/core/core 重命名为 sublibs/projects/myscope/core/auth。然后我浏览了 sublibs/projects/myscope/core/auth 中的所有文件，并修改了各处的路径和名称。这主要是在适当的地方添加 /auth 或另一个 ../ 。然后我重命名了 sublibs/projects/myscope/core/auth/src/lib 中的所有文件，并将以 Core 开头的类名更改为以 Auth 开头。我没有忘记更改 sublibs/projects/myscope/core/auth 中的 package.json 并通过复制和粘贴 core 并修改它来在 angular.json 中添加 core/auth。在我对所有内容都进行了适当的重命名和更改感到满意后，我输入了命令：

ng build @myscope/auth

这是输出：

Robert@ROBERT-PC MINGW64 /d/Users/Robert/robertbrower.technologies/customers/robertbrower.technologies/sublibs
$ ng build @myscope/core
Building Angular Package
Building entry point '@myscope/core'
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Removing scripts section in package.json as it's considered a potential security vulnerability.
Built @myscope/core
Building entry point '@myscope/core/auth'
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Removing scripts section in package.json as it's considered a potential security vulnerability.
Built @myscope/core/auth
Built Angular Package!
 - from: D:\Users\Robert\robertbrower.technologies\customers\robertbrower.technologies\sublibs\projects\myscope\core
 - to:   D:\Users\Robert\robertbrower.technologies\customers\robertbrower.technologies\sublibs\dist\myscope\core

Robert@ROBERT-PC MINGW64 /d/Users/Robert/robertbrower.technologies/customers/robertbrower.technologies/sublibs
$

然后我就可以输入这个命令了：

ng generate application my-app

之后我可以像这样修改 my-app 的 app.module：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { CoreModule } from '@myscope/core';
import { AuthModule } from '@myscope/core/auth';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    AuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后我构建了我的应用程序：

ng build my-app

我收到了这个输出：

Robert@ROBERT-PC MINGW64 /d/Users/Robert/robertbrower.technologies/customers/robertbrower.technologies/sublibs
$ ng build my-app

Date: 2018-11-22T22:43:33.834Z
Hash: b686631b6cb537b9519c
Time: 10255ms
chunk {main} main.js, main.js.map (main) 20.2 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 249 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.01 MB [initial] [rendered]

Robert@ROBERT-PC MINGW64 /d/Users/Robert/robertbrower.technologies/customers/robertbrower.technologies/sublibs
$

所以虽然我不知道如何使用 Angular CLI 来实现这一点，但我可以手动完成。

查看回购：https://github.com/robertbrower-technologies/sublibs