Configuring TravisCI

.htaccess

@@ -0,0 +1,66 @@
+# INFORMATION
+# For new versions of this Gist go to:
+# https://gist.github.com/julianpoemp/bcf277cb56d2420cc53ec630a04a3566
+# Version 1.1.0
+#
+# Contributors:
+# - RaschidJFR [https://gist.github.com/RaschidJFR/f6d21a03b0692f5c7a6a23954003f00b]
+#-------------
+
+# INSTRUCTION:
+# Place this file next to the app's index.html.
+# There are two options for the redirection:
+# Option 1) (default): Your app is directly on the root of the domain.
+# Option 2): Your app is placed in a subfolder from the root of the domain.
+#
+# If you have issues with browser caching you can uncomment the BROWSER CACHING part
+
+#------------ REDIRECTION option 1)
+# use this if your app is directly on the root of the domain,
+# e.g. http://example_domain.com/index.html
+<IfModule mod_rewrite.c>
+	RewriteEngine On
+	# If an existing asset or directory is requested go to it as it is
+	RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
+	RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
+	RewriteRule ^ - [L]
+
+    RewriteRule ^ /index.html
+</IfModule>
+#------------
+
+#------------ REDIRECTION option 2)
+# Use this if your app is not directly on the root of the domain,
+# e.g. http://example_domain.com/directory_path/index.html
+# Important: replace directory_path with the relative path from
+# the domain to the index.html. Keep the first "/". Don't forget to comment option 1).
+#<IfModule mod_rewrite.c>
+#	RewriteEngine On
+#	# If an existing asset or directory is requested go to it as it is
+#	RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
+#	RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
+#	RewriteRule ^ - [L]
+#
+#	RewriteRule ^ /directory_path/index.html
+#</IfModule>
+#------------
+
+# #------------ BROWSER CACHING
+# disable browser caching in production.
+#<FilesMatch "\.(html|htm|js|json|css)$">
+#	<IfModule mod_headers.c>
+#		FileETag None
+#		Header unset ETag
+#		Header unset Pragma
+#		Header unset Cache-Control
+#		Header unset Last-Modified
+#		Header set Pragma "no-cache"
+#		Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
+#		Header set Expires "Mon, 10 Apr 1972 00:00:00 GMT"
+#	</IfModule>
+#</FilesMatch>
+#
+# It is recommended to add these tags to your index.html, too:
+# <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+# <meta http-equiv="Pragma" content="no-cache">
+# <meta http-equiv="Expires" conten

.travis.yml

@@ -1,17 +1,46 @@
+# language: node_js
+# node_js:
+#   - '11.0'
+# branches:
+#   only:
+#     - master
+# before_script:
+#   - npm install -g @angular/cli
+# script:
+#   - npm install
+#   - npm run build
+# deploy:
+#   skip_cleanup: true
+#   provider: gh-pages
+#   token:
+#     secure: ''
+
 language: node_js
 node_js:
-  - "10"
-dist: trusty
-sudo: requiredbranches:
+  - '11.0'
+
+branches:
   only:
-  - masterbefore_script:
-  - npm install -g @angular/cliscript:
-  - ng lint
-  - npm run test-headless
-  - ng build --prod --build-optimizer --base-href https://cerealkiller97.github.io/NG-VideoGamer:
+    - master
+
+addons:
+  chrome: stable
+
+before_script:
+  - yarn global add @angular/cli
+
+cache:
+  yarn: true
+  directories:
+    - node_modules
+
+script:
+  - ng build --prod
+
+deploy:
   provider: pages
-  skip_cleanup: true
-  github_token: $GITHUB_TOKEN
-  local_dir: dist/travis-demo
+  skip-cleanup: true
+  github-token: $GITHUB_TOKEN
+  keep-history: true
+  local-dir: ./dist/
   on:
-    branch: master

angular.json

@@ -31,12 +31,10 @@
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
+              "fileReplacements": [{
+                "replace": "src/environments/environment.ts",
+                "with": "src/environments/environment.prod.ts"
+              }],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -46,13 +44,11 @@
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                }
-              ]
+              "budgets": [{
+                "type": "initial",
+                "maximumWarning": "2mb",
+                "maximumError": "5mb"
+              }]
             }
           }
         },
@@ -119,4 +115,4 @@
     }
   },
   "defaultProject": "video-gamer"
-}
+}

src/app/modules/contact/components/contact/contact.component.html

@@ -1 +1 @@
-<p>contact works!</p>
+<h1>Contact page</h1>

src/app/modules/contact/components/contact/contact.component.ts

@@ -1,15 +1,21 @@
 import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { LoadingService } from 'src/app/modules/shared/loading.service';
+import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-contact',
   templateUrl: './contact.component.html',
   styleUrls: ['./contact.component.css']
 })
 export class ContactComponent implements OnInit {
+  public contactForm: FormGroup = new FormGroup({
+    name: new FormControl('', [Validators.required])
+  });
 
-  constructor() { }
+  constructor(private readonly titleService: Title, private readonly loadingService: LoadingService) {}
 
   ngOnInit() {
+    this.titleService.setTitle('VideoGamer | Contact');
   }
-
 }

