代码之家 › 专栏 › 技术社区 › DAG

如何在另一个库中以角度创建库?

nrwl angular

0

DAG · 技术社区 · 7 年前

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

@myscope/core

现在在这个图书馆里我有一个文件夹 auth 用于身份验证工作流。

当我想用图书馆 App 我用这个导入它:

import {AuthService} from @myscope/core

我想达到的是创造一个 sub-library 所以我可以这样使用:

import {AuthService} from @myscope/core/auth

我知道这是可能的,在 tsconfig ,但我不认为这是一个好的解决方案,因为一旦我从这个库中创建了一个包,这个路径就不会被传递。

最好的方法是什么?

1 回复 | 直到 7 年前

1

Robert Brower 7 年前

好问题。使用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代码,复制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

之后,我可以修改我的应用程序的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