Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

I am develop Angular2 App with ASP.Net Core MVC and ASP.Net Web Api.

Here is my basic architecture.

ASP.Net Core MVC Project (MyProject.Web)

  • Nuget, npm, and bower is used for dependencies. Bower is used to copy the npm dependencies from node_modules to wwwroot/libs/
  • Home/Index controller's action delivers the first page which loads Angular2 and other dependencies.
  • Templates are loaded from ActionMethods i.e. Home/About
  • SystemJS loads the modules.
  • Angular2's http service calls the ASP.Net Web Api Project (a separate project than mvc)

ASP.Net Web Api Project (MyProject.Api) - Each Controllers is designated for CRUD operations of an entity, and responses to Angular2's http

Problem: I am not able to use HTML5 routing and am forced to hash routing because html5 routing calls the server and my MVC project does not have the corresponding controller. So server doesn't return anything.

share|improve this question
    
You should be able to configure your server to support HTML5 pushState. It just needs to return index.html for unknown URLs – Günter Zöchbauer Jan 14 at 14:53
    
First, there is no index.html, as mentioned above the action methods are used for delivering html. Second, What if my AngularApp is requesting a resource (i.e. image, css, js file etc) which exists but is available no more and I want to display an error. But in your solution, the index action is returned? How to deal with it? – Super Coder Jan 14 at 15:18
    
You can return a 404 response (not rewrite to index.html) for requests that try to access resources in the asset directory (or distinguish by other criteria) – Günter Zöchbauer Jan 14 at 15:22
up vote 1 down vote accepted

Problem: I am not able to use HTML5 routing and am forced to hash routing because html5 routing calls the server and my MVC project does not have the corresponding controller. So server doesn't return anything.

Adding # into route path is probably the most common solution in a case like you, but...

Do you have any particular reason for using MVC with Angular?


In my opinion, you don't need MVC - you could just create empty ASP.NET Core project and add into your HTML/Angular app - clean, simple, comfortable and no conflicts between MVC and Angular ;)

Add your files (including index.html) into wwwroot and update your Startup.cs file:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
            app.UseDefaultFiles(); <- Add this line before UseStaticFiles
            app.UseStaticFiles();            
    }
}


Please find more information:

share|improve this answer
    
This is what I have seen most tutorials say. However, I want to take benefit from Razor as well, (thought I haven't so far, but I am think eventually I will) i.e. I will display the static info (info that barely changes frequently) via ViewModel and will not let angular use http calls for that info. What do you say about that use case? – Super Coder Jan 14 at 22:15
    
The answer depends on your design and implementation - if you are going to SPA than Angular will be your main technology and you will not see benefits from MVC. – Lukasz Makowej Jan 14 at 23:04
    
Of course, you could create MVC app (as the main technology) with Angular as an additional (supporting) technology, but I assume you are not interested that direction. – Lukasz Makowej Jan 14 at 23:08
    
About your example and will not let angular use http calls for that info - what the problem? Angular or MVC - the same http request. – Lukasz Makowej Jan 14 at 23:10
    
Currently, I'm working on a project designed to use benefits from both MVC and AngularJS,,, and I didn't notice any use of MVC except overcomplicated design. (Sorry for my English, I hope you understand what I mean). – Lukasz Makowej Jan 14 at 23:15
up vote 1 down vote

If you plan to use on IIS, you can use URL rewriting module. It basically tells web server to rewrite all routing URLs to index.html. .

<?xml version="1.0" encoding="utf-8"?>
<system.webServer>
   <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule"
resourceType="Unspecified"/>
   </handlers>
   <aspNetCore processPath="%LAUNCHER_PATH%" arguments="%LAUNCHER_ARGS%"
stdoutLogEnabled="true" stdoutLogFile=".\logs\stdout"
forwardWindowsAuthToken="false" />
      <rewrite>
         <rules>
            <rule name="Angular 2 pushState routing" stopProcessing="true">
               <match url=".*" />
               <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                  <add input="{REQUEST_FILENAME}" pattern=".*\.[\d\w]+$" negate="true" />
                  <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
               </conditions>
               <action type="Rewrite" url="/index.html" />
            </rule>
         </rules>
      </rewrite>
   </system.webServer>
</configuration>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.