Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
michaeldevenney opened this issue Oct 31, 2016 · 12 comments

Comments

@michaeldevenney
Copy link

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).

@celliott181
Copy link
Contributor

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
Copy link
Author

@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
Copy link
Contributor

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
Copy link
Contributor

changLiuUNSW commented Nov 24, 2016

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

#3136 (comment)

@changLiuUNSW
Copy link
Contributor

changLiuUNSW commented Nov 25, 2016

PR created for publicPath support
#3285

@vcdassen-home1
Copy link

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
Copy link

yaronmil commented Nov 29, 2016

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

@hansl hansl closed this as completed in 0ce64a4 Dec 29, 2016
MRHarrison pushed a commit to MRHarrison/angular-cli that referenced this issue Feb 9, 2017
…ngular#3285)

Add publicPath option for webpack.

User can specify publicPath via `--deploy-url` / `-d` from command line or add `deployUrl` to `angular-cli.json`.

It can solve following issues:

Change the public URL address of the output files (different from baseUrl).
Manipulate the request url for chunk js files.
It is very helpful to solve resources url and route lazying load issues for those applications which have different static files paths such as ASP.NET MVC.

Fixes angular#3136
Fixes angular#2960
Fixes angular#2276
Fixes angular#2241
Fixes angular#3344
@michael-lang
Copy link

michael-lang commented 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
Copy link

Buggyy commented Jul 25, 2017

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

@rafkos83
Copy link

rafkos83 commented 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
Copy link

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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

9 participants