blocks|key|2886762|text|您是否使用过：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2886763|指令:组件中的RouterOutlet，RouterLink。|2886764|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Did you use: 

directives: [RouterOutlet, RouterLink] in the component.

blocks|key|2886796|text|您正在寻找的功能是URL重写。有两种可能的方法来处理它。经典的方法是让IIS来完成这项工作，如下所述：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2886797|https://stackoverflow.com/a/25955654/3207433|offset|length|2886798|如果您不想依赖IIS，您可以在ASP.NET+5中间件中处理此问题，如我的回答所示：|2886799|https://stackoverflow.com/a/34882405/3207433|2886800|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|18|0|0|0|0|18|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|I]]]]

The feature you're looking for is URL rewrite. There are two possible ways to handle it. The classic way is to let IIS do the work, as described here:

<a href="https://stackoverflow.com/a/25955654/3207433">https://stackoverflow.com/a/25955654/3207433</a>

If you don't want to depend on IIS, you can instead handle this in the ASP.NET 5 middleware, as shown in my answer here:

<a href="https://stackoverflow.com/a/34882405/3207433">https://stackoverflow.com/a/34882405/3207433</a>

blocks|key|2886830|text|您需要在ASP.NET+MVC中使用此路由。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2886831|app.UseMvc(routes+=>
{
+++++routes.MapRoute("Default",+"{*url}",++new+{+@controller+=+"App",+@action+=+"Index"+});
});|code-block|syntax|javascript|2886832|然后，您需要使用basePath选项设置SystemJS|2886833|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You need use this routing in ASP.NET MVC

<pre><code>app.UseMvc(routes =&gt;
{
 routes.MapRoute("Default", "{*url}", new { @controller = "App", @action = "Index" });
});
</code></pre>

Then you need set up SystemJS with basePath options

blocks|key|122766|text|您看到的问题与客户端的Angular路由和MVC服务器端路由之间的差异有关。您实际上收到了一个404+Page+Not+Found错误，因为服务器没有该路由的控制器和操作。我怀疑你没有处理错误，这就是为什么它看起来好像什么都没有发生。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|122767|当您重新加载http://localhost:5000/aboutus时，或者如果您试图通过快捷方式直接链接到该网址，或者通过在地址栏中键入该网址(深度链接)，它会向服务器发送一个请求。ASP.NET+MVC将尝试解析该路由，在您的示例中，它将尝试加载aboutusController并运行Index操作。当然，这不是您想要的，因为您的aboutus路由是一个角度组件。|122768|您应该做的是为Angular+MVC路由器创建一种方法，以便将应由ASP.NET解析的URL传递回客户端。|122769|在您的Startup.cs文件的Configure()方法中，向现有路由添加一个"spa-fallback“路由：|122770|app.UseMvc(routes+=>
{
++++routes.MapRoute(
++++++++name:+"default",
++++++++template:+"{controller=Home}/{action=Index}/{id?}");

++++//+when+the+user+types+in+a+link+handled+by+client+side+routing+to+the+address+bar+
++++//+or+refreshes+the+page,+that+triggers+the+server+routing.+The+server+should+pass+
++++//+that+onto+the+client,+so+Angular+can+handle+the+route
++++routes.MapRoute(
++++++++name:+"spa-fallback",
++++++++template:+"{*url}",
++++++++defaults:+new+{+controller+=+"Home",+action+=+"Index"+}
++++);
});|code-block|syntax|javascript|122771|通过创建一个指向最终加载您的Angular应用程序的Controller和View的通用路由，这将允许将服务器未处理的URL传递到客户端以进行正确的路由。|122772|entityMap^0|1B|I|0|6|T|3I|H|42|5|4P|7|0|0|3|A|G|B|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|16|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|1C|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1D|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|T|$]]

The problem you're seeing has to do with the difference between Angular routing on the client and MVC server-side routing. You are actually getting a <code>404 Page Not Found</code> error because the server does not have a Controller and Action for that route. I suspect you are not handling errors which is why it appears as if nothing happens.

When you reload <code>http://localhost:5000/aboutus</code> or if you were to try to link to that URL directly from a shortcut or by typing it into the address bar (deep linking), it sends a request to the server. ASP.NET MVC will try to resolve that route and in your case it will try to load the <code>aboutusController</code> and run the <code>Index</code> action. Of course, that's not what you want, because your <code>aboutus</code> route is an Angular component.

