我有一个使用 @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
,但我似乎无法让它们中的任何一个完全按照我的意愿行事。
这不是成败要求;如果它是绝对强制性的,我将只在主应用程序中安装依赖项。但我非常想避免这种情况。也许这是一个不合理的目标,我不确定。
如有任何帮助,我们将不胜感激。
最佳答案
我尝试按照您在本地描述的操作进行操作,但没有遇到任何问题。这是我采取的步骤。
npm install @angular/cli
node_modules/.bin/ng 新安装测试
cd installtest
node_modules/.bin/ng 生成库 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 。所以很难告诉您为什么您的特定项目目前无法正常工作。如果上述步骤对您不起作用,请提供更多详细信息,说明您尝试过的失败的确切原因(或者至少提供一个可以重现您遇到的问题的最小项目)。
关于Angular 7 库 - 如何在不将依赖项添加到主应用程序的情况下捆绑依赖项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53658761/