fulls1z3 / ngx-translate Goto Github PK
View Code? Open in Web Editor NEWLoader for @ngx-translate that provides translations to browser/server platforms
License: MIT License
Loader for @ngx-translate that provides translations to browser/server platforms
License: MIT License
I'm submitting a ... (check one with "x")
[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report <!-- Please check the repository for a similar issue or PR before submitting -->
[ ] Support request => <!-- Please check the repository for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request
Current behavior
As described on fulls1z3/ngx-meta#81
Expected/desired behavior
The compilation should succeed on AoT.
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
I'm submitting a
[ ] Regression
[ ] Bug report
[ ] Support request
[ ] Feature request
[X] Documentation issue or request
Current behavior
I'm following the instruction in the npm repository page to use @ngx-universal/translate-loader, but I've encountered some issues with the example.
First, it would be useful to clarify that we need to import PLATFORM_ID
and Inject
like so:
import { NgModule, Inject, PLATFORM_ID } from '@angular/core';
Second, there is an error in the example. Currently it states this:
export function translateFactory(platformId: any, http: Http): TranslateLoader {
const browserLoader = new TranslateHttpLoader(http);
return new UniversalTranslateLoader(platformId, browserLoader, './public/assets/i18n');
}
But this throws this error: app.module.ts (29,49): Argument of type 'Http' is not assignable to parameter of type 'HttpClient'
Third, when fixing that error (with the code provided below), a new error is thrown: Module not found: Error: Can't resolve '@ngx-cache/core'
Expected/desired behavior
The example should have this code:
...
import { HttpClient } from '@angular/common/http';
...
export function translateFactory(platformId: any, http: Http, httpClient: HttpClient): TranslateLoader {
const browserLoader = new TranslateHttpLoader(httpClient);
return new UniversalTranslateLoader(platformId, browserLoader, './i18n');
}
...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (translateFactory),
deps: [PLATFORM_ID, Http, HttpClient]
}
}),
And it should be mentioned that @ngx-universal/translate-loader
depends on '@ngx-cache/core'
. Or this package should be added to the dependencies of @ngx-universal/translate-loader
.
Minimal reproduction of the problem with instructions
Build a new app with angular-cli (ng new apptest
);
Add ngx-translate
.
Follow the steps to make the app universal (e.g. like this)
Add @ngx-universal/translate-loader
.
Use the code from the example.
Environment
angular-devkit/build-optimizer v. 0.0.21
angular-devkit/core v. 0.0.14
angular-devkit/schematics v. 0.0.24
angular/animations v. 4.4.4
angular/cli v. 1.4.3
angular/common v. 4.4.3
angular/compiler-cli v. 4.4.3
angular/compiler v. 4.4.3
angular/core v. 4.4.3
angular/forms v. 4.4.3
angular/http v. 4.4.3
angular/language-service v. 4.4.3
angular/platform-browser-dynamic v. 4.4.3
angular/platform-browser v. 4.4.3
angular/platform-server v. 4.4.4
angular/router v. 4.4.3
angular/tsc-wrapped v. 4.4.3
ngtools/json-schema v. 1.1.0
ngtools/webpack v. 1.7.1
ngx-translate/core v. 8.0.0
ngx-translate/http-loader v. 2.0.0
ngx-universal/translate-loader v. 4.0.1
webpack-concat-plugin v. 1.4.0
webpack-dev-middleware v. 1.12.0
webpack-dev-server v. 2.7.1
webpack-merge v. 4.1.0
webpack-sources v. 1.0.1
webpack v. 3.5.6
Browser:
Not relevant, build issue.
For Tooling issues:
I'm submitting a ... (check one with "x")
[ x ] bug report => check the README and search github for a similar issue or PR before submitting
[ ] support request => check the README and search github for a similar issue or PR before submitting
[ ] feature request
Current behavior
Expected/desired behavior
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
Language: [all | TypeScript X.X | ES6/7 | ES5]
Node (for AoT issues): node --version
=
I'm submitting a ... (check one with "x")
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report <!-- Please check the repository for a similar issue or PR before submitting -->
[ ] Support request => <!-- Please check the repository for a similar issue or PR before submitting -->
[x] Feature request
[ ] Documentation issue or request
Current behavior
Expected/desired behavior
_
prefixMinimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
I'm submitting a ... (check one with "x")
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report <!-- Please check the repository for a similar issue or PR before submitting -->
[ ] Support request => <!-- Please check the repository for a similar issue or PR before submitting -->
[x] Feature request
[ ] Documentation issue or request
Current behavior
Expected/desired behavior
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
I'm submitting a ... (check one with "x")
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report <!-- Please check the repository for a similar issue or PR before submitting -->
[ ] Support request => <!-- Please check the repository for a similar issue or PR before submitting -->
[x] Feature request
[ ] Documentation issue or request
Current behavior
Expected/desired behavior
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
I'm submitting a ... (check one with "x")
[ ] bug report => check the README and search github for a similar issue or PR before submitting
[x ] support request => check the README and search github for a similar issue or PR before submitting
[ ] feature request
Current behavior
i have a error when i try to get the page
Expected/desired behavior
translate the content
Minimal reproduction of the problem with instructions
ERROR { TypeError: r.i(...) is not a function
at Observable._subscribe (C:\src\webapp-intertours\node_modules@ngx-universal\translate-loader\bundles\translate-loader.umd.min.js:1:5507)
at Observable._trySubscribe (C:\src\webapp-intertours\node_modules\rxjs\Observable.js:57:25)
at Observable.subscribe (C:\src\webapp-intertours\node_modules\rxjs\Observable.js:45:27)
at Observable.ConnectableObservable.connect (C:\src\webapp-intertours\node_modules\rxjs\observable\ConnectableObservable.js:37:18)
at RefCountOperator.call (C:\src\webapp-intertours\node_modules\rxjs\observable\ConnectableObservable.js:103:49)
at Observable.subscribe (C:\src\webapp-intertours\node_modules\rxjs\Observable.js:42:22)
at TakeOperator.call (C:\src\webapp-intertours\node_modules\rxjs\operator\take.js:60:23)
at Observable.subscribe (C:\src\webapp-intertours\node_modules\rxjs\Observable.js:42:22)
at TranslateService.getTranslation (C:\src\webapp-intertours\dist\server.js:497:14)
at TranslateService.retrieveTranslations (C:\src\webapp-intertours\dist\server.js:482:87)
at TranslateService.setDefaultLang (C:\src\webapp-intertours\dist\server.js:427:28)
at new AppComponent (C:\src\webapp-intertours\dist\server.js:11426:19)
at createClass (C:\src\webapp-intertours\node_modules@angular\core\bundles\core.umd.js:10801:26)
at createDirectiveInstance (C:\src\webapp-intertours\node_modules@angular\core\bundles\core.umd.js:10627:37)
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
node --version
= >6I'm submitting a ...
[X] Bug report <!-- Please check the repository for a similar issue or PR before submitting -->
Current behavior
Based on documentation of UniversalTranslateLoader, I set the prefix but it still uses the default one '/assets/i18n/'.
Expected/desired behavior
I would expect to use the given prefix.
Minimal reproduction of the problem with instructions
export function TranslateFactory(platformId: any, http: Http): TranslateLoader {
const browserLoader = new TranslateHttpLoader(http);
return new UniversalTranslateLoader(platformId, browserLoader, '/messages/translations_', '.json');
}
Environment
I'm submitting a ... (check one with "x")
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report <!-- Please check the repository for a similar issue or PR before submitting -->
[ X ] Support request => <!-- Please check the repository for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request
Current behavior
Browser mode work correctly, but server mode doesn't work (without error, but if I put intentionally wrong path to .json files it show an error.
Expected/desired behavior
Server mode should load translation
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
I try a lot of types, but no one work.
Environment
import 'zone.js';
import 'reflect-metadata';
import {Inject, NgModule, PLATFORM_ID} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {HomeComponent} from './home/home.component';
import {AboutComponent} from './about/about.component';
import {AppComponent} from './app.component';
import {BrowserModule} from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { UniversalTranslateLoader } from '@ngx-universal/translate-loader';
export function translateFactory(platformId: any, http: HttpClient): TranslateLoader {
const browserLoader = new TranslateHttpLoader(http, 'assets/i18n', '.json');
const universalTranslate = new UniversalTranslateLoader(platformId, browserLoader, './dist/assets/i18n');
return universalTranslate;
}
const routes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
}
];
/**
* Top-level NgModule "container"
*/
@NgModule({
/** Root App Component */
bootstrap: [ AppComponent ],
/** Our Components */
declarations: [
],
imports: [
BrowserModule.withServerTransition({appId: 'ang4-seo-pre'}),
FormsModule,
HttpModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: translateFactory,
deps: [
PLATFORM_ID,
HttpClient
]
}
}),
RouterModule.forRoot(routes)
]
})
export class AppModule {
constructor(@Inject(PLATFORM_ID) private readonly platformId: any) {
}
}
app.component.ts
import {Component, OnInit} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
constructor(public translate: TranslateService) {
this.translate.setDefaultLang('en');
this.translate.use('en');
}
ngOnInit() {
}
swtitchLang(lang: string) {
this.translate.use(lang);
}
}
I'm submitting a ... (check one with "x")
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report <!-- Please check the repository for a similar issue or PR before submitting -->
[ ] Support request => <!-- Please check the repository for a similar issue or PR before submitting -->
[x] Feature request
[ ] Documentation issue or request
Current behavior
@bliitzkrieg explained at fulls1z3/ngx-meta#56
Expected/desired behavior
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.