VaclavElias/Aspnet.core2.1andAngular5.md

## Aspnet.core2.1andAngular5.md

      
    Raw
  

              Aspnet.core2.1andAngular5.md
            
          
    This below is now outdated, follow this https://gist.github.com/VaclavElias/544b8d097981e217ae0dc7c32adba705
ASP.NET Core 2.1 Preview + Angular 5 in MVC Razor Pages


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.