1

I have an existing application that is written in ASP.NET MVC with a Silverlight widget embeded in one of the MVC views. The Silverlight widget is in it's own project and communicates with a WCF backend.

My rewrite is in Angular4 using Visual Studio Code. I have made some progress in developing the new SPA application (simple home page with some functionality on it and a detail page achieved with routing). I am exposing the functionality of the WCF service via Web API to provide restful endpoints (so far so good).

The issue that has me stumped is how do I bring the two together. The plan when I took the brief was to replace the div container that embedded the Silverlight widget into the MVC application with the new Angular4 "widget".

I obviously need to do this on my development PC and also on the IIS server I will be deploying to. We are using Visual Studio 2015 as Silverlight is not supported in Visual Studio 2017.

Improve this question
7
  • It's not clear what you mean. You just re-write the functionality that was provided by silverlight in HTML/CSS/JS. You can use angular to make that a bit easier if you like, it's just a Javascript framework which maps certain conceptual ideas into some code. It's just part of your page (or view, in MVC parlance). What precisely are you stuck with? As for "also on the IIS server", this is just a result of you deploying the new code onto a server, you shouldn't have to take some separate action on the webserver(s). Commented Jan 8, 2018 at 14:44
  • I know how to write the Angular app. How do I get the Angular CLI to build with the ASP.NET MVC app. I have already had to add some headers to my localhost to get around CORS due to ng serve running the app as localhost:<port> vs the MVC app running on port 80 under the default site Commented Jan 8, 2018 at 14:49
  • ??? Why do you need Angular CLI? You don't need a separate webserver for this. You're replacing a Silverlight component which is client-side. Therefore your Angular component should also be client-side. Any server methods it calls should be part of the MVC app (or an associated Web API controller) in order to leverage the functionality. So far so good I think. Commented Jan 8, 2018 at 14:57
  • To "integrate" them you just paste your Angular code into an MVC view, and go. You fire up your MVC app, load the relevant view, and it runs whatever Angular code is there - like I said, it's just browser-based Javascript really. Angular CLI is just a convenience tool for quickly testing apps by providing a little built-in standalone webserver. There's no requirement for this in order to code stuff using Angular. In this case particularly it makes no sense at all because you already have a server-side framework and webserver provided by the MVC app and IIS. Commented Jan 8, 2018 at 14:58
  • So how do I get the same functionality that Visual Studio Code and Angular CLI gives via webpack? Will Visual studio automatically build the JS files from the TS files? Commented Jan 8, 2018 at 15:00

1 Answer 1

Reset to default
2

A potential solution to your issue, you can create a partial view in ASP.NET MVC, and has it bring in the angular app. in your partial view, include this:

@Html.Raw(File.ReadAllText(Server.MapPath("~/dist/index.html")))

The index.html will bring in the compiled and bundled html, JS and CSS files. Make sure you remove the header and body tag from the src/index.html if any.

Do you need to put the angular build process together with MVC in VS studio? Currently I build the angular app and MVC app separately (Angular in VSCode).

If you insist on building the angular app together with the MVC App, you can trigger the NPM build from the angular app as a build event in the MVC app.

Go to your startup project properties, put the following command in your pre-build event command line:

powershell start-process npm -ArgumentList '"run $(ConfigurationName)"'

enter image description here this will trigger a npm script base on your build config name. For example, if you have a publish profile call UAT, when you build/publish the project, it will execute npm run UAT in your powershell.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I guess I don't need to have them built at the same time. Hitting F5 and having it all start up would be sufficient.
ya, unfortunately this solution won't work with dev server from angular-cli. You will have to run the command ng build --watch and hit f5 to refresh when you edit.
I spoke to a colleague of mine and he suggested letting Angular/cli do the build as you suggested (ng build) and then picking up the files from the dist folder.
Just wanted to comment and say that this solution helped me embed an entire app inside ASP.NET MVC app

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.