title: Angular 2 - use cshtml instead of html in Asp.Net mvc 4x
body: <p>I've created asp.net mvc application using angular 2 following this <a href="https://angular.io/guide/visual-studio-2015" rel="nofollow noreferrer">template</a></p>
  
  <p><strong>My app:</strong></p>
  
  <p><strong><em>index.cshtml</em></strong></p>
  
  <pre><code>@{
      Layout = null;
      ViewBag.Title = "Home Page";
  }
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;base href="@Url.Content("~/")"&gt;
      &lt;title&gt;MVC 4 Angular 4&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;script src="dist/scripts/packages/core-js/client/shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="dist/scripts/packages/zone.js/dist/zone.js"&gt;&lt;/script&gt;
      &lt;script src="dist/scripts/packages/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          System.import('dist/scripts/main.js').catch(function (err) {
              console.error(err);
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;my-app&gt;Loading...&lt;/my-app&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong><em>main.ts</em></strong></p>
  
  <pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p><strong><em>app.module.ts</em></strong></p>
  
  <pre><code>import { NgModule } from "@angular/core";
  import { BrowserModule } from "@angular/platform-browser";
  import { FormsModule } from '@angular/forms';
  import { RouterModule } from '@angular/router';
  import { LocationStrategy, HashLocationStrategy } from '@angular/common';
  
  import { AppComponent } from "./Components/app";
  import { Page1 } from "./Components/page1";
  import { Page2 } from "./Components/page2";
  
  @NgModule({
      imports: [
          BrowserModule,
          FormsModule,
          RouterModule.forRoot([
              {
                  path: 'page1',
                  component: Page1
              },
              {
                  path: 'page2',
                  component: Page2
              },
              {
                  path: '',
                  redirectTo: '/page1',
                  pathMatch: 'full'
              }
          ])
          // other imports here
      ],
      exports: [RouterModule],
      declarations: [
          AppComponent,
          Page1,
          Page2
      ],
      providers: [],
      bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong><em>app.ts</em></strong></p>
  
  <pre><code>import { Component } from "@angular/core";
  
  @Component({
      selector: "my-app",
      template: `
              &lt;h1&gt;{{app}}&lt;/h1&gt;
              &lt;nav id="main-menu"&gt;
                   &lt;a class="menu-item" routerLink="/page1" routerLinkActive="active"&gt;Page1&lt;/a&gt;
                  &lt;a class="menu-item" routerLink="/page2" routerLinkActive="active"&gt;Page2&lt;/a&gt;
              &lt;/nav&gt;
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
              `
  })
  export class AppComponent {
      app= "App"
  }
  </code></pre>
  
  <p><strong><em>page1.ts</em></strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'page1',
      template: "&lt;div&gt;page1&lt;/div&gt;",
      styleUrls: []
  })
  export class Page1 { }
  </code></pre>
  
  <p>So in order angular 2 to work on asp.net mvc project, according to the documentation, the <code>web.config</code> should contains this code:</p>
  
  <pre><code>&lt;system.webServer&gt;
    &lt;rewrite&gt;
      &lt;rules&gt;
        &lt;rule name="Angular Routes" stopProcessing="true"&gt;
          &lt;match url=".*" /&gt;
          &lt;conditions logicalGrouping="MatchAll"&gt;
            &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /&gt;
            &lt;add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /&gt;
          &lt;/conditions&gt;
          &lt;action type="Rewrite" url="/src/" /&gt;
        &lt;/rule&gt;
      &lt;/rules&gt;
    &lt;/rewrite&gt;
  &lt;/system.webServer&gt;
  </code></pre>
  
  <p>So, after this, it works just fine when I use static html, or inline html into the component.</p>
  
  <p><a href="https://i.stack.imgur.com/ExAQI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ExAQI.png" alt="enter image description here"></a></p>
  
  <p>What I want is to use cshtml instead of html, so my component will look like this: </p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'page1',
      templateUrl: "home/about",
      styleUrls: []
  })
  export class Page1 { }
  </code></pre>
  
  <p><strong><em>home/about</em></strong> is in my home controller:</p>
  
  <pre><code>public ActionResult About()
  {
    ViewBag.Message = "Your application description page.";
    return View();
  }
  </code></pre>
  
  <p>But then, I get this:</p>
  
  <p><a href="https://i.stack.imgur.com/J8myN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J8myN.png" alt="enter image description here"></a></p>
  
  <p>If I remove the <code>&lt;system.webServer&gt;</code> from the <code>web.config</code> <strong>it works just fine</strong> except when I refresh the page (press f5), then I get this:</p>
  
  <p><a href="https://i.stack.imgur.com/MESXV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MESXV.png" alt="enter image description here"></a></p>
  
  <p>At the very end of the <a href="https://angular.io/guide/visual-studio-2015" rel="nofollow noreferrer">documentation</a> you can see this paragraph:</p>
  
  <blockquote>
    <p>The match url, , will rewrite every request. You'll
    have to adjust this if you want some requests to get through, such as
    web API requests.</p>
  </blockquote>
  
  <p>So my question is how to configure the <code>web.config</code>, or something else to avoid this issue ?</p>