This below is now outdated, follow this https://gist.github.com/VaclavElias/544b8d097981e217ae0dc7c32adba705
- I think there are many unnecessary steps in this guide, lots of mess
- Any updates in Angular, you have to run webpack to compile all.
- Update 25/04/2018 - I have got now better version which I will add on a separate link, some steps will be removed (e.g. ng eject --force)
- Project 1 - I have installed ASP.NET Core 2.1 Preview2 Angular and updated Angular 5 to the latest
- Project 2 - I have installed ASP.NET Core 2.1 Preview2 MVC with Authentication
- I have merged Project 1 into Project 2
- Run and test, all is working, you will access the Angular part through https://localhost:port/index.html
- I had to go through some points here http://www.talkingdotnet.com/how-to-create-an-angular-5-app-with-visual-studio-2017/ specifically just
ng eject --force
- I have copied content of index.html to my Index.cshtml for my DashboardController and added these at the bottom
<script asp-append-version="true" src="~/inline.bundle.js"></script>
<script asp-append-version="true" src="~/polyfills.bundle.js"></script>
<script asp-append-version="true" src="~/styles.bundle.js"></script>
<script asp-append-version="true" src="~/vendor.bundle.js"></script>
<script asp-append-version="true" src="~/main.bundle.js"></script>
// actually I added this to _AngularPartial.cshtml
- asp-apend-version is not working here, you have to do your own implementation otherwise you have to refresh the page as those js will be cached, also I have added it to the _AngularPartial (ASP.NET Core 2.1 has got partial tag)
@{
Layout = null;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Application Name</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="row"><div class="col-sm-12"><h1>Hello From Dashboard 1 :)</h1></div></div>
<div class="row">
<div class="col-sm-12">
<app-root>Loading Dashboard 1...</app-root>
</div>
</div>
<partial name="_AngularPartial" />
</body>
</html>
- One of my actions in DashboardController
[Authorize]
public IActionResult Index() => View();
- Startup.cs
// just regular
app.UseMvc(
routes => { routes.MapRoute(
name: "default",
template: "{controller}/{action}/{id?}",
defaults: new { controller = "Home", action = "Index" });
});
// updated
app.MapWhen(context => IsSpa(context.Request.Path.Value), builder => {
builder.UseSpa(spa => {
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment()) { spa.UseAngularCliServer(npmScript: "start"); } });
});
bool IsSpa(string pathValue) {
var endsWith = new[] { ".woff2", ".woff", "ttf", ".js", ".css" };
var angularPages = new[] { "/dashboard", "/dashboard2" };
return angularPages.Contains(pathValue) || pathValue.Contains("sockjs-node") || endsWith.Any(pathValue.EndsWith);
}
- I have also added this as it is published automatically and I don't want to access angular index.html from outside of MVC.
..
app.UseRewriter(new RewriteOptions().AddRedirct("index.html", "/"))
..
I have published it and tested briefly on IIS and worked well.