refactor(Components): change to app.module and lazy loaded modules

package.json

@@ -32,6 +32,7 @@
     "@angular/common": "4.4.4",
     "@angular/compiler": "4.4.4",
     "@angular/core": "4.4.4",
+    "@angular/flex-layout": "2.0.0-beta.9",
     "@angular/forms": "4.4.4",
     "@angular/http": "4.4.4",
     "@angular/material": "2.0.0-beta.12",

src/app/app.component.html

@@ -1,26 +1,17 @@
 <div class="app-fullpage">
   <header>
-    <mat-toolbar color="accent" class="mat-elevation-z6">
-      <button mat-icon-button (click)="sidenav.toggle()" aria-label="menu">
-        <mat-icon>
-          menu
-        </mat-icon>
-      </button>
-      <span class="title"> RxJS Docs </span>
-    </mat-toolbar>
+    <app-toolbar (navToggle)="sidenav.toggle()"></app-toolbar>
   </header>
-  <mat-sidenav-container>
-    <mat-sidenav #sidenav role="navigation">
-      <mat-nav-list (click)="sidenav.toggle()">
-        <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active"
-          [routerLinkActiveOptions]="menu.options"
-          [routerLink]="menu.link">
-          {{menu.title}}
-        </a>
-      </mat-nav-list>
-    </mat-sidenav>
-    <main class="app-content">
+  <main class="app-content">
+    <mat-sidenav-container>
+      <mat-sidenav #sidenav role="navigation">
+        <mat-nav-list (click)="sidenav.toggle()">
+          <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="menu.options" [routerLink]="menu.link">
+            {{menu.title}}
+          </a>
+        </mat-nav-list>
+      </mat-sidenav>
       <router-outlet></router-outlet>
-    </main>
-  </mat-sidenav-container>
+    </mat-sidenav-container>
+  </main>
 </div>

src/app/app.component.scss

@@ -1,8 +1,3 @@
-.title {
-  padding: 0 16px;
-  font-weight: 600;
-}
-
 .app-fullpage {
   position: absolute;
   top: 0;
@@ -11,29 +6,24 @@
   right: 0;
   display: flex;
   flex-direction: column;
-
   header {
     z-index: 10;
   }
 }
 
-mat-sidenav-container {
-  flex: 1 1 auto;
-  width: 100%;
-  height: 100%;
-}
-
-mat-sidenav {
-  width: 200px;
-}
-
 .app-content {
   min-height: 100%;
   overflow: auto;
   display: flex;
   flex-direction: column;
 }
 
+mat-sidenav-container {
+  flex: 1 1 auto;
+  width: 100%;
+  height: calc(100vh - 64px);
+}
 
-
-
+mat-sidenav {
+  width: 200px;
+}

src/app/app.component.spec.ts

@@ -1,36 +1,35 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatToolbarModule, MatSidenavModule, MatIconModule, MatButtonModule, MatListModule } from '@angular/material';
-import { AppComponent } from './app.component';
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { AppComponent } from "./app.component";
+import { ToolbarModule } from "./toolbar/toolbar.module";
+import { MatSidenavModule } from "@angular/material";
 
-describe('AppComponent', () => {
+describe("AppComponent", () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-        BrowserAnimationsModule,
-        MatToolbarModule,
-        MatSidenavModule,
-        MatIconModule,
-        MatButtonModule,
-        MatListModule
-      ],
-      declarations: [AppComponent]
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        imports: [
+          RouterTestingModule,
+          BrowserAnimationsModule,
+          ToolbarModule,
+          MatSidenavModule
+        ],
+        declarations: [AppComponent]
+      }).compileComponents();
     })
