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.

Answer 1

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

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

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

3. Remove all bundles in BundleConfig.cs (we'll pull them in later!)

4. Delete Scripts folder (it will be recreated using the AngularCLI)

5. 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!

6. Update angular.json to output to a Bundles folder -> "outputPath": "../Bundles"

7. 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.*"));
   

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

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

9. (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"
       ]
   

10. Build from scripts folder: ng build --extractCss

11. 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!

12. In Home/Index.cshtml, add the Angular element:

    <app-root>test</app-root>
    

    13.1 Remove the old bundle imports!

13. Run the web app - it should open up. Register a new user, and then login. Show the MVC5 demo page together with the Angular

14. 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!

Answer 2

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