title: MiniProfiler: How do I profile an AngularJS + WebAPI app?
body: <p>Cross-posted <a href="http://community.miniprofiler.com/t/miniprofiler-with-non-mvc-angular-app-and-webapi-how-to-get-started/541" rel="noreferrer">on the MiniProfiler community</a>.</p>
  
  <p>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.</p>
  
  <h1>Current Stack</h1>
  
  <ul>
  <li>SQL for DB (including MiniProfiler tables)</li>
  <li>EF 6</li>
  <li>WebAPI 2 API app</li>
  <li>Angular 1.x. app for the UI (separate app, no MVC backing it) -- I think it's 1.5.x at this point.</li>
  </ul>
  
  <p>So, the current method of <code>RenderIncludes()</code> isn't available to me.</p>
  
  <p>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 <a href="https://github.com/MiniProfiler/ui" rel="noreferrer">in the UI repo</a>, but I didn't see docs for explicit configuration.</p>
  
  <h1>What I've Tried So Far -- Web API App</h1>
  
  <ul>
  <li>Installed the <code>MiniProfiler</code> and <code>MiniProfiler.EF6</code> packages.</li>
  </ul>
  
  <h3>Web.Config -- Added Handler</h3>
  
  <p>(not sure if this is necessary): </p>
  
  <pre><code>&lt;add name="MiniProfiler" path="mini-profiler-resources/*" verb="*" type="System.Web.Routing.UrlRoutingModule" resourceType="Unspecified" preCondition="integratedMode" /&gt;
  </code></pre>
  
  <h3>Added a CORS filter to expose the MiniProfiler IDs to my client app:</h3>
  
  <pre><code>public class AddMiniProfilerCORSHeaderFilter : ActionFilterAttribute
  {
      public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
      {
          actionExecutedContext.Response.Headers.Add("Access-Control-Expose-Headers", "X-MiniProfiler-Ids");
      }
  }
  </code></pre>
  
  <h3>Add that filter as part of startup:</h3>
  
  <pre><code>config.Filters.Add(new AddMiniProfilerCORSHeaderFilter());`
  </code></pre>
  
  <h3>In Global.asax, added to Application_Start():</h3>
  
  <pre><code>var connectionString = ConfigurationReader.GetConnectionString(Constants.ConfigSettings.CONNECTION_STRING_NAME);
  
  MiniProfiler.Settings.Storage = new SqlServerStorage(connectionString);
  MiniProfilerEF6.Initialize();
  </code></pre>
  
  <h3>Update the begin/end requests:</h3>
  
  <pre><code>   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();
      }
  </code></pre>
  
  <h1>What I've tried so far -- client (Angular) App</h1>
  
  <ul>
  <li>Snagged the UI files from <a href="http://github.com/miniprofiler/ui" rel="noreferrer">the Github Repo</a></li>
  <li>Copied the UI directory to my project's output</li>
  </ul>
  
  <h3>Reference the CSS:</h3>
  
  <pre><code>&lt;link rel="stylesheet" href="js/lib/miniprofiler/includes.css" /&gt;
  </code></pre>
  
  <h3>Call the JavaScript</h3>
  
  <pre><code>  &lt;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"&gt;
    &lt;/script&gt;
  </code></pre>
  
  <h1>Current Status</h1>
  
  <p>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.</p>