New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(ivy): allow the locale to be set via a global property #33314
Changes from all commits
34f68d5
0bf7bf8
c98d912
6142fba
f3197bf
8e8c140
19ca362
3b15764
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -30,8 +30,8 @@ | |
"master": { | ||
"uncompressed": { | ||
"runtime-es2015": 1485, | ||
"main-es2015": 128258, | ||
"polyfills-es2015": 42102 | ||
"main-es2015": 138032, | ||
"polyfills-es2015": 37494 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The polyfills.ts size is lower because I removed the runtime translations from it. The production build would inline them instead. |
||
} | ||
} | ||
}, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -13,18 +13,13 @@ | |
"pretest": "ng version", | ||
"test": "ng test && yarn e2e --configuration=ci && yarn e2e --configuration=ci-production && yarn translated:test && yarn translated:legacy:test", | ||
"translate": "localize-translate -r \"dist/\" -s \"**/*\" -l \"en-US\" -t \"src/locales/messages.*\" -o \"../tmp/translations/{{LOCALE}}\"", | ||
|
||
"translated:test": "yarn build && yarn translate && yarn translated:fr:e2e && yarn translated:de:e2e && yarn translated:en:e2e", | ||
|
||
"translated:fr:serve": "serve ../tmp/translations/fr --listen 4200", | ||
"translated:fr:e2e": "npm-run-all -p -r translated:fr:serve \"ng e2e --configuration=translated-fr\"", | ||
|
||
"translated:de:serve": "serve ../tmp/translations/de --listen 4200", | ||
"translated:de:e2e": "npm-run-all -p -r translated:de:serve \"ng e2e --configuration=translated-de\"", | ||
|
||
"translated:en:serve": "serve ../tmp/translations/en-US --listen 4200", | ||
"translated:en:e2e": "npm-run-all -p -r translated:en:serve \"ng e2e --configuration=translated-en\"", | ||
|
||
"translated:legacy:test": "yarn translated:legacy:extract-and-update && ng build --configuration=translated-legacy && yarn translated:legacy:translate && yarn translated:legacy:e2e", | ||
"translated:legacy:extract-and-update": "ng xi18n && sed -i.bak -e 's/source>/target>'/ -e 's/Hello/Bonjour/' -e 's/source-language=\"en-US\"/source-language=\"en-US\" target-language=\"legacy\"/' ../tmp/legacy-locales/messages.legacy.xlf", | ||
"translated:legacy:translate": "localize-translate -r \"dist/\" -s \"**/*\" -t \"../tmp/legacy-locales/messages.legacy.xlf\" -o \"../tmp/translations/{{LOCALE}}\"", | ||
|
@@ -50,8 +45,8 @@ | |
"zone.js": "file:../../node_modules/zone.js" | ||
}, | ||
"devDependencies": { | ||
"@angular-devkit/build-angular": "0.900.0-next.12", | ||
"@angular/cli": "file:../../node_modules/@angular/cli", | ||
"@angular-devkit/build-angular": "^0.900.0-next.14", | ||
"@angular/cli": "^9.0.0-next.14", | ||
"@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would prefer that you update the root package.json but I'll understand if it would be safer to do that in a separate pr There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'll create a new PR directly after this. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @IgorMinar - as promised #33382 |
||
"@angular/language-service": "file:../../dist/packages-dist/language-service", | ||
"@types/jasmine": "~3.4.0", | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,10 @@ | ||
import {Component} from '@angular/core'; | ||
import {Component, Inject, LOCALE_ID} from '@angular/core'; | ||
|
||
@Component( | ||
{selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) | ||
export class AppComponent { | ||
constructor(@Inject(LOCALE_ID) public locale: string) {} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 thanks for adding this check! |
||
title = `cli-hello-world-ivy-compat`; | ||
message = $localize `Welcome to the i18n app.`; | ||
jan = new Date(2000, 0, 1); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,13 @@ | ||
import {registerLocaleData} from '@angular/common'; | ||
import {LOCALE_ID, NgModule} from '@angular/core'; | ||
import {NgModule} from '@angular/core'; | ||
import {BrowserModule} from '@angular/platform-browser'; | ||
import localeFr from '@angular/common/locales/fr'; | ||
import {AppComponent} from './app.component'; | ||
|
||
// adding this code to detect issues like https://github.com/angular/angular-cli/issues/10322 | ||
// it should not affect the CLI importing additional locale data for compile time inlined bundles. | ||
registerLocaleData(localeFr); | ||
|
||
@NgModule({ | ||
declarations: [AppComponent], | ||
imports: [BrowserModule], | ||
providers: [{provide: LOCALE_ID, useValue: 'fr'}], | ||
bootstrap: [AppComponent] | ||
}) | ||
@NgModule({declarations: [AppComponent], imports: [BrowserModule], bootstrap: [AppComponent]}) | ||
export class AppModule { | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
/** | ||
* This file includes polyfills needed by Angular and is loaded before the app. | ||
* You can add your own extra polyfills to this file. | ||
* | ||
* This file is divided into 2 sections: | ||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. | ||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main | ||
* file. | ||
* | ||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that | ||
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), | ||
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. | ||
* | ||
* Learn more in https://angular.io/guide/browser-support | ||
*/ | ||
|
||
/*************************************************************************************************** | ||
* BROWSER POLYFILLS | ||
*/ | ||
|
||
/** IE10 and IE11 requires the following for NgClass support on SVG elements */ | ||
// import 'classlist.js'; // Run `npm install --save classlist.js`. | ||
|
||
/** | ||
* Web Animations `@angular/platform-browser/animations` | ||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. | ||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). | ||
*/ | ||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`. | ||
|
||
/** | ||
* By default, zone.js will patch all possible macroTask and DomEvents | ||
* user can disable parts of macroTask/DomEvents patch by setting following flags | ||
* because those flags need to be set before `zone.js` being loaded, and webpack | ||
* will put import in the top of bundle, so user need to create a separate file | ||
* in this directory (for example: zone-flags.ts), and put the following flags | ||
* into that file, and then add the following code before importing zone.js. | ||
* import './zone-flags.ts'; | ||
* | ||
* The flags allowed in zone-flags.ts are listed here. | ||
* | ||
* The following flags will work for all browsers. | ||
* | ||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch | ||
* requestAnimationFrame | ||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick | ||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch | ||
* specified eventNames | ||
* | ||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js | ||
* with the following flag, it will bypass `zone.js` patch for IE/Edge | ||
* | ||
* (window as any).__Zone_enable_cross_context_check = true; | ||
* | ||
*/ | ||
|
||
/*************************************************************************************************** | ||
* Zone JS is required by default for Angular itself. | ||
*/ | ||
import 'zone.js/dist/zone'; // Included with Angular CLI. | ||
|
||
/*************************************************************************************************** | ||
* Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. | ||
*/ | ||
import '@angular/localize/init'; | ||
|
||
// Note that `computeMsgId` is a private API at this stage. It will probably be exported directly | ||
// from `@angular/localize` at some point. | ||
import {computeMsgId} from '@angular/compiler'; | ||
import {loadTranslations} from '@angular/localize'; | ||
|
||
// Load some runtime translations! | ||
loadTranslations({ | ||
[computeMsgId(' Hello {$INTERPOLATION}! ')]: 'Bonjour {$INTERPOLATION}!', | ||
[computeMsgId('Welcome to the i18n app.')]: 'Bienvenue sur l\'application i18n.', | ||
}); | ||
|
||
// Set up the locale for the runtime inlining (EXPERIMENTAL) | ||
$localize.locale = 'fr'; | ||
import {registerLocaleData} from '@angular/common'; | ||
import localeFr from '@angular/common/locales/fr'; | ||
registerLocaleData(localeFr); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This looks a lot like our previous CLI transform to add the locale: I imagine it will be added in the same way. Probably in There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, when we move over to using the CLI for all the translation stuff then I would expect this to be done by the CLI. But we need to tidy up the locale-id loose ends before we can do that. I put the calls here because they had to be done before the bootstrap and I preferred to swap out this file than the |
||
|
||
/*************************************************************************************************** | ||
* APPLICATION IMPORTS | ||
*/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This file is bigger because we added to the application component's template: the date pipe and the locale id.