What you should do is create a way for the ASP.NET MVC router to pass URLs that should be resolved by Angular back to the client.

In your <code>Startup.cs</code> file, in the <code>Configure()</code> method, add an "spa-fallback" route to the existing routes:

<pre><code>app.UseMvc(routes =&gt;
{
 routes.MapRoute(
 name: "default",
 template: "{controller=Home}/{action=Index}/{id?}");

 // when the user types in a link handled by client side routing to the address bar 
 // or refreshes the page, that triggers the server routing. The server should pass 
 // that onto the client, so Angular can handle the route
 routes.MapRoute(
 name: "spa-fallback",
 template: "{*url}",
 defaults: new { controller = "Home", action = "Index" }
 );
});
</code></pre>

By creating a catch-all route that points to the Controller and View that ultimately loads your Angular app, this will allow URLs that the server does not handle to be passed onto the client for proper routing.

blocks|key|122919|text|应用@ZOXEXIVO的解决方案，然后在您的_Layout.cshtml中添加以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|122920|<head>
++++<base+href="/"/>
++++.....
</had>|code-block|syntax|javascript|122921|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

apply the @ZOXEXIVO's solution then, in your _Layout.cshtml add this:

<pre><code>&lt;head&gt;
 &lt;base href="/"/&gt;
 .....
&lt;/had&gt;
</code></pre>

blocks|key|120818|text|在您的Startup.cs中，将此代码添加到Configure方法。这必须在其他app语句之前。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|120819|app.Use(async+(context,+next)+=>+{
++++await+next();

++++if+(context.Response.StatusCode+==+404+&&+!Path.HasExtension(context.Request.Path.Value))+{
++++++++context.Request.Path+=+"/index.html";+//+Put+your+Angular+root+page+here+
++++++++await+next();
++++}
});|code-block|syntax|javascript|120820|entityMap^0|3|A|M|9|14|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

In your <code>Startup.cs</code> add this to the <code>Configure</code> method. This must be before other <code>app</code> statements.

<pre><code>app.Use(async (context, next) =&gt; {
 await next();

 if (context.Response.StatusCode == 404 &amp;&amp; !Path.HasExtension(context.Request.Path.Value)) {
 context.Request.Path = "/index.html"; // Put your Angular root page here 
 await next();
 }
});
</code></pre>

blocks|key|2675674|text|我最喜欢的解决方案是将以下代码添加到Global.asax.cs中，它可以非常流畅和可靠地解决这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2675675|+++++private+const+string+RootUrl+=+"~/Home/Index";
+++++//+You+can+replace+"~Home/Index"+with+whatever+holds+your+app+selector+(<my-app></my-app>)
+++++//+such+as+RootUrl="index.html"+or+any+controller+action+or+browsable+route

+++++protected+void+Application_BeginRequest(Object+sender,+EventArgs+e)
++++++++{
++++++++++++//+Gets+incoming+request+path
++++++++++++var+path+=+Request.Url.AbsolutePath;

++++++++++++//+To+allow+access+to+api+via+url+during+testing+(if+you're+using+api+controllers)+-+you+may+want+to+remove+this+in+production+unless+you+wish+to+grant+direct+access+to+api+calls+from+client...
++++++++++++var+isApi+=+path.StartsWith("/api",+StringComparison.InvariantCultureIgnoreCase);
++++++++++++//+To+allow+access+to+my+.net+MVCController+for+login
++++++++++++var+isAccount+=+path.StartsWith("/account",+StringComparison.InvariantCultureIgnoreCase);
++++++++++++if+(isApi+%7C%7C+isAccount)
++++++++++++{
++++++++++++++++return;
++++++++++++}

++++++++++++//+Redirects+to+the+RootUrl+you+specified+above+if+the+server+can't+find+anything+else
++++++++++++if+(!System.IO.File.Exists(Context.Server.MapPath(path)))
++++++++++++++++Context.RewritePath(RootUrl);
++++++++}|code-block|syntax|javascript|2675676|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My favorite solution is to add the following code to Global.asax.cs which very smoothly and reliably takes care of the issue:

