Библиотека Angular 7 - как связывать зависимости, не добавляя их в основное приложение

Question

У меня есть приложение Angular 7 , которое я создал с помощью @angular/cli, а затем добавил библиотеку для использования ng generate library.Он отлично работает в режиме dev и тому подобное.Нет проблем.

Я хотел бы сохранить зависимости, относящиеся к библиотеке, содержащейся в нем;И не загромождайте главное приложение package.json.Поэтому, естественно, я сделал npm install --save [xyx] для папки библиотеки.Это работало нормально.Все еще отлично работает в режиме dev.

Но когда я пытаюсь сделать ng build --prod, вдруг он не может найти зависимости, которые являются частью библиотеки.Конечно, причина очевидна;Они не связаны должным образом. Я исследовал функцию npm bundleDependencies безрезультатно, и я посмотрел на опции lib: { embedded: ... } и whitelistedNonPeerDependencies для ng-package.json, но я могу 'Кажется, кто-то из них делает то, что я хочу.

Это не требование делать или ломаться;Если это абсолютно обязательно, я просто установлю зависимости в основном приложении.Но я бы очень хотел этого избежать.Возможно, это неразумная цель, я не уверен.

Любая помощь будет принята с благодарностью.

Answer 1

Я пытался сделать то, что вы описали локально, и у меня не было проблем.Вот шаги, которые я предпринял.

1. npm install @angular/cli
2. node_modules/.bin/ng new installtest
3. cd installtest
4. node_modules/.bin/ng generate library libtest
5. cd projects/libtest
6. npm install --save numeral
7. npm install --save-dev @types/numeral

8. добавлено ro.pipe.ts к projects/libtest/src

   import { Pipe, PipeTransform } from '@angular/core';
   
   import * as numeral from 'numeral';
   
   @Pipe({name: 'decimalUnit'})
   export class RoPipe implements PipeTransform {
     constructor() {
       numeral.register('locale', 'ro', {
           delimiters: {
               thousands: '.',
               decimal: ','
           },
           abbreviations: {
               thousand: 'k',
               million: 'm',
               billion: 'b',
               trillion: 't'
           },
           ordinal: function (number) {
               return number === 1 ? 'er' : 'ème';
           },
           currency: {
               symbol: 'RON'
           }
       });
   
       numeral.locale('ro');
   }
   
     public transform(value: string, numDecimals: number) {
       const b = numeral(value);
       let x = '0,0.';
       for (let i = 0; i < numDecimals; i++) {
           x = x + '0';
       }
   
       return b.format(x);
     }
   }
   

9. обновление projects/libtest/src/lib/libtest.module.ts

   import { NgModule } from '@angular/core';
   import { LibtestComponent } from './libtest.component';
   import { RoPipe } from './ro.pipe';
   
   @NgModule({
     declarations: [LibtestComponent, RoPipe],
     imports: [
     ],
     exports: [LibtestComponent, RoPipe]
   })
   export class LibtestModule { }
   

10. обновление projects/libtest/src/public_api.ts

    export * from './lib/libtest.service';
    export * from './lib/libtest.component';
    export * from './lib/libtest.module';
    export * from './lib/ro.pipe';
    

11. обновление tsconfig.json.добавить "projects/libtest/node_modules/@types" в "typeRoots" массив

12. обновить src/app/app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { LibtestModule } from 'projects/libtest/src/public_api';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        LibtestModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

13. обновить src/app/app.component.html

    <label>{{ '12345678' | decimalUnit:2 }}</label>
    <br>
    <label>{{ '12345678' | decimalUnit:0 }}</label>
    <br>
    <label>{{ '12345678' | decimalUnit:2 }}</label>
    <br>
    <label>{{ '12345678' | decimalUnit:2 }}</label>
    <br>
    <label>{{ '12345678' | decimalUnit:2 }}</label>
    

После этого я запустил npm run start, чтобы убедиться, что он работает со сборкой dev.Затем я запустил npm run start -- --prod, чтобы убедиться, что он работает со сборкой prod.Оба работали.Последнее, что я сделал, это запустил npm run build и npm run build -- --prod и загрузил сайт через IIS, оба из которых работали.Я поставил проект полного репо на GitHub для справки.

Вы на самом деле не предоставляете MVCE .Поэтому трудно сказать вам, почему ваш конкретный проект не работает в данный момент.Если описанные выше шаги не работают для вас, пожалуйста, предоставьте более подробную информацию о том, что вы пытались сделать именно с ошибкой (или хотя бы минимальный проект, который может воспроизвести проблему, с которой вы столкнулись).

Answer 2

Насколько я знаю, это невозможно.

Чтобы хоть как-то решить вашу "проблему", вы могли бы создать совершенно новый проект Cli.В новом проекте создайте свою библиотеку и другие будущие библиотеки.Новый проект может быть какой-то демонстрацией / документами для ваших библиотек.Таким образом, все ваши библиотеки будут использовать одну и ту же версию зависимостей, но не будут включены в ваше основное приложение.