# MiniProfiler with non-MVC Angular app and WebAPI -- how to get started?

**URL:** <https://community.miniprofiler.com/t/miniprofiler-with-non-mvc-angular-app-and-webapi-how-to-get-started/541>\
**Category:** .NET\
**Created:** [July 7, 2016, 3:19pm UTC](https://community.miniprofiler.com/t/miniprofiler-with-non-mvc-angular-app-and-webapi-how-to-get-started/541 "2016-07-07T15:19:21Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![SeanKilleen](https://sea2.discourse-cdn.com/flex016/user_avatar/community.miniprofiler.com/seankilleen/32/896_2.png) [@SeanKilleen](https://community.miniprofiler.com/u/SeanKilleen)\
**Post date:** [July 7, 2016, 3:19pm UTC](https://community.miniprofiler.com/t/miniprofiler-with-non-mvc-angular-app-and-webapi-how-to-get-started/541/1 "2016-07-07T15:19:21Z")

</div>

Cross-posted [On StackOverflow](http://stackoverflow.com/questions/38249465/how-do-i-include-the-javascript-files-for-miniprofiler-in-an-angularjs-app).

Hi all,

I’m trying to throw MiniProfiler into my current stack. I think I’m mostly setup, but am missing the UI approach and would like recommendations on the best way to proceed.

# Current Stack

- SQL for DB (including MiniProfiler tables)
- EF 6
- WebAPI 2 API app
- Angular 1.x. app for the UI (separate app, no MVC backing it) – I think it’s 1.5.x at this point.

So, the current method of `RenderIncludes()` isn’t available to me.

What’s the best method to include the JS files and set them up to retrieve the information from the SQL Server storage? I know that the files are included in the UI repo, but I didn’t see docs for explicit configuration.

# What I’ve Tried So Far – Web API App

- Installed the `MiniProfiler` and `MiniProfiler.EF6` packages.

### Web.Config – Added Handler

(not sure if this is necessary):

```
<add name="MiniProfiler" path="mini-profiler-resources/*" verb="*" type="System.Web.Routing.UrlRoutingModule" resourceType="Unspecified" preCondition="integratedMode" />

```

### Added a CORS filter to expose the MiniProfiler IDs to my client app:

```
public class AddMiniProfilerCORSHeaderFilter : ActionFilterAttribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
        actionExecutedContext.Response.Headers.Add("Access-Control-Expose-Headers", "X-MiniProfiler-Ids");
    }
}

```

### Add that filter as part of startup:

```
config.Filters.Add(new AddMiniProfilerCORSHeaderFilter());`

```

### In Global.asax, added to Application\_Start():

```
var connectionString = ConfigurationReader.GetConnectionString(Constants.ConfigSettings.CONNECTION_STRING_NAME);

MiniProfiler.Settings.Storage = new SqlServerStorage(connectionString);
MiniProfilerEF6.Initialize();

```

### Update the begin/end requests:

```
   protected void Application_BeginRequest()
    {
        if (Request.IsLocal || ConfigurationReader.GetAppSetting(Constants.ConfigSettings.USE_PROFILER, false))
        {
            var sessionId = Guid.NewGuid().ToString();
            MiniProfiler.Start(sessionId);
        }
    }

    protected void Application_EndRequest()
    {
        MiniProfiler.Stop();
    }

```

# What I’ve tried so far – client (Angular) App

- Snagged the UI files from [the Github Repo](http://github.com/miniprofiler/ui)
- Copied the UI directory to my project’s output

### Reference the CSS:

```
<link rel="stylesheet" href="js/lib/miniprofiler/includes.css" />

```

### Call the JavaScript

```
  <script async type="text/javascript" 
    id="mini-profiler" 
    src="js/lib/miniprofiler/includes.js?v=1.0.0.0" 
    data-current-id="" 
    data-path="https://localhost:44378/api/profiler/" 
    data-children="true" 
    data-ids="" 
    data-version="1.0.0.0" 
    data-controls="true" 
    data-start-hidden="false" 
    data-trivial-milliseconds="5">
  </script>

```

# Current Status

When I do these things, it looks like it just can’t find the appropriate WebAPI controller to render the result. If I can figure out where that controller is or replicate it (as I’m attempting to do currently) I think I’ll be in business.  
Thanks in advance for any help you can provide!