Angular v14集成ngx-currency配置min属性报类型不兼容错误

云原生阿岚

2026-8-28

问题背景

在Angular v14版本项目中执行npm install ngx-currency安装ngx-currency依赖后，参考官方文档「全局设置选项」章节示例，将配置代码复制到app.module.ts文件中，原始配置代码如下：

import { CurrencyMaskInputMode, NgxCurrencyModule } from "ngx-currency";
import .... // other modules

export const customCurrencyMaskConfig = {
    align: "right",  allowNegative: true,  allowZero: true,  decimal: ",",
    precision: 2,  prefix: "R$ ",  suffix: "",  thousands: ".",
    nullable: true,
    min: null,
    max: null,
    inputMode: CurrencyMaskInputMode.FINANCIAL
}; 
@NgModule({
  imports: [
    NgxCurrencyModule.forRoot(customCurrencyMaskConfig), ...
  ]
})

执行ng serve启动项目时，控制台首先抛出类型不兼容报错：

Types of property 'min' are incompatible. Type 'null' is not assignable to type 'number | undefined'
（属性'min'的类型不兼容，类型'null'无法赋值给'number | undefined'类型）

后续尝试移除min和max配置项，或将这两个属性的值设置为undefined，又触发core.mjs抛出的空注入错误：

ERROR NullInjectorError: R3InjectorError(PagesModule)[[object Object] -> [object Object] -> [object Object] -> [object Object]]: NullInjectorError: No provider for [object Object]!

报错截图参考：

解决方案

两个报错分别由版本类型定义不匹配、模块导入规则错误导致，按以下步骤修复即可：

类型报错原因：适配Angular v14的ngx-currency版本中，全局配置的min、max字段类型定义为number | undefined，不接受null值，官方文档示例未同步更新类型规则，直接复制会触发TS类型校验错误。
空注入报错原因：一是自定义配置对象未显式声明CurrencyMaskConfig类型，TS编译时丢失Angular依赖注入所需的元数据；二是在特性模块、懒加载子模块中重复调用NgxCurrencyModule.forRoot()，覆盖了根模块注入的全局配置Provider，导致注入器无法找到对应实例。

具体修复操作：

修正根模块（AppModule）的全局配置代码，补充导入CurrencyMaskConfig类型，给配置对象显式声明该类型，将min、max字段值从null改为undefined，不要直接删除这两个字段，保证配置字段完全匹配类型要求。修正后的根模块代码示例：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 补充导入CurrencyMaskConfig类型
import { CurrencyMaskConfig, CurrencyMaskInputMode, NgxCurrencyModule } from "ngx-currency";
// 其他业务模块、组件导入
// import { AppComponent } from './app.component';

// 显式声明配置对象的类型为CurrencyMaskConfig
export const customCurrencyMaskConfig: CurrencyMaskConfig = {
    align: "right",
    allowNegative: true,
    allowZero: true,
    decimal: ",",
    precision: 2,
    prefix: "R$ ",
    suffix: "",
    thousands: ".",
    nullable: true,
    min: undefined, // 替换原null值，保留字段不要删除
    max: undefined, // 替换原null值，保留字段不要删除
    inputMode: CurrencyMaskInputMode.FINANCIAL
}; 

@NgModule({
  declarations: [
    // AppComponent 等根组件、指令
  ],
  imports: [
    BrowserModule,
    // 仅在根模块调用forRoot传入全局配置
    NgxCurrencyModule.forRoot(customCurrencyMaskConfig),
    // 其他业务模块导入
  ],
  providers: [],
  bootstrap: [/* AppComponent */]
})
export class AppModule { }

排查项目中所有其他模块（包括路由懒加载的PagesModule这类子模块），删除其中重复编写的NgxCurrencyModule.forRoot(...)代码。子模块中如果需要使用ngx-currency的指令，直接导入NgxCurrencyModule即可，不需要传入任何配置参数，避免覆盖根模块的全局Provider。
保存所有修改后重新执行ng serve启动项目，两个报错即可解决。

内容的提问来源于stack exchange，提问作者Jeb50