# ng-miniprofiler

> This package contains an Http interceptor for using MiniProfiler with Angular.

Latest version **0.0.4** (published 2021-01-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-miniprofiler
pnpm add ng-miniprofiler
yarn add ng-miniprofiler
bun add ng-miniprofiler
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2021-01-08 |
| First published | 2021-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 148.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Arjunsinh Jadeja |
| Maintainers | arjun2364 |
| Keywords | ng-miniprofiler, ng-miniprofiler-angular, angular, miniprofiler, mini-profiler, performance-tool |

## Links

- npm: https://www.npmjs.com/package/ng-miniprofiler
- npm.io page: https://npm.io/package/ng-miniprofiler

## Dependencies (1)

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

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2021-01-08
- 0.0.3 — 2021-01-06

## README

# NgMiniProfiler

This package contains an Http interceptor for using MiniProfiler with Angular.

## Getting started

To use it in your app, simply import the MiniProfilerModule and provide the interceptor.

```ts
import { MiniProfilerModule, MiniProfilerInterceptor } from 'ng-miniprofiler';

@NgModule({
  [...]
  imports: [
    MiniProfilerModule.forRoot({
      baseUri: 'http://localhost:12345',
      colorScheme: 'Auto',
      maxTraces: 15,
      position: 'BottomLeft',
      toggleShortcut: 'Alt+M',
      enabled: true,
      enableGlobalMethod: true
    }),
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MiniProfilerInterceptor, multi: true }
  ]
})
export class YourModule { }
```

### Configurations

Ng-miniprofiler offers a couple of configurations.

| Config              | Description                                                                            | Default |
| ------------------- |:---------------------------------------------------------------------------------------|---------|
| baseUri             | The base uri of the server hosting your MiniProfiler results and `include.min.js` file. Depending on your configs, the results may be under the `profiling` route. The value should then be `http://localhost:12345/profiling`.                                                             | `''`    |
| colorScheme         | The theme. Either `Light`, `Dark` or `Auto`.                                           | `Auto`  |
| maxTraces           | Maximum number of traces shown.                                                        | `15`    |
| position            | Where the popup should be placed. Either `Left`, `Right`, `BottomLeft`, `BottomRight`. | `Left`  |
| toggleShortcut      | The shortcut for toggling the popup.                                                   | `Alt+M` |
| showControls        | Whether or not the controls (minimize and clear) should be shown.                      | `false` |
| enabled             | Whether or not miniprofiler is enabled.                                                | `true`  |
| enableGlobalMethod  | Whether or not an `enableMiniProfiler` method should be added to the window object. Can be useful in a production environment where you want MiniProfiler to be disabed by default. | `true` |


## Backend

If you are using asp.net core then you need to add two nuget packages :- MiniProfiler.AspNetCore.Mvc, MiniProfiler.EntityFrameworkCore

    services.AddMiniProfiler(options =>
            {
                (options.Storage as MemoryCacheStorage).CacheDuration = TimeSpan.FromMinutes(60);

                // (Optional) Control which SQL formatter to use, InlineFormatter is the default
                options.SqlFormatter = new StackExchange.Profiling.SqlFormatters.InlineFormatter();

                // (Optional) You can disable "Connection Open()", "Connection Close()" (and async variant) tracking.
                // (defaults to true, and connection opening/closing is tracked)
                options.TrackConnectionOpenClose = true;

                // (Optional) Use something other than the "light" color scheme.
                // (defaults to "light")
                options.ColorScheme = StackExchange.Profiling.ColorScheme.Auto;

                // The below are newer options, available in .NET Core 3.0 and above:

                // (Optional) You can disable MVC filter profiling
                // (defaults to true, and filters are profiled)
                options.EnableMvcFilterProfiling = true;

                // (Optional) You can disable MVC view profiling
                // (defaults to true, and views are profiled)
                options.EnableMvcViewProfiling = true;
            }).AddEntityFramework();

You can check out the official documentation of miniprofiler(https://miniprofiler.com/dotnet/AspDotNetCore)

And if your server lives on a different domain from your Angular app, you may run into two CORS issues.

Firstly, you need to allow your app to request MiniProfiler results. For an ASP.NET Web API solution, that's one way of doing so (in the `global.asax.cs` file).

```cs
protected void Application_BeginRequest() 
{ 
    var context = HttpContext.Current; 
    if (HttpContext.Current.Request.Path.StartsWith("/mini-profiler-resources")) 
    { 
        var origin = context.Request.Headers.Get("Origin"); 
        if (origin != null) 
        { 
            context.Response.Headers.Add("Access-Control-Allow-Origin", origin); 
        } 
        if (context.Request.HttpMethod == "OPTIONS") 
        { 
            context.Response.StatusCode = 200; 
            context.Response.Headers.Add("Access-Control-Allow-Headers", "Content-Type"); 
            context.Response.Headers.Add("Access-Control-Allow-Methods", "OPTIONS, GET"); 
        } 
    } 
}
```

Secondly, your server needs to let your Angular app access the `X-MiniProfiler-Ids` headers. You may do that by adding an ActionFilter.

```cs
public class MiniProfilerCorsHeaderFilter : ActionFilterAttribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
        actionExecutedContext.Response.Headers.Add("Access-Control-Expose-Headers", "X-MiniProfiler-Ids");
    }
}
```
or by adding in CORS.

```cs
public class MiniProfilerCorsHeaderFilter : ActionFilterAttribute
{
    app.UseCors(builder =>
                builder.WithOrigins("http://example.com")
                .AllowAnyMethod()
                .AllowAnyHeader()
                .WithExposedHeaders("x-miniprofiler-ids"));
}
```

## Enable mini-profiler manually

If you set the `enableGlobalMethod` configuration to `true`, you may call the `enableMiniProfiler` from your browser's devtools console to enable MiniProfiler manually.

```ts
> enableMiniProfiler();
>
> MiniProfiler loaded.
```

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