# ag-mock-server

> ### 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);

Latest version **2.4.3** (published 2021-09-20) · 0 weekly downloads

## Install

```sh
npm install ag-mock-server
pnpm add ag-mock-server
yarn add ag-mock-server
bun add ag-mock-server
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.4.3 |
| Published | 2021-09-20 |
| First published | 2021-07-13 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | akshay_aravindh |

## Links

- npm: https://www.npmjs.com/package/ag-mock-server
- npm.io page: https://npm.io/package/ag-mock-server

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 2.4.3 (latest) — 2021-09-20
- 2.4.2 — 2021-09-20
- 2.4.1 — 2021-09-20
- 2.4.0 — 2021-09-20
- 2.3.4 — 2021-09-17
- 2.3.3 — 2021-09-17
- 2.3.2 — 2021-09-17
- 2.3.1 — 2021-09-17
- 2.3.0 — 2021-09-17
- 2.2.9 — 2021-09-17
- 2.2.8 — 2021-09-17
- 2.2.7 — 2021-09-17
- 2.2.6 — 2021-09-17
- 2.2.5 — 2021-09-17
- 2.2.4 — 2021-09-17
- … 15 more at https://npm.io/package/ag-mock-server/versions

## README

# AgMockServer
### _Mock Backend  &  GUI for your swagger(in json format)._

### 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);

### Try the Demo App - [AgMockServerDemo](http://ag-mock-server-demo.s3-website.ap-south-1.amazonaws.com/)

[](https://drive.google.com/uc?export=view&id=11ISv9G7qkNBqH2L0F5DK_FccdxTNwtnM)

[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://bitbucket.org/akshayaravindh1015/ag-mock-server/src/master/)

## Features
- Ability to send pre-configured responses for a specific API.
- An editable light GUI for mockserver.
- State consistency - even when page refreshes.
- Ability to UPLOAD & DOWNLOAD json file - to retain previous state.
- Configurable accross different environments.
- ✨See the Magic after clicking the menu button ✨
> The main goal of AGMockServer is to ease development effort of a UI Developer :)
## Installation
AgMockServer requires [Node.js](https://nodejs.org/) v10+ to run.
```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.](https://firebasestorage.googleapis.com/v0/b/storage-50ed6.appspot.com/o/AgMockServer%2Fimages%2FAG_Mockserver_for_Angular.jpeg?alt=media&token=96b092e1-f601-4232-8fce-108029f6fc44)
### How to use for Angular:
### For Angular 9 or more
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 { }

```

### For Angular 8 or less - 2 steps (Or 🤔 if the above approach gives you errors use this one).
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..
    }
  }

...
}

```
---
## 2. For All Other Web Apps.
##### AgMockServer is basically mockserver running on port xxxx with configrable apis from json:
![Image - Flow diagram of Ag Mock Interceptor as Fake Bakend.](https://firebasestorage.googleapis.com/v0/b/storage-50ed6.appspot.com/o/AgMockServer%2Fimages%2FAG_Mockserver_other_web_apps.jpeg?alt=media&token=860a198e-8dc3-434b-89f5-e5f64cfc4286)
### How to use for all other web pages:
- Developement still in progress - expected release in version 3.0.
***


## Development
Have suggestions or found bugs in the app? Great. Please share your feedback in the below articles:
[Medium](https://medium.com/@akshaynetha1015/agmockserver-how-to-use-angular-mock-server-fake-backend-a2ac1570b246) || [Hashnode](https://hashnode.com/draft/60f97b5962e20b58c1c8f9b5) || Connect on [linkedin](https://www.linkedin.com/in/akshay-kumar-pasunuri-91043216a/);

## License
MIT

**Free Software, Hell Yeah!**

---
_Source: https://npm.io/package/ag-mock-server · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._