-      .compileComponents();
-  }));
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AppComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it("should create", () => {
     expect(component).toBeTruthy();
   });
 });

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
 interface Menu {
   title: string;
@@ -7,30 +7,30 @@ interface Menu {
 }
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"]
 })
 export class AppComponent {
   menus: Menu[] = [
     {
-      title: 'Home',
-      link: '/',
+      title: "Home",
+      link: "/",
       options: { exact: true }
     },
     {
-      title: 'Operators',
-      link: '/operators',
+      title: "Operators",
+      link: "/operators",
       options: { exact: false }
     },
     {
-      title: 'Companies',
-      link: '/companies',
+      title: "Companies",
+      link: "/companies",
       options: { exact: false }
     },
     {
-      title: 'Team',
-      link: '/team',
+      title: "Team",
+      link: "/team",
       options: { exact: false }
     }
   ];

src/app/app.module.ts

@@ -1,27 +1,26 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
-import { MatToolbarModule, MatSidenavModule, MatIconModule, MatButtonModule, MatListModule } from '@angular/material';
-import { RouterModule, PreloadAllModules } from '@angular/router';
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { NgModule } from "@angular/core";
+import { RouterModule, PreloadAllModules } from "@angular/router";
 
-import { AppComponent } from './app.component';
-import { RXJS_DOC_ROUTES } from './app.routing';
+import { AppComponent } from "./app.component";
+import { RXJS_DOC_ROUTES } from "./app.routing";
+import { ToolbarModule } from "./toolbar/toolbar.module";
+import { MatSidenavModule, MatListModule } from "@angular/material";
 
 @NgModule({
-  declarations: [
-    AppComponent,
-  ],
+  declarations: [AppComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    RouterModule.forRoot(RXJS_DOC_ROUTES, { preloadingStrategy: PreloadAllModules }),
-    MatToolbarModule,
+    ToolbarModule,
+    MatListModule,
     MatSidenavModule,
-    MatIconModule,
-    MatButtonModule,
-    MatListModule
+    RouterModule.forRoot(RXJS_DOC_ROUTES, {
+      preloadingStrategy: PreloadAllModules
+    })
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

src/app/companies/companies.component.html

@@ -1,3 +1 @@
-<p>
-  companies works!
-</p>
+

src/app/companies/companies.component.ts

@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
 
 @Component({
-  selector: 'app-companies',
-  templateUrl: './companies.component.html',
-  styleUrls: ['./companies.component.scss']
+  selector: "app-companies",
+  templateUrl: "./companies.component.html",
+  styleUrls: ["./companies.component.scss"]
 })
 export class CompaniesComponent implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }
-

src/app/companies/companies.module.ts

@@ -1,10 +1,12 @@
-import { NgModule } from '@angular/core';
+import { NgModule } from "@angular/core";
 
-import { CompaniesComponent } from './companies.component';
-import { routing } from './companies.routing';
+import { CompaniesComponent } from "./companies.component";
+import { routing } from "./companies.routing";
+import { SharedModule } from "../shared.module";
+import { environment } from "../../environments/environment";
 
 @NgModule({
-    imports: [routing],
-    declarations: [CompaniesComponent]
+  imports: [routing, SharedModule],
+  declarations: [CompaniesComponent]
 })
-export class CompaniesModule { }
+export class CompaniesModule {}

src/app/operators/operators.module.ts

@@ -1,34 +1,26 @@
-import { NgModule, InjectionToken, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { LayoutModule } from '@angular/cdk/layout';
 import {
-  MatSidenavModule,
-  MatIconModule,
-  MatListModule,
-  MatToolbarModule,
-  MatExpansionModule,
-  MatCardModule,
-  MatInputModule,
-  MatMenuModule,
-  MatButtonModule,
-  MatTooltipModule
-} from '@angular/material';
-import { ClipboardModule } from 'ngx-clipboard';
-import { ALL_OPERATORS, OperatorDoc } from '../../operator-docs';
+  NgModule,
+  InjectionToken,
+  CUSTOM_ELEMENTS_SCHEMA
+} from "@angular/core";
+import { LayoutModule } from "@angular/cdk/layout";
+import { ClipboardModule } from "ngx-clipboard";
 
-import { OperatorsRoutingModule } from './operators.routing';
-import { OperatorsComponent, OPERATORS_TOKEN } from './operators.component';
-import { OperatorComponent } from './components/operator/operator.component';
-import { OperatorHeaderComponent } from './components/operator-header/operator-header.component';
-import { OperatorParametersComponent } from './components/operator-parameters/operator-parameters.component';
-import { OperatorExamplesComponent } from './components/operator-examples/operator-examples.component';
-import { RelatedOperatorsComponent } from './components/related-operators/related-operators.component';
-import { OperatorExtrasComponent } from './components/operator-extras/operator-extras.component';
-import { AdditionalResourcesComponent } from './components/additional-resources/additional-resources.component';
-import { MarbleDiagramComponent } from './components/marble-diagram/marble-diagram.component';
-import { WalkthroughComponent } from './components/walkthrough/walkthrough.component';
-import { HighlightJsDirective } from './directives/highlight-js.directive';
-import { SafeUrlPipe } from './pipes/safe-url.pipe';
+import { ALL_OPERATORS, OperatorDoc } from "../../operator-docs";
+import { OperatorsRoutingModule } from "./operators.routing";
+import { OperatorsComponent, OPERATORS_TOKEN } from "./operators.component";
+import { OperatorComponent } from "./components/operator/operator.component";
+import { OperatorHeaderComponent } from "./components/operator-header/operator-header.component";
+import { OperatorParametersComponent } from "./components/operator-parameters/operator-parameters.component";
+import { OperatorExamplesComponent } from "./components/operator-examples/operator-examples.component";
+import { RelatedOperatorsComponent } from "./components/related-operators/related-operators.component";
+import { OperatorExtrasComponent } from "./components/operator-extras/operator-extras.component";
+import { AdditionalResourcesComponent } from "./components/additional-resources/additional-resources.component";
+import { MarbleDiagramComponent } from "./components/marble-diagram/marble-diagram.component";
+import { WalkthroughComponent } from "./components/walkthrough/walkthrough.component";
+import { HighlightJsDirective } from "./directives/highlight-js.directive";
+import { SafeUrlPipe } from "./pipes/safe-url.pipe";
+import { SharedModule } from "../shared.module";
 
 @NgModule({
   declarations: [
@@ -46,23 +38,12 @@ import { SafeUrlPipe } from './pipes/safe-url.pipe';
     SafeUrlPipe
   ],
   imports: [
-    CommonModule,
+    SharedModule,
     OperatorsRoutingModule,
     ClipboardModule,
-    LayoutModule,
-    MatSidenavModule,
-    MatIconModule,
-    MatListModule,
-    MatToolbarModule,
-    MatCardModule,
-    MatInputModule,
-    MatMenuModule,
-    MatButtonModule,
-    MatTooltipModule
+    LayoutModule
   ],
-  providers: [
-    { provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS }
-  ],
-  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
+  providers: [{ provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS }],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class OperatorsModule { }
+export class OperatorsModule {}

src/app/rxjs/rxjs.module.ts

@@ -1,10 +1,11 @@
-import { NgModule } from '@angular/core';
+import { NgModule } from "@angular/core";
 
-import { RxjsComponent } from './rxjs.component';
-import { routing } from './rxjs.routing';
+import { RxjsComponent } from "./rxjs.component";
+import { routing } from "./rxjs.routing";
+import { SharedModule } from "../shared.module";
 
 @NgModule({
-    imports: [routing],
-    declarations: [RxjsComponent]
+  imports: [routing, SharedModule],
+  declarations: [RxjsComponent]
 })
-export class RxjsModule { }
+export class RxjsModule {}