Create shared module and layouts module

Author: Stivin

.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",

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.module.ts

@@ -14,6 +14,7 @@ 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 = {
@@ -50,6 +51,7 @@ export function httpLoaderFactory(http: HttpClient) {
     AppRoutes,
     TransferHttpModule,
     BrowserAnimationsModule,
+    SharedModule.forRoot(),
     MetaModule.forRoot({
       provide: MetaLoader,
       useFactory: metaFactory,

src/app/app.routing.ts

@@ -1,27 +1,32 @@
 import { Routes, RouterModule } from '@angular/router';
 import { MetaGuard } from '@ngx-meta/core';
 
+import { WrapperComponent } from '@shared/layouts/wrapper/wrapper.component';
+
 const routes: Routes = [
   {
-    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: '404', loadChildren: './not-found/not-found.module#NotFoundModule' },
-  { path: '**', redirectTo: '404', pathMatch: 'full' }
+    path: '', component: WrapperComponent, children: [
+      {
+        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' },
+    ]
+  }
 ];
 // must use {initialNavigation: 'enabled'}) - for one load page, without reload
 export const AppRoutes = RouterModule.forRoot(routes, { initialNavigation: 'enabled' });

src/app/shared/layouts/footer/footer.component.html

@@ -0,0 +1,4 @@
+<ul>
+    <li><button (click)="changeLang('en')">EN</button></li>
+    <li><button (click)="changeLang('ru')">RU</button></li>
+</ul>

src/app/shared/layouts/footer/footer.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html'
+})
+export class FooterComponent {
+}

src/app/shared/layouts/layouts.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { FooterComponent } from './footer/footer.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { ToolbarComponent } from './toolbar/toolbar.component';
+import { WrapperComponent } from './wrapper/wrapper.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+  ],
+  declarations: [
+    FooterComponent,
+    SidebarComponent,
+    ToolbarComponent,
+    WrapperComponent
+  ]
+})
+export class LayoutsModule {
+}

src/app/shared/layouts/sidebar/sidebar.component.html

@@ -0,0 +1,7 @@
+<nav>
+    <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>

src/app/shared/layouts/sidebar/sidebar.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html'
+})
+export class SidebarComponent {
+}

src/app/shared/layouts/toolbar/toolbar.component.html

@@ -0,0 +1 @@
+<span>Angular RU Universal Starter</span>