feat(i18n): provide LOCALE_ID and NgLocalization

modules/@angular/common/src/common_directives.ts

@@ -6,8 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Provider} from '@angular/core';
-
 import {CORE_DIRECTIVES} from './directives';
 
 /**

modules/@angular/common/src/common_module.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+
+import {COMMON_DIRECTIVES} from './common_directives';
+import {NgLocaleLocalization, NgLocalization} from './localization';
+import {COMMON_PIPES} from './pipes';
+
+// Note: This does not contain the location providers,
+// as they need some platform specific implementations to work.
+/**
+ * The module that includes all the basic Angular directives like {@link NgIf}, ${link NgFor}, ...
+ *
+ * @experimental
+ */
+@NgModule({
+  declarations: [COMMON_DIRECTIVES, COMMON_PIPES],
+  exports: [COMMON_DIRECTIVES, COMMON_PIPES],
+  providers: [
+    {provide: NgLocalization, useClass: NgLocaleLocalization},
+  ],
+})
+export class CommonModule {
+}

modules/@angular/common/src/directives/ng_plural.ts

@@ -18,29 +18,21 @@ import {SwitchView} from './ng_switch';
  * `ngPlural` is an i18n directive that displays DOM sub-trees that match the switch expression
  * value, or failing that, DOM sub-trees that match the switch expression's pluralization category.
  *
- * To use this directive, you must provide an extension of `NgLocalization` that maps values to
- * category names. You then define a container element that sets the `[ngPlural]` attribute to a
+ * To use this directive you must provide a container element that sets the `[ngPlural]` attribute
+ * to a
  * switch expression.
  *    - Inner elements defined with an `[ngPluralCase]` attribute will display based on their
  * expression.
  *    - If `[ngPluralCase]` is set to a value starting with `=`, it will only display if the value
  * matches the switch expression exactly.
  *    - Otherwise, the view will be treated as a "category match", and will only display if exact
- * value matches aren't found and the value maps to its category using the `getPluralCategory`
- * function provided.
+ * value matches aren't found and the value maps to its category for the defined locale.
  *
  * ```typescript
- * class MyLocalization extends NgLocalization {
- *    getPluralCategory(value: any) {
- *       if(value < 5) {
- *          return 'few';
- *       }
- *    }
- * }
- *
  * @Component({
  *    selector: 'app',
- *    providers: [{provide: NgLocalization, useClass: MyLocalization}]
+ *    // best practice is to define the locale at the application level
+ *    providers: [{provide: LOCALE_ID, useValue: 'en_US'}]
  * })
  * @View({
  *   template: `

modules/@angular/common/src/localization.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable} from '@angular/core';
+import {Inject, Injectable, LOCALE_ID} from '@angular/core';
+
 /**
  * @experimental
  */
@@ -34,7 +35,7 @@ export function getPluralCategory(
  */
 @Injectable()
 export class NgLocaleLocalization extends NgLocalization {
-  constructor(private _locale: string) { super(); }
+  constructor(@Inject(LOCALE_ID) private _locale: string) { super(); }
 
   getPluralCategory(value: any): string {
     const plural = getPluralCase(this._locale, value);

modules/@angular/common/src/pipes/i18n_plural_pipe.ts

@@ -26,14 +26,6 @@ const _INTERPOLATION_REGEXP: RegExp = /#/g;
  *  ## Example
  *
  *  ```
- *  class MyLocalization extends NgLocalization {
- *    getPluralCategory(value: any) {
- *      if(value > 1) {
- *        return 'other';
- *      }
- *    }
- *  }
- *
  *  @Component({
  *    selector: 'app',
  *    template: `
@@ -41,7 +33,8 @@ const _INTERPOLATION_REGEXP: RegExp = /#/g;
  *        {{ messages.length | i18nPlural: messageMapping }}
  *      </div>
  *    `,
- *    providers: [{provide: NgLocalization, useClass: MyLocalization}]
+ *    // best practice is to define the locale at the application level
+ *    providers: [{provide: LOCALE_ID, useValue: 'en_US'}]
  *  })
  *
  *  class MyApp {