<pre><code> private const string RootUrl = "~/Home/Index";
 // You can replace "~Home/Index" with whatever holds your app selector (&lt;my-app&gt;&lt;/my-app&gt;)
 // such as RootUrl="index.html" or any controller action or browsable route

 protected void Application_BeginRequest(Object sender, EventArgs e)
 {
 // Gets incoming request path
 var path = Request.Url.AbsolutePath;

 // To allow access to api via url during testing (if you're using api controllers) - you may want to remove this in production unless you wish to grant direct access to api calls from client...
 var isApi = path.StartsWith("/api", StringComparison.InvariantCultureIgnoreCase);
 // To allow access to my .net MVCController for login
 var isAccount = path.StartsWith("/account", StringComparison.InvariantCultureIgnoreCase);
 if (isApi || isAccount)
 {
 return;
 }

 // Redirects to the RootUrl you specified above if the server can't find anything else
 if (!System.IO.File.Exists(Context.Server.MapPath(path)))
 Context.RewritePath(RootUrl);
 }
</code></pre>

blocks|key|120170|text|从angular+routing调用Home/Index时，可以同时使用这两个路由。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|120171|写|120172|Home/Index.cshtml
<my-app></my-app>

app.routing.ts
++++const+routes:+Routes+=+[
++++++++{+path:+'',+redirectTo:+'/Home/Index',+pathMatch:+'full'+},
++++++++{+path:+'Home/Index',+component:+DashboardComponent+}
++++]|code-block|syntax|javascript|120173|因此，当URL将是Home/Index时，将加载活动url的组件，因此它将加载仪表板组件。|120174|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can use both the routing 
when you call Home/Index from angular routing.

write 

<pre><code>Home/Index.cshtml
&lt;my-app&gt;&lt;/my-app&gt;

app.routing.ts
 const routes: Routes = [
 { path: '', redirectTo: '/Home/Index', pathMatch: 'full' },
 { path: 'Home/Index', component: DashboardComponent }
 ]
</code></pre>

So When URL will be Home/Index
 will load the component of active url so it will load dashboard component.

blocks|key|2675699|text|下面是解决这个问题的另外两个选项。您可以将散列位置策略添加到您的应用程序模块。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2675700|import+{+LocationStrategy,+HashLocationStrategy+}+from+'@angular/common';

@NgModule({
imports:+[....+],
declarations:+[...],
bootstrap:+[AppComponent],
providers:+[
{
++provide:+LocationStrategy,
++useClass:+HashLocationStrategy
}
]
})
export+class+AppModule+{+}|code-block|syntax|javascript|2675701|此选项仅适用于Angular2应用程序中位于家庭ASP控制器上的部分|2675702|您的第二个选择是向您的ASP控制器添加与您的Angular+2应用程序路由匹配的路由，并返回"Index“视图|2675703|public+class+HomeController+:+Controller
{
++++public+IActionResult+Index()
++++{
++++++++return+View();
++++}

++++[ActionName("Angular-Route1")]
++++public+IActionResult+AngularRoute1()
++++{
++++++++return+View("Index");
++++}

++++public+IActionResult+Route2()
++++{
++++++++return+View("Index");
++++}
}|2675704|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Here are two more options for solving this problem. You can either add the hash location strategy to your app module.

<pre><code>import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
imports: [.... ],
declarations: [...],
bootstrap: [AppComponent],
providers: [
{
 provide: LocationStrategy,
 useClass: HashLocationStrategy
}
]
})
export class AppModule { }
</code></pre>

This option will only work for the parts of your Angular2 app that live on the Home ASP Controller

Your second option is to add routes to your ASP Controller that match your Angular 2 app routes and return the "Index" View

<pre><code>public class HomeController : Controller
{
 public IActionResult Index()
 {
 return View();
 }

 [ActionName("Angular-Route1")]
 public IActionResult AngularRoute1()
 {
 return View("Index");
 }

 public IActionResult Route2()
 {
 return View("Index");
 }
}
</code></pre>

blocks|key|122870|text|我可没那么走运|type|unstyled|depth|inlineStyleRanges|entityRanges|data|122871|+routes.MapRoute("Default",+"{*url}",++
++++++++++++++++++new+{+@controller+=+"App",+@action+=+"RedirectIndex"+});|code-block|syntax|javascript|122872|去工作。对于任何客户端路由，我仍然可以得到404。|122873|122874|+更新：|blockquote|offset|length|style|BOLD|122875|122876|弄清楚为什么通用路由不起作用:我定义了一个属性route+([Route("api/RedirectIndex")])，虽然普通路由可以通过备用路由直接访问，但它没有触发。删除属性route可以使其正常工作。|CODE|122877|122878|另一种似乎与通用路由处理程序一样简单的解决方案是，只需创建一个在Configure()中的中间件管道末尾触发的自定义处理程序|122879|app.UseMvc(routes+=>
{
++++routes.MapRoute(
++++++++name:+"default",
++++++++template:+"{controller=Home}/{action=Index}/{id?}");

});

//handle+client+side+routes
app.Run(+async+(context)+=>
{
++++++++context.Response.ContentType+=+"text/html";
++++++++await+context.Response.SendFileAsync(Path.Combine(env.WebRootPath,"index.html"));

});|122880|这基本上就是一个包罗万象的路由，如果没有其他处理程序拾取请求，则只需通过现有的URL请求发送index.html即可。|122881|即使与IIS+Rewrite+rules结合使用，这也能很好地工作(在这种情况下，上面的代码永远不会被解雇。|122882|写了一篇关于这个主题的博客文章：|122883|122884|Handling+HTML5+Client+Route+Fallbacks+in+ASP.NET+Core|unordered-list-item|122885|122886|entityMap|0|LINK|mutability|MUTABLE|url|https://weblog.west-wind.com/posts/2017/Apr/27/IIS-and-ASPNET-Core-Rewrite-Rules-for-AspNetCoreModule#Html5Routing|1|https://weblog.west-wind.com/posts/2017/Aug/07/Handling-HTML5-Client-Route-Fallbacks-in-ASPNET-Core^0|0|0|0|0|1|3|0|0|U|S|0|0|W|B|0|0|0|3|H|0|0|0|0|0|1H|1|0|0^^$0|@$1|2|3|4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1O|8|@$M|1P|N|1Q|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1S|8|@$M|1T|N|1U|O|T]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1W|8|@$M|1X|N|1Y|O|T]]|9|@]|A|$]]|$1|X|3|Y|5|D|7|1Z|8|@]|9|@]|A|$E|F]]|$1|Z|3|10|5|6|7|20|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|21|8|@]|9|@$M|22|N|23|1|24]]|A|$]]|$1|13|3|14|5|6|7|25|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|26|8|@]|9|@]|A|$]]|$1|16|3|17|5|18|7|27|8|@]|9|@$M|28|N|29|1|2A]]|A|$]]|$1|19|3|-4|5|6|7|2B|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]]|1B|$1C|$5|1D|1E|1F|A|$1G|1H]]|1I|$5|1D|1E|1F|A|$1G|1J]]]]

I'm not having any luck getting 

<pre><code> routes.MapRoute("Default", "{*url}", 
 new { @controller = "App", @action = "RedirectIndex" });
</code></pre>

to work. I still get a 404 with any client side route.

<blockquote>
 Update: 
 Figured out why the catch-all route wasn't working: I had an attribute route defined (<code>[Route("api/RedirectIndex")]</code>) and while the plain route can be directly accessed with the fallback route it didn't fire. Removing the attribute route made it work.
</blockquote>

Another solution that seems to work just as easy as the catch-all route handler is to just create a custom handler that fires at the end of the middleware pipeline in <code>Configure()</code>:

<pre><code>app.UseMvc(routes =&gt;
{
 routes.MapRoute(
 name: "default",
 template: "{controller=Home}/{action=Index}/{id?}");

});

//handle client side routes
app.Run( async (context) =&gt;
{
 context.Response.ContentType = "text/html";
 await context.Response.SendFileAsync(Path.Combine(env.WebRootPath,"index.html"));

});
</code></pre>

This basically ends up being the catch-all route that simply sends index.html out over the existing URL request if there was no other handler that picked up the request.

This works nicely even in combination with <a href="https://weblog.west-wind.com/posts/2017/Apr/27/IIS-and-ASPNET-Core-Rewrite-Rules-for-AspNetCoreModule#Html5Routing" rel="nofollow noreferrer">IIS Rewrite rules</a> (in which case the above just won't ever get fired.

Wrote up a blog post on this topic:

<ul>
<li><a href="https://weblog.west-wind.com/posts/2017/Aug/07/Handling-HTML5-Client-Route-Fallbacks-in-ASPNET-Core" rel="nofollow noreferrer">Handling HTML5 Client Route Fallbacks in ASP.NET Core</a></li>
</ul>

blocks|key|2887124|text|上面选择的解决方案对我不起作用，在遵循了对T的所有评论后，我也得到了404。我在MVC5应用程序中使用angular5应用程序。我使用默认的索引登录页作为angular5的起点。我的angular应用程序位于一个名为mvcroot/ClientApp/的文件夹中，但在构建时，它会将分布式文件放在mvcroot/Dist/中，方法是使用“outDir”更改.angular-cli.json文件中的一个设置："../Dist“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2887125|不过，这个解决方案确实有效。|2887126|这样，只有Dist目录中的路由才会发生故障。现在，您可以每次点击刷新和angular5应用程序重新加载的确切路线，同时保持在正确的组件上。一定要把所有的东西都放在第一位。另外，如果在angular5中使用令牌身份验证，请将令牌保存到window.localStorage+(或angular5应用程序之外的其他机制)，因为点击刷新将清除所有内存，您可能会将令牌存储在全局变量中。这使用户在刷新时不必再次登录。|2887127|routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

++++++++++++routes.MapRoute(
++++++++++++++++"Catch+All",
++++++++++++++++"dist/{*url}",
++++++++++++new+{+controller+=+"Home",+action+=+"Index",+id+=+UrlParameter.Optional+});

++++++++++++routes.MapRoute(
++++++++++++++++name:+"Default",
++++++++++++++++url:+"{controller}/{action}/{id}",
++++++++++++++++defaults:+new+{+controller+=+"Home",+action+=+"Index",+id+=+UrlParameter.Optional+}


++++++++++++);|code-block|syntax|javascript|2887128|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The above selected solution did not work for me I also got 404 after following all the comments to the T. I am using an angular5 app in an MVC5 app. I use the default index landing page as the start for the angular5. My angular app is in a folder named mvcroot/ClientApp/ but on ng build it puts the distributed files in mvcroot/Dist/ by altering one setting in the .angular-cli.json file with "outDir": "../Dist"

This solution did work though. 

This way only routes in the Dist directory get the fall over. Now you can hit refresh every time and exact route for the angular5 app reloads while staying on the correct component. Be sure to put the catch all first. On a side note, if using a token auth in your angular5, save the token to window.localStorage (or some other mechanism outside your angular5 app) as hitting refresh will wipe out all memory where you you maybe storing your token in a global variable. This keeps the user from having to login again if they refresh.

<pre><code>routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

 routes.MapRoute(
 "Catch All",
 "dist/{*url}",
 new { controller = "Home", action = "Index", id = UrlParameter.Optional });

 routes.MapRoute(
 name: "Default",
 url: "{controller}/{action}/{id}",
 defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }


 );
</code></pre>

Angular 2 beta uses html5 routing by default.
However, when you go to a component and the route changes (eg <a href="http://localhost:5000/aboutus" rel="noreferrer">http://localhost:5000/aboutus</a>) and you reload/refresh the page, nothing is loaded.

The issue has been raised in this <a href="https://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser">post</a> also.
Most of the answers say that if we are going to pursue HTML5 routing in angular 2, then this issue of routing should be taken care of in server-side. More discussion <a href="https://github.com/angular/angular/issues/4735" rel="noreferrer">here</a>.

I am not sure how to handle this issue using the asp.net server environment.

Any angular 2 devs out there who also uses asp.net and encounters this issue?

PS. I'm using ASP.NET 5. My Angular 2 routes are using MVC routes.

ASP.NET 5 + Angular 2 routing (template page not REloading)

身份验证

中间件

服务器

路由器

路由

HTML5

Angular 2测试版默认使用html5路由。但是，当您转到一个组件，并且路由发生更改(例如)并重新加载/刷新页面时，将不会加载任何内容。该问题也在此中提出。大多数答案说，如果我们要在angular 2中实现HTML5路由，那么这个路由问题应该在服务器端解决。更多讨论。我不确定如何使用asp.net服务器环境来处理这...

问ASP.NET 5+ Angular 2布线(模板页面非REloading)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ASP.NET 5+ Angular 2布线(模板页面非REloading)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ASP.NET 5+ Angular 2布线(模板页面非REloading)
EN