Angular 7 库 - 如何在不将依赖项添加到主应用程序的情况下捆绑依赖项

Question

我有一个使用 @angular/cli 创建的 Angular 7 应用程序，然后我使用 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 新安装测试
3. cd installtest
4. node_modules/.bin/ng 生成库 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 来验证它是否适用于开发版本。接下来我运行 npm run start -- --prod 来验证它是否适用于 prod 构建。两者都有效。我做的最后一件事是运行 npm run build 和 npm run build -- --prod 并通过 IIS 加载网站，两者都有效。我把完整的 repo 项目放在 GitHub 上以供引用。

您实际上并没有提供 MVCE 。所以很难告诉您为什么您的特定项目目前无法正常工作。如果上述步骤对您不起作用，请提供更多详细信息，说明您尝试过的失败的确切原因(或者至少提供一个可以重现您遇到的问题的最小项目)。