Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – error after upgrading to angular 16 from angular 13

I have upgraded my angular project to angular 16 from angular 13 step by step. There are certain pipes which i have used in the project like for example translate pipe. When i am serving the project now i am getting multiple errors of pipe not found and cant bind to nbmodel since it is not a known property of input. i have also tried removing node modules and install it. I am constantly getting error like this-
No pipe found with name ‘translate’.
Can’t bind to ‘ngClass’ since it isn’t a known property of ‘button’.

what is the problem I am not getting?

The error that i am facing is below-
No pipe found with name ‘translate’.

example of pipe usage in code-

{{‘_AVERAGE_HANDLING_TIME_’ | translate}}”

I have translate pipe which i have imported to pipes module and pipes module is imported in shared module and share module is imported in app module
pipes.module.ts

import { NgModule } from '@angular/core';
import { TranslatePipe } from './translate.pipe';
import { SafePipe } from './safe.pipe';
import { DashboardSearchPipe, GenderTextPipe, SuggestionSearchPipe, TaskTemplateSearchPipe, TemplateTypePipe, WallboardSearchPipe } from './custome.pipe';

@NgModule({
    exports: [
        TranslatePipe,
        SafePipe,
        TemplateTypePipe,
        SuggestionSearchPipe,
        TaskTemplateSearchPipe,
        DashboardSearchPipe,
        GenderTextPipe,
        WallboardSearchPipe
    ],
    declarations: [
        TranslatePipe,
        SafePipe,
        TemplateTypePipe,
        SuggestionSearchPipe,
        TaskTemplateSearchPipe,
        DashboardSearchPipe,
        GenderTextPipe,
        WallboardSearchPipe
    ],
    providers: [
        TranslatePipe,
        SafePipe,
        TemplateTypePipe,
        SuggestionSearchPipe,
        TaskTemplateSearchPipe,
        DashboardSearchPipe,
        GenderTextPipe,
        WallboardSearchPipe
    ]
  })
  export class PipesModule { }

shared.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { PipesModule } from '../pipes/pipes.module';
import { AppRoutingModule } from '../app.routing.module';
import { EditorModule } from '@tinymce/tinymce-angular';
import { TagInputModule } from 'ngx-chips';
import { AngularMaterialCommonModule } from '../angular-material-common.module';
import { DirectivesModule } from '../directives/directive.module';

@NgModule({
    imports: [
        CommonModule,
        AppRoutingModule,
        EditorModule,
        TagInputModule,
        FormsModule,
        ReactiveFormsModule,
        AngularMaterialCommonModule,
        PipesModule,
        DirectivesModule
    ],
    declarations: [],
    exports: [
        CommonModule,
        AppRoutingModule,
        EditorModule,
        TagInputModule,
        FormsModule,
        ReactiveFormsModule,
        AngularMaterialCommonModule,
        PipesModule,
        DirectivesModule
    ],
})
export class SharedModule { }

