### How to use articles : [Medium](https://medium.com/@akshaynetha1015/agmockserver-how-to-use-angular-mock-server-fake-backend-a2ac1570b246) || [Hashnode](https://hashnode.com/draft/60f97b5962e20b58c1c8f9b5);
npm install ag-mock-server[](https://drive.google.com/uc?export=view&id=11ISv9G7qkNBqH2L0F5DK_FccdxTNwtnM)

sh
npm install ag-mock-server
`#### 2-ways to use it :
1. For Angular Apps
##### AgMockServer is basically an Inteceptor(Angular) which acts a fake bakend:
!Image - Flow diagram of Ag Mock Interceptor as Fake Bakend.
$3
$3
1. Add the following Services & Interfaces in the providers section of AppModule. That's all dude.. Enjoyy!!
`typescript
...
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';import { environment } from 'src/environments/environment';
import { ByPassInterceptor, FakeBackendService } from 'ag-mock-server';
@NgModule({
*
providers: [
...(
environment.production ? // <--can use any flag other than PROD flag.
[] : [
{
provide: HTTP_INTERCEPTORS,
useClass: ByPassInterceptor,
multi: true,
},
{
provide: APP_INITIALIZER,
useFactory: (service: FakeBackendService) => () => { return service.startMockServer(); },
deps: [FakeBackendService],
multi: true,
}
]
),
],
})
export class AppModule { }
`$3
1. Add the following services, interfaces in the providers section & importing "AgMockServerModule" as show below in AppModule.
`typescript
...
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { environment } from 'src/environments/environment';
import { ByPassInterceptor, AgMockServerModule } from 'ag-mock-server';@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule, // <-- Import if not already imported for animations
AgMockServerModule, // <-- Import this module
],
providers: [
...(
environment.production ? // <--can use any flag other than PROD flag.
[] : [
{
provide: HTTP_INTERCEPTORS,
useClass: ByPassInterceptor,
multi: true,
},
]
),
],
bootstrap: [AppComponent],
})
export class AppModule { }
`2. Inject "FakeBackendService" in the AppComponent and start the mockServer.
`typescript
...
import { environment } from 'src/environments/environment';
import { FakeBackendService } from 'ag-mock-server';@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private _fakeBackend: FakeBackendService) {
if(!environment.production) {
this._fakeBackend.startMockServer(); //<-- Actually starts the mock server here..
}
}
...
}
``Free Software, Hell Yeah!