Question

我有一个用@angular/cli创建的 Angular 7 应用程序，然后添加了一个使用ng generate library的库。在dev模式下，它可以正常工作。没问题。

我想保留与包含在其中的库相关的依赖关系；而且不要弄乱主应用程序的package.json。因此，自然地，我对库文件夹做了npm install --save [xyx]。很好。在dev模式下仍然可以很好地运行。

但是当我尝试做ng build --prod时，突然找不到库中的依赖项。当然，其原因显而易见。它们没有被正确地捆绑在一起。我对npm的{{1}}功能进行了无济于事的调查，并且我研究了bundleDependencies和lib: { embedded: ... }选项whitelistedNonPeerDependencies，但我似乎无法让他们中的任何一个做我想要的事情。

这不是强制条件；如果绝对是强制性的，我将在主应用程序中安装依赖项。但是我非常想避免这种情况。我不确定这可能是一个不合理的目标。

任何帮助将不胜感激。

Answer 1

我尝试做您在当地描述的事情，没有问题。这是我采取的步骤。

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来验证它是否可以与prod版本一起使用。两者都起作用。我做的最后一件事是运行npm run build和npm run build -- --prod并通过IIS加载网站，两者均有效。我将完整的repo项目放在GitHub上作为参考。

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

Answer 2

据我所知这是不可能的。

要稍微解决您的“问题”，您可以创建一个全新的cli项目。在新项目中，生成您的库和其他将来的库。新项目可以是您的图书馆的一些展示柜/文档。这样，您所有的库都将使用相同版本的依赖项，但不包含在主应用程序中。

Angular 7库-如何捆绑依赖项而不将其添加到主应用程序

2 个答案: