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

时间:2018-11-22 20:58:57

标签: angular nrwl

这应该是一件非常琐碎的事情,因为我找不到与此有关的任何参考,或者我不知道在哪里以及如何寻找它。假设我有一个作用域库core

@myscope/core

现在在此库中,我有一个用于身份验证工作流的文件夹auth

当我想在App中使用库时,可以使用以下命令导入它:

import {AuthService} from @myscope/core

我要实现的是创建一个sub-library,以便可以这样使用:

import {AuthService} from @myscope/core/auth

我知道可以通过在tsconfig中创建新路径来实现这一点,但是我认为这不是一个好的解决方法,因为一旦我从该库中创建了一个包,该路径就不会已交付。

最好的方法是什么?

2 个答案:

答案 0 :(得分:3)

这是一个古老的问题,但我设法使用辅助入口点解决了这个问题 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"
    }
}

这应该是您所需要的,对我有用

希望有帮助

答案 1 :(得分:1)

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

!String.IsNullOrEmpty(Eval("likeunlike")) && Convert.ToInt32(Eval("likeunlike")) == 1 ? true :  false

如您所见,它不起作用。但是我没有放弃。我打开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开头。我没有忘记通过复制和粘贴core并对其进行修改来更改sublibs / projects / myscope / core / auth中的package.json并在angular.json中添加core / auth。在我对所有内容都满意之后,我输入了命令:

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

以下是输出:

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
$

之后,我可以像这样修改我的应用的app.module:

ng generate application my-app

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

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

因此,尽管我不知道如何使用Angular CLI来实现此目的,但我还是可以手动完成。

查看仓库:https://github.com/robertbrower-technologies/sublibs