remove heroe stuff + styling + home, error, not found, layout styling + app info

Author: stephenlautier

src/app/app-routing.module.ts

@@ -1,14 +1,9 @@
 import { NgModule } from "@angular/core";
-import { Routes, RouterModule } from "@angular/router";
-
-import { CommandComponent } from "./command/command.component";
-
-const routes: Routes = [
-{ path: "command", component: CommandComponent }
-];
+import { RouterModule } from "@angular/router";
+import { AREAS_ROUTES } from "./areas/index";
 
 @NgModule({
-imports: [RouterModule.forRoot(routes)],
-exports: [RouterModule]
+imports: [RouterModule.forRoot(AREAS_ROUTES)],
+exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.component.html

@@ -4,6 +4,6 @@
 </main>
 <footer class="footer">
 <div class="container">
-<p class="text-muted">&copy; Stephen Lautier 2016.</p>
+<p>&copy; Made with <i class="fa fa-heart" aria-hidden="true" style="color: red;"></i>️ by <strong>Sketch7</strong> 2017.</p>
 </div>
 </footer>

src/app/app.module.ts

@@ -5,15 +5,16 @@ import { ServiceWorkerModule } from "@angular/service-worker";
 import { AppRoutingModule } from "./app-routing.module";
 
 import { environment } from "../environments/environment";
-import { CommandComponent } from "./command/command.component";
 import { AppComponent } from "./app.component";
-import { NavComponent } from "./nav/nav.component";
+import { AREAS_COMPONENTS } from "./areas/index";
+import { AppSharedModule } from "./shared/shared.module";
 
 @NgModule({
-declarations: [AppComponent, CommandComponent, NavComponent],
+declarations: [AppComponent, ...AREAS_COMPONENTS],
 imports: [
 BrowserModule.withServerTransition({ appId: "serverApp" }),
 AppRoutingModule,
+AppSharedModule,
 ServiceWorkerModule.register("/ngsw-worker.js", { enabled: environment.production }),
 ],
 providers: [],

src/app/areas/command/command.component.html

@@ -0,0 +1 @@
+<h1>Command</h1>

src/app/areas/command/command.component.scss

@@ -0,0 +1 @@
+@import "vars";

src/app/command/command.component.ts renamed to src/app/areas/command/command.component.ts

@@ -3,8 +3,6 @@ import { Component } from "@angular/core";
 @Component({
 selector: "app-command",
 templateUrl: "./command.component.html",
-styleUrls: ["./command.component.scss"]
+styleUrls: ["./command.component.scss"],
 })
-export class CommandComponent {
-title = "Command";
-}
+export class CommandComponent {}

src/app/areas/error/error.component.html

@@ -0,0 +1,6 @@
+<div class="text-center">
+<h1>500</h1>
+<p><strong>Ooppss!</strong> an error has occurred. Please refresh and try again.</p>
+<i class="fa fa-meh-o fa-5x"
+ aria-hidden="true"></i>
+</div>

src/app/areas/error/error.component.scss

@@ -0,0 +1,9 @@
+@import "vars";
+
+div {
+margin-top: 30vh;
+}
+
+h1 {
+font-size: $font-size-xxl;
+}

src/app/areas/error/error.component.ts

@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+selector: "app-error",
+templateUrl: "./error.component.html",
+styleUrls: ["./error.component.scss"],
+})
+export class ErrorComponent {}

src/app/areas/home/home.component.html

@@ -0,0 +1,9 @@
+<h1>
+{{title}}
+</h1>
+<p>Angular 5.x sample template application to get you started easily!</p>
+<ul>
+<li>Angular CLI 1.6</li>
+<li>SCSS for styling</li>
+<li>Bootstrap 4.x</li>
+</ul>