feat: add i18n module and language selection at generation (close #262)

- Add i18n module
- Add dedicated language selector component
- Allow language selection during project generator
- Fix some Ionic template issues

Credits for original idea and work goes to @snowyu

BREAKING CHANGES:
Move all i18n related components to dedicated module

Co-authored-by: snowyu <[email protected]>

Author: sinedied

generators/app/index.js

@@ -9,6 +9,7 @@ const asciiLogo = require('@ngx-rocket/ascii-logo');
 const pkg = require('../../package.json');
 const prompts = require('./prompts');
 const options = require('./options');
+const getLanguages = require('./languages');
 
 const packageJsonFile = 'package.json';
 
@@ -132,10 +133,16 @@ class NgxGenerator extends Generator {
     this.props.desktop = this.props.desktop || [];
     this.props.utility = this.props.utility || [];
     this.props.tools = this.props.tools || [];
+    this.props.languages = this.props.languages || ['en-US', 'fr-FR'];
     this.shareProps(this.props);
   }
 
   configuring() {
+    // Add prefix rules for languages
+    getLanguages().forEach(language => {
+      this._prefixRules[language] = (props => props.languages.includes(language));
+    });
+
     this.insight.track(
       'generator',
       this.props.target,

generators/app/languages.js

@@ -0,0 +1,8 @@
+const path = require('path');
+const globby = require('globby');
+
+// Extract languages from files available in /templates/src/translations/
+module.exports = function getLanguages() {
+  const files = globby.sync(path.join(__dirname, 'templates/src/translations/*.json'));
+  return files.map(file => path.basename(file).substring(2, 7));
+};

generators/app/prompts.js

@@ -1,3 +1,5 @@
+const getLanguages = require('./languages');
+
 module.exports = [
   {
     type: 'input',
@@ -136,6 +138,14 @@ module.exports = [
     message: 'Do you want analytics support (with Angulartics2)?',
     default: false
   },
+  {
+    type: 'checkbox',
+    name: 'languages',
+    message: 'Which languages do you want to support?',
+    choices: () => getLanguages()
+      .map(language => ({ value: language, name: language, checked: language === 'en-US' })),
+    validate: value => value.length > 0 ? true : 'You must pick at least one language.'
+  },
   {
     type: 'list',
     name: 'analyticsProvider',

generators/app/templates/.htmlhintrc

@@ -4,7 +4,7 @@
   "attr-value-double-quotes": true,
   "tag-pair": true,
   "spec-char-escape": true,
-  "id-unique": true,
+  "id-unique": false,
   "src-not-empty": true,
   "attr-no-duplication": true,
   "title-require": true,

generators/app/templates/src/app/_app.component.ts

@@ -25,7 +25,8 @@ import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
 <% } -%>
 
 import { environment } from '@env/environment';
-import { Logger, I18nService, untilDestroyed } from '@app/core';
+import { Logger, untilDestroyed } from '@app/core';
+import { I18nService } from '@app/i18n';
 
 <% if (props.target.includes('cordova')) { -%>
 

generators/app/templates/src/app/about/_about-routing.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { extract } from '@app/core';
+import { extract } from '@app/i18n';
 <% if (!props.lazy) { -%>
 import { Shell } from '@app/shell/shell.service';
 <% } -%>

generators/app/templates/src/app/auth/__auth+bootstrap.login.component.html

@@ -3,15 +3,8 @@
     <h1 translate>APP_NAME</h1>
     <div>
       <h6 class="d-inline-block">v{{version}}</h6>
-      <div class="d-inline-block ml-3" ngbDropdown>
-        <button id="language-dropdown" class="btn btn-sm btn-secondary" ngbDropdownToggle>
-          {{currentLanguage}}
-        </button>
-        <div ngbDropdownMenu aria-labelledby="language-dropdown">
-          <button class="dropdown-item" *ngFor="let language of languages" (click)="setLanguage(language)">
-            {{language}}
-          </button>
-        </div>
+      <div class="d-inline-block ml-3">
+        <app-language-selector></app-language-selector>
       </div>
     </div>
     <div class="container">

generators/app/templates/src/app/auth/__auth+ionic.login.component.html

@@ -7,12 +7,8 @@
           <h1 translate>APP_NAME</h1>
           <h6>v{{version}}</h6>
           <ion-list *ngIf="isWeb" color="primary" lines="none" class="ion-no-padding">
-            <ion-item lines="none" color="primary">
-              <ion-label><span translate>Language</span></ion-label>
-              <ion-select [ngModel]="currentLanguage" (ngModelChange)="setLanguage($event)" interface="popover">
-                <ion-select-option *ngFor="let language of languages" [value]="language">{{language}}</ion-select-option>
-              </ion-select>
-            </ion-item>
+            <app-language-selector type="select" itemClass="ion-color ion-color-primary item-lines-none">
+            </app-language-selector>
           </ion-list>
         </div>
         <div class="login-container">

generators/app/templates/src/app/auth/__auth+material.login.component.html

@@ -3,16 +3,7 @@
     <h1 fxLayoutAlign="center" translate>APP_NAME</h1>
     <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="2rem">
       <h4 class="version">v{{version}}</h4>
-      <div class="language-selector">
-        <button mat-raised-button color="primary" [matMenuTriggerFor]="languageMenu">
-          {{currentLanguage}}
-        </button>
-        <mat-menu #languageMenu="matMenu">
-          <button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)">
-            {{language}}
-          </button>
-        </mat-menu>
-      </div>
+      <app-language-selector></app-language-selector>
     </div>
   </div>
   <div class="login-container" fxLayout="row" fxLayoutAlign="center">

generators/app/templates/src/app/auth/__auth+raw.login.component.html

@@ -3,11 +3,7 @@
     <h1 translate>APP_NAME</h1>
     <div>
       <strong>v{{version}}</strong>
-      <select (change)="setLanguage($event.target.value)">
-        <option *ngFor="let language of languages" [value]="language" [selected]="language === currentLanguage">
-          {{language}}
-        </option>
-      </select>
+      <app-language-selector></app-language-selector>
     </div>
     <div class="container">
       <form (ngSubmit)="login()" [formGroup]="loginForm" novalidate>