作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Angular 7.1,但不幸的是我无法使 ngx-translate 的翻译管道工作......
包.json
"dependencies": {
"@angular/animations": "~7.1.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/http": "~7.1.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/platform-server": "~7.1.0",
"@angular/router": "~7.1.0",
"@angularclass/hmr": "~2.1.3",
"@ngrx/store": "^7.0.0",
"@nguniversal/express-engine": "~7.0.2",
"@nguniversal/module-map-ngfactory-loader": "~7.0.2",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"core-js": "^2.5.7",
"express": "^4.16.4",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// import ngx-translate and the http loader
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';
export const APP_ID = 'test-app';
@NgModule({
imports: [
BrowserModule.withServerTransition({ appId: APP_ID }),
AppRoutingModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
exports: [ AppRoutingModule, TranslateModule ],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
template: `
{{'demo.text' | translate}}
<router-outlet></router-outlet>
`
})
export class AppComponent {
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
this.translate.get('demo.text').subscribe((text: string) => { console.log('HERE: ', text); });
}
}
ERROR in : The pipe 'translate' could not be found (" [ERROR ->] {{'demo.text' | translate}} ")
最佳答案
我有一个类似的问题,我通过在我的应用程序的共享模块中导入和导出翻译模块来解决。我认为它不应该进入路由模块。
所以我的设置如下:
应用程序模块
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 { }
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 { }
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 { }
<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>
关于angular - : The pipe 'translate' could not be found 中的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54070396/
我是一名优秀的程序员,十分优秀!