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