Error ng0302 the pipe async could not be found - Исправление ошибок и поиск оптимальных решений проблем

I am trying to build a simple blog with Angular 2 and Firebase and I am having issues using async pipe in a component. I get the error in the console.

zone.js:344Unhandled Promise rejection: Template parse errors:
The pipe ‘async’ could not be found («

[ERROR ->]{{ (blog.user | async)?.first_name }}

«): BlogComponent@6:3 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
The pipe ‘async’ could not be found («

blog.component.ts

import {Component, Input} from "@angular/core";

@Component({
  selector: 'blog-component',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css'],
})

export class BlogComponent {
  @Input() blog;
}

blog.component.html

<h1 class="article-title">{{ blog.title }}</h1>
<p>{{ (blog.user | async)?.first_name }}</p>

app.component.ts

import { Component } from '@angular/core';
import { BlogService } from "./services/services.module";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor(private blogService: BlogService) {}
  articles = this.blogService.getAllArticles();
}

app.component.html

<article *ngFor="let article of articles | async">
  <blog-component [blog]="article"></blog-component>
</article>

blog.service.ts

import {Injectable} from "@angular/core";
import {AngularFire} from "angularfire2";
import {Observable} from "rxjs";
import "rxjs/add/operator/map";

@Injectable()
export class BlogService {
  constructor(private af: AngularFire) { }

  getAllArticles(): Observable<any[]> {
    return this.af.database.list('articles', {
      query: {
        orderByKey: true,
        limitToLast: 10
      }
    }).map((articles) => {
      return articles.map((article) => {
        article.user = this.af.database.object(`/users/${article.user_id}`);
        return article;
      });
    });
  }
}

The problem arises only when I try to use async in blog.component.html file. It works if I try to print the user name in app.component.html file. Should I be injecting AsyncPipe in blog.module.ts? How can I get the async working in blog.component.ts?

asked Sep 21, 2016 at 19:47

@NgModule.declarations aren’t inherited by child modules. If you need pipes, directives, components from a module, the module should be imported into your feature module.

The module with all the core pipes is CommonModule from @angular/common

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [ CommonModule ]
})
class BlogModule {}

The reason it works in the app.component is because you are most likely importing BrowserModule into the AppModule. BrowserModule re-exports CommonModule, so by importing BrowserModule, it’s like also importing CommonModule.

It’s also worth noting that CommonModule has the core directives also, like ngFor and ngIf. So if you have a feature module that uses those, you will also need to import the CommonModule into that module.

answered Sep 21, 2016 at 20:26

Paul SamsothaPaul Samsotha

203k35 gold badges478 silver badges710 bronze badges

If the component at the route you’re loading is not declared (via declarations:[]) then you will also get this type of error.

answered Jun 22, 2020 at 18:38

Kevin BealKevin Beal

10.2k10 gold badges64 silver badges91 bronze badges

When adding a new component in Angular 9 I had to restart the development server possibly also because of HMR:

ng serve --hmr

Without this the application simply did not load all the dependencies and issued this error.

answered Mar 15, 2020 at 9:49

Component you’re trying to load is not declared in the declarations array then you will get this type of error, in my case this was shipping component, like mentioned below:

Dharman♦

29.3k21 gold badges80 silver badges131 bronze badges

answered Mar 12, 2021 at 7:13

If you tried all above mentioned answers but it is not working means , Just do npm run start it will work ,
In my case after some compilation issue this error came.

answered May 14, 2020 at 11:18

SivashankarSivashankar

4831 gold badge8 silver badges16 bronze badges

If you have upgraded to Angular 6 or 7, make sure in your tsconfig.ts turn off enableIvy in
angularCompilerOptions

e.g:

angularCompilerOptions: {
enableIvy : false; // default is true
}

That solved my issue, may be it’ll save someone else time too.

answered Nov 2, 2018 at 14:50

NadeemNadeem

4014 silver badges12 bronze badges

I found the same problem some times when changing multiple imports at once.

My app worked back again just fine without changing any code but restarting ng start. One of the surprises of coding until late.

Normally this drives me crazy as I was checking all the imports, and the answer of the «Common Module» normally makes sense, but just in case someone finds the same silly situation I faced, now you know what to do.

