add component page

mean/angular.json

@@ -103,5 +103,8 @@
     "@schematics/angular:directive": {
       "prefix": "app"
     }
+  },
+  "cli": {
+    "analytics": "9ab085ba-bb22-4e92-92f7-a6b2e0ff105f"
   }
-}
+}
\ No newline at end of file

mean/src/app/app-routing.module.ts

-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { AuthGuard } from './shared/guards';
-import { HomeComponent } from './home/home.component';
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
 
+import { AuthGuard } from "./shared/guards";
+import { HomeComponent } from "./home/home.component";
+import { TopicComponent } from "./topic/topic.component";
+import { CreateTopicComponent } from "./create-topic/create-topic.component";
 const routes: Routes = [
   {
-    path: '',
+    path: "",
     component: HomeComponent,
     canActivate: [AuthGuard],
   },
+  { 
+    path: "/topic",
+    component: TopicComponent
+  },
+  { 
+    path: "/create", 
+    component: CreateTopicComponent 
+  },
+  ,
+  { 
+    path: "second-component", 
+    component: SecondComponent 
+  },
   {
-    path: 'auth',
-    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
+    path: "auth",
+    loadChildren: () => import("./auth/auth.module").then((m) => m.AuthModule),
   },
   {
-    path: 'admin',
-    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
+    path: "admin",
+    loadChildren: () =>
+      import("./admin/admin.module").then((m) => m.AdminModule),
   },
 ];
 

mean/src/app/app.module.ts

@@ -12,6 +12,8 @@ import { AppRoutingModule } from './app-routing.module';
 import { HeaderComponent } from './header/header.component';
 import { HomeComponent } from './home/home.component';
 import { AuthService } from './shared/services';
+import { TopicComponent } from './topic/topic.component';
+import { CreateTopicComponent } from './create-topic/create-topic.component';
 
 export function appInitializerFactory(authService: AuthService) {
   return () => authService.checkTheUserOnTheFirstLoad();
@@ -19,7 +21,7 @@ export function appInitializerFactory(authService: AuthService) {
 
 @NgModule({
   imports: [BrowserAnimationsModule, HttpClientModule, SharedModule, AppRoutingModule],
-  declarations: [AppComponent, HeaderComponent, HomeComponent],
+  declarations: [AppComponent, HeaderComponent, HomeComponent, TopicComponent, CreateTopicComponent],
   providers: [
     {
       provide: HTTP_INTERCEPTORS,

mean/src/app/create-topic/create-topic.component.html

+<p>create-topic works!</p>

mean/src/app/create-topic/create-topic.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateTopicComponent } from './create-topic.component';
+
+describe('CreateTopicComponent', () => {
+  let component: CreateTopicComponent;
+  let fixture: ComponentFixture<CreateTopicComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateTopicComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateTopicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mean/src/app/create-topic/create-topic.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-create-topic',
+  templateUrl: './create-topic.component.html',
+  styleUrls: ['./create-topic.component.css']
+})
+export class CreateTopicComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

mean/src/app/header/header.component.html

@@ -4,6 +4,8 @@
     <span class="example-spacer"></span>
     <a class="links side" routerLink="/auth/login" *ngIf="!user">Login</a>
     <div>
+      <a class="links side" *ngIf="user" routerLink="/topic">Topic</a>
+      <a class="links side" *ngIf="user" routerLink="/create">Create topic</a>
       <a class="links side" *ngIf="user" [matMenuTriggerFor]="menu">
         <mat-icon>account_circle</mat-icon>{{ user.fullname }}
       </a>

mean/src/app/home/home.component.html

 <p>
-  home works!
+  home
 </p>

mean/src/app/topic/topic.component.html

+<p>topic works!</p>

mean/src/app/topic/topic.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TopicComponent } from './topic.component';
+
+describe('TopicComponent', () => {
+  let component: TopicComponent;
+  let fixture: ComponentFixture<TopicComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TopicComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TopicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mean/src/app/topic/topic.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-topic',
+  templateUrl: './topic.component.html',
+  styleUrls: ['./topic.component.css']
+})
+export class TopicComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}