Merge branch 'shared-layouts' of https://github.com/Stivin/angular-universal-starter into Stivin-shared-layouts

Author: Gorniv

.angular-cli.json

@@ -20,7 +20,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.scss"
+        "styles.scss",
+        "styles/main.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -47,7 +48,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.scss"
+        "styles.scss",
+        "styles/main.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

src/app/app.component.html

@@ -1,12 +1 @@
-<nav>
-    <ul>
-        <li><button (click)="changeLang('en')">EN</button></li>
-        <li><button (click)="changeLang('ru')">RU</button></li>
-    </ul>
-    <ul>
-        <li><a [routerLink]="['']" [routerLinkActive]="['router-link-active']">home</a></li>
-        <li><a [routerLink]="['/mock']" [routerLinkActive]="['router-link-active']">mock</a></li>
-        <li><a [routerLink]="['/back']" [routerLinkActive]="['router-link-active']">back http</a></li>
-    </ul>
-</nav>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { MetaService } from '@ngx-meta/core';
-import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-root',
@@ -9,13 +8,7 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class AppComponent {
 
-  constructor(private readonly meta: MetaService,
-              private translate: TranslateService) {
-    this.translate.setDefaultLang('en');
+  constructor(private readonly meta: MetaService) {
     this.meta.setTag('og:title', 'home ctor');
   }
-
-  changeLang(lang: string): void {
-    this.translate.use(lang);
-  }
 }

src/app/app.module.ts

@@ -6,14 +6,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { CookieService } from 'ngx-cookie-service';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import { MetaModule, MetaSettings } from '@ngx-meta/core';
 import { MetaLoader } from '@ngx-meta/core';
 import { MetaStaticLoader } from '@ngx-meta/core';
 import { PageTitlePositioning } from '@ngx-meta/core';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { PrebootModule } from 'preboot';
+import { SharedModule } from '@shared/shared.module';
 
 export function metaFactory(): MetaLoader {
   const setting: MetaSettings = {
@@ -34,10 +33,6 @@ export function metaFactory(): MetaLoader {
   return new MetaStaticLoader(setting);
 }
 
-export function httpLoaderFactory(http: HttpClient) {
-  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
-}
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -50,19 +45,12 @@ export function httpLoaderFactory(http: HttpClient) {
     AppRoutes,
     TransferHttpModule,
     BrowserAnimationsModule,
+    SharedModule.forRoot(),
     MetaModule.forRoot({
       provide: MetaLoader,
       useFactory: metaFactory,
       deps: []
-    }),
-    TranslateModule.forRoot({
-        loader: {
-          provide: TranslateLoader,
-          useFactory: httpLoaderFactory,
-          deps: [HttpClient]
-        }
-      }
-    )
+    })
   ],
   providers: [CookieService],
   bootstrap: [AppComponent]

src/app/app.routing.ts

@@ -1,26 +1,33 @@
 import { Routes, RouterModule } from '@angular/router';
 import { MetaGuard } from '@ngx-meta/core';
 
+import { WrapperComponent } from '@shared/layouts/wrapper/wrapper.component';
+
 const routes: Routes = [
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
   {
-    path: '', loadChildren: './home/home.module#HomeModule',
-    data: {
-      // for override default meta
-      meta: {
-        title: 'home title',
-        override: true,
-        description: 'home description'
-      }
-    },
-    // need for default meta
-    canActivateChild: [MetaGuard],
-  },
-  // without meta
-  { path: 'mock', loadChildren: './mock-server-browser/mock-server-browser.module#MockServerBrowserModule' },
-  // with meta
-  { path: 'back', loadChildren: './transfer-back/transfer-back.module#TransferBackModule', canActivateChild: [MetaGuard]},
-  // 404
-  { path: '**', loadChildren: './not-found/not-found.module#NotFoundModule' },
+    path: '', component: WrapperComponent, children: [
+      {
+        path: 'home', loadChildren: './home/home.module#HomeModule',
+        data: {
+          // for override default meta
+          meta: {
+            title: 'home title',
+            override: true,
+            description: 'home description'
+          }
+        },
+        // need for default meta
+        canActivateChild: [MetaGuard],
+      },
+      // without meta
+      { path: 'mock', loadChildren: './mock-server-browser/mock-server-browser.module#MockServerBrowserModule' },
+      // with meta
+      { path: 'back', loadChildren: './transfer-back/transfer-back.module#TransferBackModule', canActivateChild: [MetaGuard] },
+      // 404
+      { path: '**', loadChildren: './not-found/not-found.module#NotFoundModule' },
+    ]
+  }
 ];
 // must use {initialNavigation: 'enabled'}) - for one load page, without reload
 export const AppRoutes = RouterModule.forRoot(routes, { initialNavigation: 'enabled' });

src/app/home/home.component.html

@@ -1,7 +1,3 @@
-<p>
-  home works!
-</p>
-<p>
-  {{"home" | translate}}
-</p>
+<h1>{{ "home.title" | translate }}</h1>
+<p>{{ "home.text" | translate }}</p>
 

src/app/home/home.module.ts

@@ -1,14 +1,15 @@
-import { HomeRoutes } from './home.routing';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HomeComponent } from './home.component';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { HomeRoutes } from './home.routing';
+import { HomeComponent } from './home.component';
+
 @NgModule({
   imports: [
     CommonModule,
     HomeRoutes,
-    TranslateModule
+    TranslateModule.forChild()
   ],
   declarations: [HomeComponent]
 })

src/app/mock-server-browser/mock-server-browser.component.html

@@ -1,7 +1,3 @@
-<p>
-  mock-server-browser works!
-</p>
-<p>
-  {{"mock" | translate}}
-</p>
+<h1>{{ "mock.title" | translate }}</h1>
+<p>{{ "mock.text" | translate }}</p>
 <app-mock></app-mock>

src/app/mock-server-browser/mock-server-browser.module.ts

@@ -1,19 +1,21 @@
-import { MockBrowserComponent } from './mock-browser/mock-browser.component';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { environment } from '../../environments/environment';
+
+import { MockBrowserComponent } from './mock-browser/mock-browser.component';
 import { MockServerBrowserComponent } from './mock-server-browser.component';
 import { MockServerBrowserRoutes } from './mock-server-browser.routing';
 import { MockBrowserModule } from './mock-browser/mock-browser.module';
 import { MockServerModule } from './mock-server/mock-server.module';
-import { environment } from '../../environments/environment';
-import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
   imports: [
     CommonModule,
     MockServerBrowserRoutes,
     environment.isServer ? [MockServerModule] : [MockBrowserModule],
-    TranslateModule
+    TranslateModule.forChild()
   ],
   declarations: [MockServerBrowserComponent]
 })

src/app/not-found/not-found.component.html

@@ -1,3 +1,2 @@
-<p>
-  not-found works!
-</p>
+<h1>{{ "not-found.title" | translate }}</h1>
+<p>404</p>