mock environment and mock service template

code/moya-management-portal/.angular-cli.json

@@ -25,7 +25,8 @@
       "environmentSource": "environments/environment.ts",
       "environmentSource": "environments/environment.ts",
       "environments": {
       "environments": {
         "dev": "environments/environment.ts",
         "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
+        "prod": "environments/environment.prod.ts",
+        "mock": "environments/environment.mock.ts"
       }
       }
     }
     }
   ],
   ],

code/moya-management-portal/package.json

@@ -5,6 +5,7 @@
   "scripts": {
   "scripts": {
     "ng": "ng",
     "ng": "ng",
     "start": "ng serve",
     "start": "ng serve",
+    "start:mock": "ng serve --env=mock",
     "build": "ng build --prod",
     "build": "ng build --prod",
     "test": "ng test",
     "test": "ng test",
     "lint": "ng lint",
     "lint": "ng lint",

code/moya-management-portal/src/app/app.component.ts

 import { Component } from '@angular/core';
 import { Component } from '@angular/core';
+import { AppService } from './shared/app.service';
 
 
 @Component({
 @Component({
   selector: 'app-root',
   selector: 'app-root',
@@ -6,5 +7,8 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
   styleUrls: ['./app.component.css']
 })
 })
 export class AppComponent {
 export class AppComponent {
-  title = 'app';
+  title = 'Moay';
+  constructor(private appService: AppService) {
+    console.log(this.appService.get());
+  }
 }
 }

code/moya-management-portal/src/app/app.mock.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+
+import { AppComponent } from './app.component';
+import { AppMockService } from './shared/app.mock.service';
+import { AppService } from './shared/app.service';
+
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [{ provide: AppService, useClass: AppMockService}],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

code/moya-management-portal/src/app/app.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 
 
 
 
 import { AppComponent } from './app.component';
 import { AppComponent } from './app.component';
+import { AppService } from './shared/app.service';
 
 
 
 
 @NgModule({
 @NgModule({
@@ -12,7 +13,7 @@ import { AppComponent } from './app.component';
   imports: [
   imports: [
     BrowserModule
     BrowserModule
   ],
   ],
-  providers: [],
+  providers: [AppService],
   bootstrap: [AppComponent]
   bootstrap: [AppComponent]
 })
 })
 export class AppModule { }
 export class AppModule { }

code/moya-management-portal/src/app/shared/app.mock.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AppMockService {
+    get() {
+        return { id: 1, name: 'Mock User' };
+    }
+}

code/moya-management-portal/src/app/shared/app.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AppService {
+    get() {
+        return { id: 1, name: 'Real User' };
+    }
+}

code/moya-management-portal/src/environments/environment.mock.ts

+export { AppModule as AppModule } from '../app/app.mock.module';
+
+export const environment = {
+  production: false
+};

code/moya-management-portal/src/environments/environment.prod.ts

+export { AppModule as AppModule } from '../app/app.module';
+
 export const environment = {
 export const environment = {
   production: true
   production: true
 };
 };

code/moya-management-portal/src/environments/environment.ts

@@ -3,6 +3,8 @@
 // `ng build --env=prod` then `environment.prod.ts` will be used instead.
 // `ng build --env=prod` then `environment.prod.ts` will be used instead.
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 
+export { AppModule as AppModule } from '../app/app.module';
+
 export const environment = {
 export const environment = {
   production: false
   production: false
 };
 };

code/moya-management-portal/src/main.ts

 import { enableProdMode } from '@angular/core';
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { environment, AppModule } from './environments/environment';
 
 
 if (environment.production) {
 if (environment.production) {
   enableProdMode();
   enableProdMode();
 }
 }
 
 
 platformBrowserDynamic().bootstrapModule(AppModule)
 platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+  .catch(err => {
+    console.log(err);
+  });