Как создать библиотеку внутри другой библиотеки в 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, как описано в статье как альтернатива package.json

Внутри вашего ng-package.json в каталоге auth вам нужно будет поместить что-то вроде этого

{
    "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 / auth. Затем я просмотрел все файлы в sublibs/projects/myscope/core / auth и везде изменил пути и имена. В основном это было добавление / auth или другое../ где это уместно. Затем я переименовал все файлы в sublibs/projects/myscope/core / auth / src / lib и изменил имена классов, которые начинаются с Core, чтобы они начинались с Auth. Я не забыл изменить package.json в sublibs/projects/myscope/core / auth и добавить core / auth в angular.json, скопировав и вставив core и изменив его. После того, как я был удовлетворен, все было переименовано и соответствующим образом изменено, я ввел команду:

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