answered May 4, 2020 at 23:43

Gabriel G.Gabriel G.

7219 silver badges15 bronze badges

In my case the input to the pipe was null.
So in the case of the question make sure that blog.user in <p>{{ (blog.user | async)?.first_name }}</p> is not null.

answered Jul 13, 2020 at 12:56

EliEli

1,5601 gold badge20 silver badges23 bronze badges

edit: I have been doing my own project, and I have noticed that this error might occur when code has any kind of build error, for example unclosed html tag like <label>foo<label>. After that, the only way I know, is to just reset the entire server. It is annoying and shouldn’t be like that.

I got this error when I had an empty (actually commented) function implementation in my component

in html:
<div (click)="onClickFoo()">

in .ts

onClickFoo() {
     // this.router.navigate([...])
}

answered Aug 13, 2020 at 15:13

O-9O-9

1,56014 silver badges14 bronze badges

You can also get the same error if you are using multiple modules in your app.module.ts

import { MatCardModule } from '@angular/material';
import { AppComponent } from './app.component';

// module 1
@NgModule({ exports: [MatCardModule] })
export class MaterialModule {}

// module 2
@NgModule({
    imports: [MaterialModule]
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Then if you generate a component using the command:

ng generate component example

It gets added to the first module, instead of the second one:

import { MatCardModule } from '@angular/material';
import { AppComponent } from './app.component';
import { ExampleComponent } from './example/example.component';

// module 1
@NgModule({ exports: [MatCardModule], declarations: [ExampleComponent] })
export class MaterialModule {}

// module 2
@NgModule({
    imports: [MaterialModule]
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Which will create the same error! Moving the component to the AppModule will fix it.

@NgModule({
    imports: [MaterialModule]
    declarations: [AppComponent, ExampleComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

answered Apr 11, 2018 at 14:47

Kim TKim T

5,3201 gold badge45 silver badges76 bronze badges

If you’re getting this in an optimized production build it could be due to tree shaking, especially if you’re using sideEffects: false. This is now an encouraged setting in Angular 10 via ng new --strict.

Still have yet to figure out how to fix my project, but setting it to true fixed it for me for now.

answered Jun 28, 2020 at 17:14

Simon_WeaverSimon_Weaver

136k79 gold badges631 silver badges676 bronze badges

Previous answers are good (remember to do declarations:[]), but also remember to restart your watch (only if you’re using CMD npm-run webpack-development -- -- progress --watch.

answered Jul 6, 2022 at 14:01

ArekadiuszArekadiusz

3302 silver badges10 bronze badges

I faced this issue when I tried to use the async pipe in a component used as a dialog. I solved this by declaring the component in the immediate module (I used lazy loading). The app module if you are not.

answered Apr 17, 2021 at 15:57

Also, make sure that you’re importing the module that the component is declared in.

answered Oct 14, 2022 at 6:57

daudihusdaudihus

1591 silver badge8 bronze badges

If like me you’re developing a standalone component,

I was missing

@Component({
   ...
   imports: [AsyncPipe]
})

answered Nov 5, 2022 at 18:35

Matthieu RieglerMatthieu Riegler

25.9k18 gold badges84 silver badges127 bronze badges

Basic reason:

The pipe async is exported from the CommonModule and you will get this error when you forgot to import CommonModule either in the module importing your component or in the component itself (if you are in standalone mode.

Advanced one:

Now you might also get the «pipe async not found» if angular, for some reason, has not been able to preload properly the CommonModule.

To check if this is the case, you can force Angular preloading all the modules, changing your code as follows:

// Probably in app-routing.module.ts

import { RouterModule, PreloadAllModules } from '@angular/router';

RouterModule.forRoot([
], {
  // Add this property to your main router module
  preloadingStrategy: PreloadAllModules
})

Then reload the page, if the problem is gone, it very likely means angular is not able to resolve your routes dependencies properly. You could for instance have a module importing its routes but also importing another module itself importing its routes.

answered Nov 29, 2022 at 9:41

Flavien VolkenFlavien Volken

17.9k12 gold badges93 silver badges124 bronze badges

Источник

Comments

petebacondarwin

changed the title
Pipe ‘async’ could not be found when using overrideComponent

bug: ModuleWithProvider + overrideComponent causes NgModule to be skipped

Jul 1, 2021

petebacondarwin

changed the title
bug: ModuleWithProvider + overrideComponent causes NgModule to be skipped

bug: ModuleWithProviders + overrideComponent() causes NgModule to be skipped

Jul 1, 2021

petebacondarwin

added
the

An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

label

Jul 1, 2021

JoostK

added a commit
to JoostK/angular
that referenced
this issue

Jul 10, 2021

When using `TestBed.overrideComponent`, the overridden component would
incorrectly loose access to its NgModule's declaration scope if the
NgModule had been imported into the testing NgModule as a
`ModuleWithProviders`, e.g. using a `forRoot` call.

The issue occurred as the `TestBed` compiler did not consider NgModules
that had been imported as a `ModuleWithProviders` when associating
NgModules with component overrides. This caused the overridden component
to be compiled standalone, meaning that it does not have access to
its NgModule's declarations. This commit extends the logic for
traversing the NgModule graph to also consider `ModuleWithProviders`
imports.

Fixes angular#42734

JoostK

added a commit
to JoostK/angular
that referenced
this issue

Jul 12, 2021

When using `TestBed.overrideComponent`, the overridden component would
incorrectly lose access to its NgModule's declaration scope if the
NgModule had been imported into the testing NgModule as a
`ModuleWithProviders`, e.g. using a `forRoot` call.

The issue occurred as the `TestBed` compiler did not consider NgModules
that had been imported as a `ModuleWithProviders` when associating
NgModules with component overrides. This caused the overridden component
to be compiled standalone, meaning that it does not have access to
its NgModule's declarations. This commit extends the logic for
traversing the NgModule graph to also consider `ModuleWithProviders`
imports.

Fixes angular#42734

AndrewKushnir

pushed a commit
that referenced
this issue

Jul 13, 2021

…42817)

When using `TestBed.overrideComponent`, the overridden component would
incorrectly lose access to its NgModule's declaration scope if the
NgModule had been imported into the testing NgModule as a
`ModuleWithProviders`, e.g. using a `forRoot` call.

The issue occurred as the `TestBed` compiler did not consider NgModules
that had been imported as a `ModuleWithProviders` when associating
NgModules with component overrides. This caused the overridden component
to be compiled standalone, meaning that it does not have access to
its NgModule's declarations. This commit extends the logic for
traversing the NgModule graph to also consider `ModuleWithProviders`
imports.

Fixes #42734

PR Close #42817

Источник

angular

Marking a class as a pipelink To mark a class as a pipe and supply configuration metadata, apply the @Pipe decorator to the class. Use UpperCamelCase (the general convention for class names) for the pipe class name, and camelCase for the corresponding name string. Do not use hyphens in the name .

Steps to create custom pipe in angular Add a Class named CustomPipe. The custom pipe class should implement PipeTransform interface. now implement pipe transform method that accepts value agrument. Add this pipe to the module you want to use the pipe in component of e.g. app.

In the Prospector tree, click the pipe network object, right-click, and click Edit Network. The Network Layout Tools toolbar is displayed. On the Network Layout Tools toolbar, click and select one of the following choices: Pipes and Structures, Pipes Only, or Structures Only.

Pipe is used to combine two or more commands, and in this, the output of one command acts as input to another command, and this command’s output may act as input to the next command and so on. It can also be visualized as a temporary connection between two or more commands/ programs/ processes.

Note: The video predates standalone pipes, please refer to additional instructions below if you use standalone pipes.

Description

Angular can’t find a pipe with this name.

The pipe referenced in the template has not been named or declared properly.

In order for a pipe to be used:

it must be declared as a part of an NgModule (added to the declarations array) or marked as standalone (by adding the standalone: true flag to the Pipe decorator).
it must be imported in an NgModule or a standalone component where it is used.
the name used in a template must match the name defined in the Pipe decorator.

Debugging the error

Use the pipe name to trace where the pipe is declared and used.

To resolve this error, ensure that:

If the pipe is local to the NgModule, it is uniquely named in the pipe’s decorator and declared in the NgModule.
If the pipe is standalone or from another NgModule, it is added to the imports field of the current NgModule or standalone component.

If you recently added an import or declaration, you may need to restart your server to see these changes.

Angular

15.0

NG0300: Multiple components match with the same tagname

Two or more components use the same element selector.
NG0301: Export not found!

Angular can’t find directive with PLACEHOLDER export name.
NG1001: Decorator argument is not an object literal

To make the metadata extraction in Angular compiler faster, decorators @NgModule, @Pipe, @Component, @Directive, and @Injectable accept only object literals
NG1003: Async validator must return a Promise or Observable

Async validators must return promise an observable, and emit/resolve them whether validation fails succeeds.

Источник

Answer by Kohen Mayer

I had a similar issue which I resolved by importing and exporting the Translate module in my app’s shared module. I don’t think it should go in the routing module.,There is also no need to add a TranslateModule entry in the export array of the app module.,Also, the TranslateModule can be imported from within a custom core module instead of from within the app module. In a core.module.ts file have the following entry in the import array:

So my set up was as follows:
app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularFireModule } from '@angular/fire';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { AngularFireAuth} from '@angular/fire/auth';

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    AngularFireModule.initializeApp(environment.firebase, 'VetCafe'),
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
  }),
    AppRoutingModule
  ],
  providers: [HttpClient, AngularFireAuth],
  bootstrap: [AppComponent]
})
export class AppModule { }

Shared module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { NgChatModule } from 'ng-chat';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    NgChatModule,
    TranslateModule
  ],
  exports: [
    CommonModule, FormsModule, ReactiveFormsModule, TranslateModule,
    RouterModule, NgChatModule
  ]
})
export class SharedModule { }

