Integrate Angular 5 with ASP.NET MVC 5

Question

I am trying to integrate an Angular 5 app generated with CLI project into an existing ASP.NET MVC 5 application. I created the angular project with CLI inside the ASP.NET MVC project, and I want to use Angular 5 components inside razor views; those will be simple razor views and inside those, I will display some Angular 5 components. I've done this with ASP.NET Core 2, I changed the Outdir property to wwwroot in the file .angular-cli.json, and it worked, but I could not do it with ASP.NET MVC 5. Can anyone help? Thank you

PS: many tutorials use old versions of Angular and they used a file named system.js, but this file does not exist anymore in the newer versions of Angular.

Any success for the same???? please update.

micronyks
– micronyks

2018-02-09 12:53:24 +00:00
Commented Feb 9, 2018 at 12:53 — micronyks
– micronyks, Commented Feb 9, 2018 at 12:53
youtube.com/watch?v=rbHSTJBhJ44

micronyks
– micronyks

2018-02-09 13:30:16 +00:00
Commented Feb 9, 2018 at 13:30 — micronyks
– micronyks, Commented Feb 9, 2018 at 13:30

marc_s · Accepted Answer · 2018-09-04 19:07:21Z

20

I just did this with Angular 5 and MVC 5. I suggest you get a "Hello World" working first, and then port it into your existing MVC problem.

Pre-reqs - make sure you have the latest Node, NPM, AngularCLI installed...

In VS2017, create a New ASP.NET Web Application, SPA with MVC and WebAPI 1.1. Show all files (in the Solution Explorer - this makes things easier!)

From the package manager console uninstall unneeded packages:

UnInstall-Package Sammy.js
UnInstall-Package Bootstrap
UnInstall-Package JQuery
UnInstall-Package Knockout.validation
UnInstall-Package Knockoutjs
UnInstall-Package modernizr
UnInstall-Package Microsoft.ApplicationInsights.Web -RemoveDependencies

Remove all bundles in BundleConfig.cs (we'll pull them in later!)
Delete Scripts folder (it will be recreated using the AngularCLI)
Add Angular using CLI (go into the project root folder)

Run: ng new Scripts --skip-tests --style scss

In the Project, Include all folders EXCEPT node_modules!
Update angular.json to output to a Bundles folder -> "outputPath": "../Bundles"

Add bundles:

bundles.Add(new ScriptBundle("~/Script/Bundles") 
       .Include("~/bundles/inline.*", "~/bundles/polyfills.*", 
                "~/bundles/scripts.*", "~/bundles/vendor.*", "~/bundles/runtime.*", 
                "~/bundles/main.*"));

bundles.Add(new StyleBundle("~/Content/Styles") .Include("~/bundles/styles.*"));

(Optional) Re-add libraries through NPM (command prompt from Scripts folder):

npm install jquery --save   
npm install popper.js --save    
npm install bootstrap --save

(Optional) Reference them in angular.json so AngularCLI pulls them into the webpack bundles:

"styles": [
      "src/styles.scss",
      "./node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
"scripts": [
      "./node_modules/jquery/dist/jquery.min.js",
      "./node_modules/popper.js/dist/umd/popper.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]

Build from scripts folder: ng build --extractCss

In _Layout.cshtml, add:

  @Styles.Render("~/Content/Styles")    <!-- In the "head" element -->

and

  @Scripts.Render("~/Script/Bundles")   <!-- At the end of the "body" element -->

Remove the old bundle imports!

In Home/Index.cshtml, add the Angular element:
```
<app-root>test</app-root>
```
13.1 Remove the old bundle imports!
Run the web app - it should open up. Register a new user, and then login. Show the MVC5 demo page together with the Angular
To "watch" the webpage - from the command line:
```
ng build --extractCss --watch
```

This will rebuild the Bundles. Unfortunately you need to refresh the browser, but this is better than stop/starting things!

Shout if you need more detail - I've run through this twice to get familiar with it, and it works nicely!

edited Sep 4, 2018 at 19:07

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 17, 2018 at 17:32

James Joyce

1,79319 silver badges20 bronze badges

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

6 Comments

Mawy Over a year ago

Hi James, U solution worked fantastically , but I was facing issues in deploying to Azure app service, can u please help me on how to deploy the above solution to azure

James Joyce Over a year ago

Hi Mawy, thats a big topic. I don't use Azure, but on AWS I prefer an "old school" deployment method. I run an MSBuild script to "ng build --prod" which creates prod bundles of Angular etc, then an MSBuild to build the MVC5 website project. Then I copy this to a shared folder on the destination server. The destination server is running IIS7, and the share is within inetpub/wwwroot. In IIS I generally create a new virtual directory, and my shared folder sits right there... I hope that helps steer you? Otherwise raise the question and I'll try give a bigger answer...

Kgn-web Over a year ago

@JamesJoyce, Following the steps mentioned, I am getting the error Error: The selector "app-root" did not match any elements

James Joyce Over a year ago

@Kng-web - you haven't put in the html element <app-root></app-root> into your MVC view. This is where Angular will inject it's output HTML, which you define as an element selector in your app.component.ts... Put one into the MVC view where you render the Angular scripts...

Alex Over a year ago

Thanks, @JamesJoyce. Great answer. Just used it with great success. One minor correction: Step 5: ng new Scripts --skip-tests --style=scss

|

AliWieckowicz · Accepted Answer · 2018-01-11 15:34:57Z

4

Have you seen the release candidate for the new Microsoft Core Angular template. They changed the template so that it uses angular-cli. Works well. You could possibly follow the same build config pattern. Note you have to install the newest version of the template via

dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final.

https://learn.microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio#tabpanel_IjUmMTId-R_visual-studio

answered Jan 11, 2018 at 15:34

AliWieckowicz

5711 gold badge4 silver badges19 bronze badges

Comments

Haytham · Accepted Answer · 2017-12-15 01:07:05Z

0

Solution and how to do it using Angular 4.3 here:

answered Dec 15, 2017 at 1:07

Haytham

8542 gold badges15 silver badges33 bronze badges

2 Comments

Wai Ha Lee Over a year ago

For posterity, could you include the relevant parts of the link which you found useful in your answer? That way, if the link goes down, changes, etc., your answer won't be rendered useless. Many thanks.

Miguel Over a year ago

Just for convenience: those who know about MVC can skip all that explanation and go directly to "How to include Angular" youtu.be/-2tpXcor6wU?t=4703

Christopher · Accepted Answer · 2021-03-09 20:36:28Z

0

For anyone else struggling to find working/simple instructions in 2021 here are the steps I finally got working to add an Angular 10.x app to an ASP.NET (CORE) 3.x MVC web application: https://gist.github.com/cemerson/1af0befa4edc959a02ba1a34784c6d55

answered Mar 9, 2021 at 20:36

Christopher

2,52625 silver badges27 bronze badges

Collectives™ on Stack Overflow

Integrate Angular 5 with ASP.NET MVC 5

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related