Add support to return 404 status code #1

- configure project structure
- configure lazy loaded modules

project/application/e2e/src/app.e2e-spec.ts

@@ -9,6 +9,6 @@ describe('workspace-project App', () => {
 
     it('should display welcome message', () => {
         page.navigateTo();
-        expect(page.getParagraphText()).toEqual('Welcome to angular ssr app!');
+        expect(page.getParagraphText()).toEqual('Home page!');
     });
 });

project/application/src/app/app.component.html

@@ -1 +1 @@
-<h1>{{ title }}</h1>
+<router-outlet></router-outlet>

project/application/src/app/app.component.spec.ts

@@ -1,9 +1,13 @@
 import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
 import { AppComponent } from './app.component';
+
 describe('AppComponent', () => {
     beforeEach(
         async(() => {
             TestBed.configureTestingModule({
+                imports: [RouterTestingModule],
                 declarations: [AppComponent],
             }).compileComponents();
         })
@@ -24,13 +28,4 @@ describe('AppComponent', () => {
             expect(app.title).toEqual('Welcome to angular ssr app!');
         })
     );
-    it(
-        'should render title in a h1 tag',
-        async(() => {
-            const fixture = TestBed.createComponent(AppComponent);
-            fixture.detectChanges();
-            const compiled = fixture.debugElement.nativeElement;
-            expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular ssr app!');
-        })
-    );
 });

project/application/src/app/app.module.ts

@@ -1,20 +1,13 @@
 import { NgModule } from '@angular/core';
-import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
-import { PLATFORM_ID, APP_ID, Inject } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
+import { RouterModule } from '@angular/router';
 
-import { AppComponent } from '@angular-universal/app.component';
+import { AppComponent } from './app.component';
+import { CoreModule } from './modules/core/core.module';
+import { SharedModule } from './modules/shared/shared.module';
 
 @NgModule({
-    imports: [BrowserModule.withServerTransition({ appId: 'angular-universal' }), BrowserTransferStateModule],
+    imports: [RouterModule, CoreModule, SharedModule],
     declarations: [AppComponent],
-    providers: [],
     bootstrap: [AppComponent],
 })
-export class AppModule {
-    constructor(@Inject(PLATFORM_ID) private platformId: Object, @Inject(APP_ID) private appId: string) {
-        const platform = isPlatformBrowser(platformId) ? 'in the browser' : 'on the server';
-
-        console.log(`Running ${platform} with appId=${appId}`);
-    }
-}
+export class AppModule {}

project/application/src/app/app.server.module.ts

@@ -2,8 +2,8 @@ import { NgModule } from '@angular/core';
 import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
 import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
 
-import { AppModule } from '@angular-universal/app.module';
-import { AppComponent } from '@angular-universal/app.component';
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
 
 @NgModule({
     imports: [AppModule, ServerModule, ModuleMapLoaderModule, ServerTransferStateModule],

project/application/src/app/configs/app-settings.config.ts

@@ -0,0 +1,3 @@
+import { environment } from '../../environments/environment';
+
+export const AppSettingsConfig: any = environment;

project/application/src/app/modules/core/core.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
+
+import { RoutingModule } from '../routing/routing.module';
+
+@NgModule({
+    imports: [
+        BrowserModule.withServerTransition({ appId: 'angular-universal' }),
+        BrowserTransferStateModule,
+        RoutingModule,
+    ],
+})
+export class CoreModule {}

project/application/src/app/modules/core/services/http-response-status/http-response-status.service.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { HttpResponseStatusService } from './http-response-status.service';
+
+describe('HttpResponseStatusService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [HttpResponseStatusService],
+        });
+    });
+
+    it(
+        'should be created',
+        inject([HttpResponseStatusService], (service: HttpResponseStatusService) => {
+            expect(service).toBeTruthy();
+        })
+    );
+});

project/application/src/app/modules/core/services/http-response-status/http-response-status.service.ts

@@ -0,0 +1,22 @@
+import { Inject, Injectable, Optional } from '@angular/core';
+import { RESPONSE } from '@nguniversal/express-engine/tokens';
+
+import { CoreModule } from '../../core.module';
+
+@Injectable({
+    providedIn: CoreModule,
+})
+export class HttpResponseStatusService {
+    constructor(
+        @Optional()
+        @Inject(RESPONSE)
+        private res: any
+    ) {}
+
+    public setStatus(code: number, message: string): void {
+        if (this.res) {
+            this.res.statusCode = code;
+            this.res.statusMessage = message;
+        }
+    }
+}

project/application/src/app/modules/home/home-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { HomeComponent } from './home.component';
+
+export const routes: Routes = [
+    {
+        path: '',
+        component: HomeComponent,
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+})
+export class HomeRoutingModule {}

project/application/src/app/modules/home/home.component.html

@@ -0,0 +1 @@
+<h1>{{ title }}</h1>

project/application/src/app/modules/home/home.component.spec.ts