A shared-ui.module for ui stuff:

import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule,
         MatCardModule, MatInputModule, MatDialogModule, MatTableModule,
         MatMenuModule, MatProgressSpinnerModule
       } from '@angular/material';

import { NavigationComponent } from './navigation/navigation.component';
import { FooterComponent } from './footer/footer.component';
import { SideNavigationComponent } from './side-navigation/side-navigation.component';

const matModules = [
  MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule,
  MatCardModule, MatInputModule, MatDialogModule, MatTableModule,
  MatMenuModule, MatProgressSpinnerModule
];

const moduleComponents = [
  NavigationComponent, FooterComponent, SideNavigationComponent
];
@NgModule({
  declarations: [
    moduleComponents
  ],

  imports: [
    SharedModule,
    FlexLayoutModule,
    matModules
  ],

  exports: [
    FlexLayoutModule,
    matModules,
    moduleComponents
  ],
})
export class SharedUiModule { }

and finally my component template:

<nav class="app-navigation" [class.mat-elevation-z2]="!isActive" >
  <mat-toolbar color="primary">
    <div fxHide.gt-xs>
        <button mat-icon-button (click)="onToggleSidenav()"> 
            <mat-icon>menu</mat-icon>
        </button>
    </div>
    <div>
        <a routerLink="/">{{'HOME.Title' | translate}}</a>
    </div>
    <div fxFlex fxLayout fxLayoutAlign="end" fxHide.xs>
        <ul fxLayout fxLayoutGap="15px" class="navigation-items">
            <li>
              <a mat-button [routerLink]="['/forms/appointments']" routerLinkActive="router-link-active" >appointments</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/forms/clientreg']" routerLinkActive="router-link-active" >new client</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/forms/euthanasia']" routerLinkActive="router-link-active" >euthanasia</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/blog']" routerLinkActive="router-link-active" >blog</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/services']" routerLinkActive="router-link-active" >Services</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/legal/terms']" routerLinkActive="router-link-active" >terms</a>
            </li>
            <li>
              <a mat-button [routerLink]="['/legal/privacy']" routerLinkActive="router-link-active" >privacy</a>
            </li>
            <li *ngIf="!isLoggedIn">
              <a mat-button [routerLink]="['/account/signup']" routerLinkActive="router-link-active" >signup</a>
            </li>
            <li *ngIf="!isLoggedIn">
              <a mat-button [routerLink]="['/account/login']" routerLinkActive="router-link-active" >login</a>
            </li>
            <li *ngIf="isLoggedIn">
              <a mat-button (click)="isLoggedIn = false">Log Out</a>
            </li>

            <li >
              <a mat-button (click)="changeLocale()">Language</a>
            </li>

          </ul>
    </div>
  </mat-toolbar>