app.module.ts

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
import { defineLocale } from 'ngx-bootstrap/chronos';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { nlLocale } from 'ngx-bootstrap/locale';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';
import { AuditLogComponent } from './auditlog/auditlog.component';
import { CaseSearchResultComponent } from './case/casesearchresult.component';
import { AboutUsComponent } from './common/aboutus.component';
import { AppLoaderComponent } from './common/apploader.component';
import { AuthGuard } from './common/auth.guard';
import { HeaderComponent } from './common/header.component';
import { LinkUnlinkEntityComponent } from './common/linkunlinkentity.component';
import { LoginComponent } from './common/login.component';
import { MessageBoxComponent } from './common/messagebox.component';
import { ProgressBarComponent } from './common/progress-bar.component';
import { SearchPopupComponent } from './common/searchpopup.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { DashboardConfigComponent } from './dashboardconfig/dashboardconfig.component';
import { DashboardWebpartComponent } from './dashboardconfig/dashboardwebpart.component';
import { DocumentSearchResultComponent } from './document/documentsearchresult.component';
import { EmployeeSearchResultComponent } from './employee/employeesearchresult.component';
import { FileSearchResultComponent } from './fileentity/fileentitysearchresult.component';
import { LinkSearchResultComponent } from './link/linksearchresult.component';
import { NewsSearchResultComponent } from './news/newssearchresult.component';
import { NoteEntitySearchResultComponent } from './noteentity/noteentitysearchresult.component';
import { OrganizationSearchResultComponent } from './organization/organizationsearchresult.component';
import { PersonSearchResultComponent } from './person/personsearchresult.component';
import { ProductSearchResultComponent } from './product/productsearchresult.component';
import { QuestionAnswerSearchResultComponent } from './questionanswer/questionanswersearchresult.component';
import { ReportComponent } from './report/report.component';
import { LocalizeService } from './services/localize.service';
import { SharedModule } from './shared/shared.module';
import { SuggestionPanelComponent } from './suggestionpanel/suggestionpanel.component';
import { EmailTemplateComponent } from './template/emailtemplate.component';
import { TaskTemplateComponent } from './template/tasktemplate.component';
import { TemplateComponent } from './template/template.component';
import { ThemeSearchResultComponent } from './theme/themesearchresult.component';
import { TicketSearchResultComponent } from './ticket/ticketsearchresult.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { WallboardModule } from './wallboard/wallboard.module';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HeaderComponent,
    DashboardComponent,
    AppLoaderComponent,
    ReportComponent,
    EmailTemplateComponent,
    AuditLogComponent,
    SuggestionPanelComponent,
    DashboardConfigComponent, 
    DashboardWebpartComponent,
    AboutUsComponent,
    LinkUnlinkEntityComponent,
    SearchPopupComponent, 
    FileSearchResultComponent, 
    EmployeeSearchResultComponent, 
    ThemeSearchResultComponent, 
    NoteEntitySearchResultComponent, 
    ProductSearchResultComponent, 
    QuestionAnswerSearchResultComponent, 
    LinkSearchResultComponent, 
    NewsSearchResultComponent, 
    PersonSearchResultComponent, 
    OrganizationSearchResultComponent, 
    DocumentSearchResultComponent, 
    CaseSearchResultComponent, 
    TicketSearchResultComponent,
    TemplateComponent, 
    TaskTemplateComponent,
    MessageBoxComponent, 
    ProgressBarComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    WallboardModule,
    BsDropdownModule.forRoot(),
    ModalModule.forRoot(),
    BsDatepickerModule.forRoot(),
    
  ],
  providers: [
    AuthGuard,
    LocalizeService,
    {
      provide: APP_INITIALIZER,
      useFactory: setupTranslateFactory,
      deps: [LocalizeService],
      multi: true
    },
    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

export function setupTranslateFactory(
  localizeService: LocalizeService): Function {
  return () => {
    localizeService.setLanguage().then((language) => {
      localizeService.useLanguage(language == 'nl-NL' ? 'NL' : 'EN').then(() => {
        console.log("language set as: " + language);
      });
      if (language == 'nl-NL')
        defineLocale('nl', nlLocale);
    });
  };
}

package.json

{
  "name": "decos-kcs-web",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.12",
    "@angular/cdk": "^16.2.14",
    "@angular/common": "^16.2.12",
    "@angular/compiler": "^16.2.12",
    "@angular/core": "^16.2.12",
    "@angular/forms": "^16.2.12",
    "@angular/localize": "^16.2.12",
    "@angular/material": "^16.2.14",
    "@angular/platform-browser": "^16.2.12",
    "@angular/platform-browser-dynamic": "^16.2.12",
    "@angular/router": "^16.2.12",
    "@tinymce/tinymce-angular": "^6.0.1",
    "angular-moment": "^1.3.0",
    "chart.js": "^4.4.3",
    "jlinq": "^1.0.0",
    "lz-string": "^1.5.0",
    "moment": "^2.29.4",
    "ngx-bootstrap": "^5.1.2",
    "ngx-chips": "^3.0.0",
    "rxjs": "^7.8.1",
    "spin.js": "^4.0.0",
    "tinymce": "^7.3.0",
    "tslib": "^2.0.0",
    "x2js": "^3.3.0",
    "zone.js": "^0.14.10"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.14",
    "@angular/cli": "^16.2.14",
    "@angular/compiler-cli": "^16.2.12",
    "@angular/language-service": "^16.2.12",
    "@types/node": "~20.8.2",
    "typescript": "4.9.5"
  }
}
Tags:

2

Answers


  1. 0

    Your package.json seems to be missing the ngx-translate package – which is assume where you wanted to get the TranslatePipe from.

    Login or Signup to reply.
  2. 0

    If you have any standalone component you recently added, you need to import PipesModule and CommonModule.

    If that does not work, then try the below.

    There is some error in one of the modules, so all the imports are breaking, what you need to do, is comment all the declaration components from the module and keep just one component, then comment out all the imports you have one by one and adding them back one by one.

    By doing so, you can narrow down the problematic import, once you found that fix it and uncomment the imports and declarations.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search