src/app/modules/errors/components/errors/errors.component.html

@@ -0,0 +1 @@
+<h1>404 page</h1>

src/app/modules/errors/components/errors/errors.component.spec.ts

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

src/app/modules/errors/components/errors/errors.component.ts

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

src/app/modules/errors/errors.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ErrorsComponent } from './components/errors/errors.component';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: ErrorsComponent
+  }
+];
+
+@NgModule({
+  declarations: [ErrorsComponent],
+  imports: [CommonModule, RouterModule.forChild(routes)],
+  exports: [ErrorsComponent, RouterModule]
+})
+export class ErrorsModule {}

src/app/modules/home/components/home/home.component.html

@@ -1 +1,6 @@
-
+<mat-grid-list cols="2" rowHeight="2:1">
+  <mat-grid-tile>
+    <h1>Welcome to VideoGamer</h1>
+  </mat-grid-tile>
+  <mat-grid-tile>2</mat-grid-tile>
+</mat-grid-list>

src/app/modules/home/components/home/home.component.ts

@@ -1,17 +1,16 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-
+import { LoadingService } from 'src/app/modules/shared/loading.service';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
-
-  constructor(private readonly titleService: Title) { }
+  constructor(private readonly titleService: Title, private readonly loadingService: LoadingService) {}
 
   ngOnInit() {
-    this.titleService.setTitle('Home page');
+    this.loadingService.setLoading(true);
+    this.titleService.setTitle('VideoGamer | Home');
   }
-
 }

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

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HomeComponent } from './components/home/home.component';
 import { RouterModule, Routes } from '@angular/router';
+import { MatGridListModule } from '@angular/material/grid-list';
 
 const routes: Routes = [
   {
@@ -13,7 +14,7 @@ const routes: Routes = [
 
 @NgModule({
   declarations: [HomeComponent],
-  imports: [CommonModule, RouterModule.forChild(routes)],
-  exports: [HomeComponent, RouterModule]
+  imports: [CommonModule, RouterModule.forChild(routes), MatGridListModule],
+  exports: [HomeComponent, RouterModule, MatGridListModule]
 })
 export class HomeModule {}

src/app/modules/layouts/video-gamer-layout/video-gamer-layout.module.ts

@@ -17,7 +17,8 @@ const routes: Routes = [
   },
   {
     path: '**',
-    component: null
+    component: DefaultComponent,
+    loadChildren: () => import('../../errors/errors.module').then(mod => mod.ErrorsModule)
   }
 ];
 

src/app/modules/shared-components/components/footer/footer.component.css

@@ -0,0 +1,3 @@
+.text-center {
+  text-align: center !important;
+}

src/app/modules/shared-components/components/footer/footer.component.html

@@ -1 +1,3 @@
-<p>footer works!</p>
+<mat-toolbar color="primary">
+  <small class="text-center">Copyright 2019 &copy; Stefan Bogdanovic</small>
+</mat-toolbar>

src/app/modules/shared-components/components/header/header.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar color="primary">
-  <span>VideoGamer</span>
+  <span [routerLink]="">VideoGamer</span>
 
   <span class="example-fill-remaining-space"></span>
 

src/app/modules/shared-components/components/loading-spinner/loading-spinner.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit, Input } from '@angular/core';
   styleUrls: ['./loading-spinner.component.css']
 })
 export class LoadingSpinnerComponent implements OnInit {
-  @Input() loading: boolean;
+  @Input() loading: boolean = true;
 
   constructor() {}
 

src/app/modules/shared-components/material/material.module.ts

@@ -4,10 +4,11 @@ import { CommonModule } from '@angular/common';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatButtonModule } from '@angular/material/button';
+import { MatGridListModule } from '@angular/material/grid-list';
 
 @NgModule({
   declarations: [],
-  imports: [CommonModule, MatToolbarModule, MatButtonModule, MatTabsModule],
-  exports: [MatToolbarModule, MatButtonModule, MatTabsModule]
+  imports: [CommonModule, MatToolbarModule, MatButtonModule, MatTabsModule, MatGridListModule],
+  exports: [MatToolbarModule, MatButtonModule, MatTabsModule, MatGridListModule]
 })
 export class MaterialModule {}

src/environments/environment.interface.ts

@@ -0,0 +1,4 @@
+export interface IEnvironment {
+  production: boolean;
+  apiKey: string;
+}

src/environments/environment.prod.ts

@@ -1,3 +1,6 @@
-export const environment = {
-  production: true
+import { IEnvironment } from './environment.interface';
+
+export const environment: IEnvironment = {
+  production: true,
+  apiKey: ''
 };

src/environments/environment.ts

@@ -1,9 +1,12 @@
+import { IEnvironment } from './environment.interface';
+
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
-export const environment = {
-  production: false
+export const environment: IEnvironment = {
+  production: false,
+  apiKey: ''
 };
 
 /*