</nav>

Answer by Ismael Atkins

Sponsor

Sponsor ngx-translate/core

,import { TranslateService } from «@ngx-translate/core»;,With Angular RC4 the following worked to have the TranslatePipe available in any Page:
`

{provide: PLATFORM_PIPES, useValue: TranslatePipe, multi: true}

Answer by Jose Patton

recently I added ngx-translate to my app. I completely followed the github (https://github.com/ngx-translate) and ionic docs tutorial but I get the error “The pipe ‘translate’ could not be found”. I already asked google for this error and also other person seem to have it, but their solutions aren´t working for me.,Sounds like a version mismatch. See the ngx-translate docs.,whether or not there is an @IonicPage decorator on the page that is throwing this error

okk than start with app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule, Component, enableProdMode } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { LoginPage } from '../pages/login/login';

import {HttpClient, HttpClientModule} from "@angular/common/http";
import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
import {TranslateHttpLoader} from "@ngx-translate/http-loader";

@NgModule({
  declarations: [
    MyApp  
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: (HttpLoaderFactory),
            deps: [HttpClient]
        }
    }),
  ],
  bootstrap: [
    IonicApp,
  ],
  entryComponents: [
    MyApp
],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
})
export class AppModule {}
enableProdMode();

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

The page´s I am using it on ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { TranslateService } from "@ngx-translate/core";

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})

export class LoginPage {

  	constructor(public translate: TranslateService, public navCtrl: NavController, public navParams: NavParams) {
	}
}

Answer by Nyla Brewer

But all say its necesary to import TranslateModule but as you can see I do it.,<!—
For bug reports please provide the STEPS TO REPRODUCE and if possible a MINIMAL DEMO of the problem via
https://stackblitz.com or similar. You can use this template as a starting point: https://stackblitz.com/github/ngx-translate/example
—>,https://github.com/ngx-translate/core/issues/787

I have a shared Module (called ComponentsModule) whit this code

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoadingComponent } from './index.components';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpLoaderFactory } from '../app.module';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "../../assets/i18n/", ".json");
}

@NgModule({
  imports: [
    CommonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
...
  ],
  declarations: [
    LoadingComponent,
...
  ],
  exports: [
    LoadingComponent,
...
    TranslateModule
  ]
})
export class ComponentsModule { }

And I import to this module to the app

import { NgModule } from '@angular/core';
import { ComponentsModule } from './components/components.module';

@NgModule({
  declarations: [
...
  ],
  imports: [
    ComponentsModule,
...
  ],
  providers: [
...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer by Annalise Woodward

Fix Ngx-translate pipe not found in Angular 11 error [solved]
,This error occurs in strict typescript in Angular 11 when using the ngx-translate functionality. In this case I use a core module (which acts like a «shared» module). Within the core module is a header component which needs to use the translate pipe. ,Then, in my header.component.html, which is imported in core.module.ts I can use my translation pipe!

Fist, make sure your setup is right. In app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import { CoreModule } from './core/core.module';

/* Feature Modules */
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      isolate: false
    }),
  ],
  exports: [
  ],
  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// required for AOT compilation
// https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular8-app-with-ngx-translate
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

Then, in your core module file core.module.ts:

import {inject, NgModule, Optional, SkipSelf} from '@angular/core';
import { CommonModule } from '@angular/common';
import { throwIfAlreadyLoaded } from './ensureModuleLoadedOnceGuard';
import { HeaderComponent } from './header/header.component';
import {TranslateModule} from '@ngx-translate/core';

@NgModule({
  imports: [
    CommonModule,
    TranslateModule.forChild()
  ],
  exports: [
    CommonModule, [HeaderComponent]
  ],
  declarations: [
    [HeaderComponent]
  ],
  providers: [
  ]
})
export class CoreModule {

  constructor(
    @Optional() @SkipSelf() parentModule: CoreModule,
  ) {
    throwIfAlreadyLoaded(parentModule, 'CoreModule');
  }

}

Then, in my header.component.html, which is imported in core.module.ts I can use my translation pipe!

{{ 'print_basket' | translate }}

Answer by Jedidiah Foley

You need to import TranslateModule in every module in which you want to use translate pipe.

You need to import TranslateModule in every module in which you want to use translate pipe.

import { TranslateModule } from '@ngx-translate/core';

   ...
   imports: [
     TranslateModule // do not call forRoot from any module other than AppModule
   ] 
   ...

Answer by Kayson Erickson

I have report.component.ts which I am trying to import into test.component.ts
Before the import test.component works (even translations), but when I import report.component this error message pops up: Error: NG0302: The pipe ‘translate’ could not be found!,This site uses Akismet to reduce spam. Learn how your comment data is processed.,Our dedicated development team is here for you!

test.component.ts

import {ReportComponent} from "../report/report.component";
import { TranslateService } from '@ngx-translate/core';
import {Component, OnInit} from '@angular/core';


@Component({
  selector: 'test-root',
  styleUrls: ['test.component.css'],
  templateUrl: 'test.component.html',
})

export class TestComponent implements OnInit{
  constructor(public translate: TranslateService){}

  @ViewChild(ReportComponent) report: ReportComponent;

test.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatCardModule } from '@angular/material/card';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatInputModule} from '@angular/material/input';
import {TranslateModule} from '@ngx-translate/core';
import {SharedService} from '../common/shared.service';
import { CommonModule } from '@angular/common';
import {FormsModule} from '@angular/forms';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatSelectModule} from '@angular/material/select';
import {MatExpansionModule} from "@angular/material/expansion";
import {MatTableModule} from "@angular/material/table";
import {AppRoutingModule} from '../app-routing.module';
import {TestComponent} from "./test.component";

@NgModule({
  imports: [
    BrowserModule,
    MatCardModule,
    MatGridListModule,
    MatFormFieldModule,
    MatExpansionModule,
    MatInputModule,
    MatTableModule,
    MatSelectModule,
    TranslateModule,
    CommonModule,
    FormsModule,
    MatTooltipModule,
    AppRoutingModule
  ],
  declarations: [
    TestComponent,
  ],
  providers: [
    [SharedService]
    // Title
  ],
  bootstrap: [ TestComponent ],
  exports: [TestComponent, TranslateModule]
})
export class TestModule { }

report.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { MatCardModule } from '@angular/material/card';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatInputModule} from '@angular/material/input';
import { ReportComponent } from './report.component';
import {TranslateModule} from '@ngx-translate/core';
import {SharedService} from '../common/shared.service';
import { CommonModule } from '@angular/common';
import {FormsModule} from '@angular/forms';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatSelectModule} from '@angular/material/select';
import {MatRadioModule} from '@angular/material/radio';
import {FlexLayoutModule} from '@angular/flex-layout';
import { MatTableModule } from '@angular/material/table';
import {MatSortModule} from '@angular/material/sort';
import {TestModule} from "../Test/test.module";
import {AppRoutingModule} from '../app-routing.module';
import {MinimenuModule} from '../minimenu/minimenu.module';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatExpansionModule} from "@angular/material/expansion";
import {MatPaginatorModule} from "@angular/material/paginator";
import {TestComponent} from "../Test/test.component";

@NgModule({
  imports: [
    BrowserModule,
    MatCardModule,
    MatGridListModule,
    MatFormFieldModule,
    MatInputModule,
    MatExpansionModule,
    MatSelectModule,
    TranslateModule,
    CommonModule,
    FormsModule,
    MatTooltipModule,
    MatRadioModule,
    FlexLayoutModule,
    MatTableModule,
    MatSortModule,
    MatCheckboxModule,
    AppRoutingModule,
    MinimenuModule,
    TestModule,
    MatPaginatorModule
  ],
  declarations: [
    ReportComponent,
  ],
  providers: [
    [SharedService]
    // Title
  ],
  bootstrap: [ ReportComponent ],
  exports: [ReportComponent, TranslateModule]
})
export class ReportModule { }

Источник

Comments

Description

Debugging the error

Angular 15.0

Answer by Kohen Mayer

Answer by Ismael Atkins

Answer by Jose Patton

Answer by Nyla Brewer

Answer by Annalise Woodward

Answer by Jedidiah Foley

Answer by Kayson Erickson

Читайте также:

Angular

15.0