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

据我所知这是不可能的。

要稍微解决您的 "problem"，您可以创建一个全新的 cli 项目。在新项目中生成您的库和其他未来的库。新项目可以是一些 showcase/docs 用于您的图书馆。这样您的所有库都将使用相同版本的依赖项，但不会包含在您的主应用程序中。

Answer 2

我尝试按照您在本地描述的操作进行操作，但没有遇到任何问题。这是我采取的步骤。

npm install @angular/cli
node_modules/.bin/ng new installtest
cd installtest
node_modules/.bin/ng generate library libtest
cd projects/libtest
npm install --save numeral
npm install --save-dev @types/numeral

将 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);
  }
}

更新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 { }

更新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';

更新tsconfig.json。将 "projects/libtest/node_modules/@types" 添加到 "typeRoots" 数组

更新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 { }

更新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 验证它是否适用于产品构建。两者都有效。我做的最后一件事是运行 npm run build 和 npm run build -- --prod 并通过 IIS 加载网站，两者都有效。我把完整的 repo 项目放在 GitHub 上以供参考。

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

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

Angular 7 library - how to bundle dependencies without adding them to the main app

angular

angular7