ng2-currency-mask module is not imported on my project. If I create a dummy project and use it there it is working perfectly. But in my real project, it is not even importing.
My app.module is this:-
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
import { ToastrModule } from 'ngx-toastr'
import { TranslateModule, TranslateLoader } from '@ngx-translate/core'
import { TranslateHttpLoader } from '@ngx-translate/http-loader'
import { DataTablesModule } from "angular-datatables"
import { NgSelect2Module } from 'ng-select2';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { CurrencyMaskModule } from 'ng2-currency-mask';
// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
CurrencyMaskModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule,
NgSelect2Module,
ToastrModule.forRoot(),
TranslateModule.forRoot({
defaultLanguage: 'th',
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
DataTablesModule,
NgMultiSelectDropDownModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
My Implementation in html file
<input class="table-input-control text-right" placeholder="Enter here" min="0" currencyMask [(ngModel)]="itemdetail.target">
My package.json dependencies are these. Can anyone tell me a fix for this. I am looking for it for so long.
{
"name": "lthl",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.0",
"@angular/common": "~12.2.0",
"@angular/compiler": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/forms": "~12.2.0",
"@angular/localize": "~12.2.0",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"@ng-bootstrap/ng-bootstrap": "^10.0.0",
"@ngx-translate/core": "^14.0.0",
"@ngx-translate/http-loader": "^7.0.0",
"bootstrap": "^4.6.1",
"datatables.net": "^1.11.4",
"datatables.net-dt": "^1.11.4",
"jquery": "^3.6.0",
"ng-multiselect-dropdown": "^0.3.8",
"ng-select2": "^1.4.1",
"ng2-currency-mask": "^13.0.3",
"ng2-search-filter": "^0.5.1",
"ngx-toastr": "^14.2.2",
"rxjs": "~6.6.0",
"select2": "^4.1.0-rc.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.0",
"@angular/cli": "~12.2.0",
"@angular/compiler-cli": "~12.2.0",
"@types/datatables.net": "^1.10.21",
"@types/jasmine": "~3.8.0",
"@types/jquery": "^3.5.14",
"@types/node": "^12.20.47",
"@types/select2": "^4.0.55",
"angular-datatables": "^12.0.2",
"jasmine-core": "~3.8.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.3.5"
}
}