Search code examples
javascriptangulartypescriptasp.net-core-mvcrazorengine

ASP.NET Core 2.0 Razor + Angular 4 Hybrid

I have an application that runs on ASP.NET Core 2.0 using Razor Engine (.cshtml) but I'd like to incorporate Angular 4 into the application to avoid the old school jQuery data binding from AJAX calls. What steps should I have to make to add Angular into my existing project?

I looked at knowkoutJS too but I don't know if this is even being actively supported.

EDIT:

I guess what I am looking for is step by step procedure on how to add Angular 4 into an existing .NET core 2.0 application that uses Razor engine.

Solution

  • I am currently working on a new project with angular 4. I am learning on the go. I have developed using angular 1.5.X. This is the first time with angular 4.

    Here are my findings. I dont know why you prefer not to mix with angular routing. But mix and matching an angular route with .net application is easy. Hope this will help to put you in some good direction.

    First, As @Ilya.Sulimanov said, Angular 4 Application seems to be self-contained SPA with Routing, Building (WebPack) etc.

    Next, implementing authentication is a bit hassle using angular 4 and .Net. .Net identity doesn't support angular based authentication out of the box. Ideal is to use token based authentication. This needs to be implemented on top of identity. But its easy to do and future proof as if you want to develop a mobile app etc.

    Otherwise, you can use a hybrid approach for authentication. Just use view based pages (forms authentication) for login, signup and change password etc. Once authenticated, redirect users to SPA. Then use "Authorized" attribute in all the API for SPA. But there is a catch. You need to inject HTTP error handling on the angular side to check if the user is authenticated every time. If timeout/logged out, then use the angular router to redirect to login page.

    Points to note,

    Use a fixed URL for your SPA. Say www.example.com/spa So all the angular routing takes place from there. example: www.example.com/spa/#/home etc.

    I am bit struggling to get webpack to work hand in hand with .netcore. There is seems to be a bit of learning curve. I am from Gulp background.

    Hope it helps to decide your options.

    Good points to start,

    UI

    Some Apps [good for starting point],

    Update

    Found this https://github.com/MarkPieszak/aspnetcore-angular2-universal. this give good idea on how to configure webpack with .net core development.

    So far, non of the examples does not give single stop solution. But each of them resolves different issues towards a complete solution.