Repository navigation
Question: Is it possible to host angular-cli generated app in an ASP.NET MVC project? #2960
Description
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).
Activity
celliott181 commentedon Nov 3, 2016
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 commentedon Nov 3, 2016
@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 commentedon Nov 4, 2016
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.jsonand all app paths are relative to the app root.changLiuUNSW commentedon Nov 24, 2016
Here is my solution:
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
#3136 (comment)
changLiuUNSW commentedon Nov 25, 2016
PR created for publicPath support
#3285
vcdassen-home1 commentedon Nov 25, 2016
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 commentedon Nov 29, 2016
I have found kind of solution it is not 100% perfect but will do the job.
ng initin the folder that contains wwwroot"outDir": "wwwroot/dist"credits to jonCubed
https://github.com/JonCubed/angular2-cli-quick-start-aspnet-core-vs2015
feat(build): add publicPath support via command and angular-cli.json (a…
michael-lang commentedon Apr 12, 2017
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 commentedon Jul 25, 2017
@michael-lang Great tutorial, but a little bit confusing comparing to your Repo
rafkos83 commentedon Oct 5, 2018
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 commentedon Oct 5, 2018
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 commentedon Sep 8, 2019
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.
feat(build): add publicPath support via command and angular-cli.json (a…
feat(forms): add the submitted flag to NgForm and NgFormModel directives