Angular-cli: Question: Is it possible to host angular-cli generated app in an ASP.NET MVC project?

[michaeldevenney]

Please provide us with the following information:

OS?

Windows 10

Versions.

Any

Repro steps.

ng new
Copy project into an existing ASP.NET MVC project and try to serve the index page with an MVC view instead of the index.html page. If I change the standard angular-cli project folder structure to fit within an asp.net MVC web application, the app doesn't run or build because all path references are looking for .\src\app. What do I need to change in the angular-cli setup so that the features of the cli continue to work with a new structure? Or... is this not something we want to dig into as it may break in the future?

(I'm going this route because we are building an intranet application and the users want _(er... require)_ to take advantage of single sign on (ie - pass through Windows Authentication).

[gelliott181]

I too am using the CLI for an intranet application, and I was wondering, have you considered trying out node-activedirectory to support Windows Auth natively? It works great for our purposes, and you made no mention of ASP.NET being required by the spec to make the Auth requests, just that that is how you were going to do it.

[michaeldevenney]

@gelliott181 - Thanks for the heads up on that package, I wasn't aware it existed! It looks promising and if we can pull one more dependency out of the project all the better! I'll post back to this issue with my results.

[filipesilva]

I can't comment on the ASP.NET MCV bit myself but will leave it open for people to comment. Regarding app structure, everything you can configure is in angular-cli.json and all app paths are relative to the app root.

[changLiuUNSW]

Here is my solution:

1. Keep an empty index.html
2. Run ng build to generate injected index.html
3. Create a Gulp/Grunt task to extract all the scripts and styles links from index.html to a json file say manifest.json.(Here I use Cheerio and Gulp-asset-manifest )
4. Write logic to read manifest.json and output to your MVC views with Razor syntax

It works perfectly for my ASP.net MVC 5 project.
However it cannot work with route lazy load until publicPath is supported, because the url for chunk js files is loaded from root folder not dist folder.
For example:
The correct chunk js files should be:
http://www.example.com/MyApp/dist/[id].chunk.js
But it will load from:
http://www.example.com/MyApp/[id].chunk.js

https://github.com/angular/angular-cli/pull/3136#issuecomment-262663449

[changLiuUNSW]

PR created for publicPath support

3285

[vcdassen-home1]

it is possible to do so. I am working on doing just that, migrating a legacy web site to host an Angular2 SPA inside an ASPX page. What I actually did was to generate a Visual Studio Typescript project and folder, and used ng init to generate the angular-cli structure. I created a gulpfile.js with gulp tasks to handle the copying of the dist folder, assets and legacy javascript files to a predefined folder in the Web Site project structure. The ASPX page sources the script bundles and the legacy javascript files copied to the Web Site, and bootstraps the angular2 app. One gotcha you have to consider is the difference in bundle names between dev and prod builds. We solved that by removing the hash code from the bundle files in the gulp task that copies the bundle files to the web site folder. We have our own cache busting version mechanism in place already, so I just reused that.

In the VS typescript project, you don't really want VS to compile your typescript, since it should rely on ng build instead. You can set up a Pre-Build event to set up the right environment (Debug or Release), call ng build (with --prod --aot for Release mode), and a Post-Build event to call the gulp task that will copy everything over to the Web Site folder.

Put the typescript project in the same solution as the Web Site, so when the entire solution is built, the typescript project can be built before the Web Site project, and it will work with an automated build system.

There are a few hoops to jump through, given that we can't convert our legacy system over to .NET Core MVC in the first release, but the workflow is reasonable enough for us.

Good luck

[yaronmil]

I have found kind of solution it is not 100% perfect but will do the job.

1) created new Asp.Net Core Web Application.
2) open command line and run ng init in the folder that contains wwwroot
3) configure angular-cli.json "outDir": "wwwroot/dist"
4) in Home.cshtml import the scripts and styles that genrated by the angular-cli from 'wwwroot/dist'
5) before publishing the project delete the index.html from 'wwwroot/dist'

credits to jonCubed
https://github.com/JonCubed/angular2-cli-quick-start-aspnet-core-vs2015

[michael-lang]

I wrote up a blog post on using Angular CLI inside of a Visual Studio MVC Web application similar to what @vcdassen-home1 and @changLiuUNSW described. All the relevant commands are included, plus a git repo with the final result and commits for each step along the way that you can review.

http://candordeveloper.com/2017/04/12/how-to-use-angular-cli-with-visual-studio-2017/

A better integration between CLI and Visual Studio would be nice, but this works.

[Buggyy]

@michael-lang Great tutorial, but a little bit confusing comparing to your Repo

[rafkos83]

I would like to refresh the subject, but what about when you have MVC Areas in the application. I've managed to do that, but I have problems for example when loading fonts from prime ng. The fonts are requested (at least network says so) from http://localhost/MyArea/font-name.woff etc

[michael-lang]

I have a series of 3 new demo projects showing integrations between asp.net core and angular. The steps to build each option are on the readme page of the following demo repo:

https://github.com/NexulAcademy/demo-aspnet-angular

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}