@@ -0,0 +1,36 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+    beforeEach(
+        async(() => {
+            TestBed.configureTestingModule({ declarations: [HomeComponent] }).compileComponents();
+        })
+    );
+    it(
+        'should create the app',
+        async(() => {
+            const fixture = TestBed.createComponent(HomeComponent);
+            const app = fixture.debugElement.componentInstance;
+            expect(app).toBeTruthy();
+        })
+    );
+    it(
+        `should have as title 'Home page!'`,
+        async(() => {
+            const fixture = TestBed.createComponent(HomeComponent);
+            const app = fixture.debugElement.componentInstance;
+            expect(app.title).toEqual('Home page!');
+        })
+    );
+    it(
+        'should render title in a h1 tag',
+        async(() => {
+            const fixture = TestBed.createComponent(HomeComponent);
+            fixture.detectChanges();
+            const compiled = fixture.debugElement.nativeElement;
+            expect(compiled.querySelector('h1').textContent).toContain('Home page!');
+        })
+    );
+});

project/application/src/app/modules/home/home.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-home',
+    templateUrl: './home.component.html',
+    styleUrls: ['./home.component.css'],
+})
+export class HomeComponent {
+    title = 'Home page!';
+}

project/application/src/app/modules/home/home.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { HomeRoutingModule } from './home-routing.module';
+import { HomeComponent } from './home.component';
+
+@NgModule({
+    imports: [HomeRoutingModule],
+    declarations: [HomeComponent],
+})
+export class HomeModule {}

project/application/src/app/modules/not-found/not-found-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NotFoundComponent } from './not-found.component';
+
+export const routes: Routes = [
+    {
+        path: '',
+        component: NotFoundComponent,
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+})
+export class NotFoundRoutingModule {}

project/application/src/app/modules/not-found/not-found.component.html

@@ -0,0 +1 @@
+<h1>{{ title }}</h1>

project/application/src/app/modules/not-found/not-found.component.spec.ts

@@ -0,0 +1,41 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { NotFoundComponent } from './not-found.component';
+import { CoreModule } from '../core/core.module';
+
+describe('NotFoundComponent', () => {
+    beforeEach(
+        async(() => {
+            TestBed.configureTestingModule({
+                declarations: [NotFoundComponent],
+                imports: [CoreModule, RouterTestingModule],
+            }).compileComponents();
+        })
+    );
+    it(
+        'should create the app',
+        async(() => {
+            const fixture = TestBed.createComponent(NotFoundComponent);
+            const app = fixture.debugElement.componentInstance;
+            expect(app).toBeTruthy();
+        })
+    );
+    it(
+        `should have as title 'Not found page!'`,
+        async(() => {
+            const fixture = TestBed.createComponent(NotFoundComponent);
+            const app = fixture.debugElement.componentInstance;
+            expect(app.title).toEqual('Not found page!');
+        })
+    );
+    it(
+        'should render title in a h1 tag',
+        async(() => {
+            const fixture = TestBed.createComponent(NotFoundComponent);
+            fixture.detectChanges();
+            const compiled = fixture.debugElement.nativeElement;
+            expect(compiled.querySelector('h1').textContent).toContain('Not found page!');
+        })
+    );
+});

project/application/src/app/modules/not-found/not-found.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HttpResponseStatusService } from '../core/services/http-response-status/http-response-status.service';
+
+@Component({
+    selector: 'app-not-found',
+    templateUrl: './not-found.component.html',
+    styleUrls: ['./not-found.component.css'],
+})
+export class NotFoundComponent implements OnInit {
+    title = 'Not found page!';
+
+    constructor(private httpResponseStatusService: HttpResponseStatusService) {}
+
+    ngOnInit() {
+        this.httpResponseStatusService.setStatus(404, 'Not Found');
+    }
+}

project/application/src/app/modules/not-found/not-found.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { NotFoundComponent } from './not-found.component';
+import { NotFoundRoutingModule } from './not-found-routing.module';
+
+@NgModule({
+    imports: [NotFoundRoutingModule],
+    declarations: [NotFoundComponent],
+})
+export class NotFoundModule {}

project/application/src/app/modules/routing/routing.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+export const routes: Routes = [
+    {
+        path: '',
+        loadChildren: '../home/home.module#HomeModule',
+    },
+    {
+        path: '**',
+        loadChildren: '../not-found/not-found.module#NotFoundModule',
+    },
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabled' })],
+    exports: [RouterModule],
+})
+export class RoutingModule {}

project/application/src/app/modules/shared/shared.module.ts

@@ -0,0 +1,4 @@
+import { NgModule } from '@angular/core';
+
+@NgModule({})
+export class SharedModule {}

project/application/tsconfig.json

@@ -10,9 +10,6 @@
         "target": "es5",
         "typeRoots": ["node_modules/@types"],
         "lib": ["es2017", "dom"],
-        "baseUrl": "src",
-        "paths": {
-            "@angular-universal/*": ["app/*"]
-        }
+        "baseUrl": "./",
     }
 }