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加载网站,两者都有效.我把完整的repo项目放在GitHub上作为参考.

你真的没有提供MVCE.所以很难告诉你为什么你的特定项目目前没有工作.如果上述步骤对您不起作用,请提供更详细的信息,说明您所尝试的内容是否失败(或者至少是一个可以重现您遇到的问题的最小项目).