Adding Angular 5.x to a .NET project

Installing Angular into the project

Creation of a new Angular project inside the folder of our Visual Studio Solution where it belongs.

  1. Open Command Prompt (cmd)
  2. Go to the root directory where the <projectname>.csproj is located
  3. Type: ng new temp-app –minimal
  4. Go into the newly created ‘temp-app’ folder
  5. Type: ng build
  6. Use ng serve to check if everything is working
  7. Close the Command Prompt
  8. Open the Visual Studio solution and check if the newly created folder ‘temp-app’ is included

Copying the Angular project

Integration of the Angular project in the APS. NET (Core) MVC project.

  1. In Visual Studio, right-click the project and click ‘Open Folder in File Explorer’
  2. Create a new folder called ‘ClientApp’
  3. Go to the ‘temp-app’ folder and cut everything inside from the ‘src’ folder and paste it into the ‘ClientApp’ folder
  4. Go back to the ‘temp-app’ folder and cut the files’.angular-cli.json’, ‘package.json’ and ‘tsconfig.json’
  5. Paste them at the root directory (overwrite any existing files)
  6. Delete the ‘temp-app’ folder

Setting up the Angular project

Modification of a few files so the Angular plays nicely together with the APS .NET (Core) MVC project.

  1. Open .angular-cli.json
    1. Change the value of ‘root’ to ClientApp
    2. Change the value of ‘outDir’ to ./Angular/ClientApp/dist
  2. Remove the line “index”: “index.html”
    1. Open the tsconfig.json file
    2. Change the value of ‘outDir’ to ./Angular/ClientApp/out-tsc
  3. Add the property ‘include’ with values: [ “./ClientApp”, “./Angular/ts” ]
    1. Save all changes and close Visual Studio
    2. In Command Prompt go to the root directory
    3. Type: npm install (if this fails add –force)
    4. Type: ng build
    5. Open the project and right-click the ClientApp and click “Add files to Source Control”
  4. Right-click the folder node-modules and click ‘Exclude from Project’

Adding the JavaScript files for Angular

Angular needs a few files to work correctly; we will add them to our APS.NET (Core) MVC project

In \Views\Shared\_Layout.cshtml add the following scripts in this order:

<script src="~/Angular/ClientApp/dist/inline.bundle.js"></script>
<script src="~/Angular/ClientApp/dist/polyfills.bundle.js"></script>
<script src="~/Angular/ClientApp/dist/styles.bundle.js"></script>
<script src="~/Angular/ClientApp/dist/vendor.bundle.js"></script>
<script src="~/Angular/ClientApp/dist/main.bundle.js"></script>

Optional – Build Angular when building the project

  • Right-click the project
  • Select ‘Properties’
  • Select ‘Build Events’
  • In ‘Pre-build event command line’ type:
    • ng build