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

我使用

@Angular/cli

创建了一个Angular 7应用程序，然后使用

ng generate library

添加了一个库。它在

dev

模式下工作良好。没有问题

我想保留与它所包含的库相关的依赖项；并且不会弄乱主应用程序的

包.json

。因此，很自然地，我安装了npm，将[xyx]保存到库文件夹中。效果很好。仍然在

dev

模式下运行良好

但是当我尝试执行

ngbuild--prod

时，它突然找不到作为库一部分的依赖项。当然，原因是显而易见的；他们没有被适当地捆绑在一起。我调查了

npm

的

bundleDependencies

功能，但没有结果，我查看了

ng package.json

的

lib:{embedded:…}

和

whitelistedNonPeerDependencies

选项，但我似乎无法让它们中的任何一个做我想做的事情

这不是一个成功或失败的要求；如果它是绝对必需的，我将只在主应用程序中安装依赖项。但我很想避免这种情况。也许这是一个不合理的目标，我不确定

---

任何帮助都将不胜感激。

据我所知，这是不可能的

---

为了在某种程度上解决您的“问题”，您可以创建一个全新的cli项目。在新项目中，生成您的库和其他未来的库。新项目可以是库的一些showcase/docs。这样，您的所有库都将使用相同版本的依赖项，但不包括在主应用程序中。

我尝试执行您在本地描述的操作，但没有出现问题。以下是我采取的步骤

npm安装@angular/cli

node\u modules/.bin/ng新安装测试

cd安装测试

node_modules/.bin/ng生成库libtest

cd项目/libtest

npm安装--保存数字

npm安装--保存dev@types/numeric

将

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/public_api.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 { }

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

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

更新

tsconfig.json

。将

“projects/libtest/node_modules/@types”

添加到

“typeroot”

数组中

更新

src/app/app.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 { }

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

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>

{{'12345678'|小数单位：2}


{{'12345678'|小数单位：0}


{{'12345678'|小数单位：2}}


{{'12345678'|小数单位：2}}


{{'12345678'|小数单位：2}}

在此之后，我运行了

npm run start

，以验证它是否与开发人员构建一起工作。接下来，我运行了npm run start--prod，以验证它是否与prod构建一起工作。两者都起作用了。我做的最后一件事是运行

npm-run-build

和

npm-run-build--prod

并通过IIS加载网站，这两种方法都有效。我把整个回购项目放在上面以供参考

---

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

很抱歉，我确实没有提供一个好的MVCE。我会看看是否能很快创建一个。非常感谢您抽出时间。根据您的说法，这确实起到了我想要的作用。我很难弄清楚我做了哪些不同的事情，但我没有采取的关键步骤是在

tsconfig.json

的

typeroot

数组中添加额外的内容。我还不完全理解这是如何工作的，但你已经证明了这是可以做到的，你给了我足够的时间继续下去，你的例子运行正常，所以我会给你分数。非常感谢你。很抱歉，我花了这么长时间才做出回应。看来社区比我早了一步。我再次道歉。忙碌的生活和一切。你的例子很好。我会为你的回购做一个叉，这样你就可以删除它了。我再次道歉。谢谢你的回复。1.我总是使用node_modules/…，这是因为我没有全局安装cli。我喜欢使用本地副本进行开发，因为我很清楚我使用的是哪个版本（它在package.config中）。2.这是可能的，这种方法不会为你工作，这就是为什么我在寻找一个MVCE。js世界中有不同的模块类型。它可能只适用于其中一些类型，而不适用于其他类型（或由于其他因素）。如果你把范围缩小得更窄，请随意提出另一个更具体的问题。祝你一切顺利。@Ciel我喜欢控制deps的想法，只是从来没有想过自己尝试一下。我认为您需要在main

packages.json中添加一个步骤，不过当您在主项目目录中运行
npm install
时，它将安装库div。另外，如果在构建过程中遇到其他问题，我确实在上写了一篇博客文章。