Hello everyone. This is my first English article. I will list the steps of creating an Angular 4 project on .NET Core MVC project using Visual Studio 2017 and Angular CLI.
- Install Visual Studio 2017 Community Edition on Windows. Use installer to install .NET Core and NodeJS workloads.
- Install latest version of NodeJS and NPM
- Install Angular CLI using npm
- Create a blank solution and add a .NET Core MVC Web Application to it using Visual Studio 2017. My project name is Admin. (do not use . (dot) and special characters in project name.)
- Open command prompt, go to solution directory using cd command, type the following command and press enter:
ng new Admin --routing --skip-git --directory Admin
Angular CLI adds an angular project to the the MVC project named Admin that we created at the previous step. After creation of the angular project, you can serve this angular project and test it.
- Open the .angular-cli.json at the root of the project, change the outDir as “wwwroot”
- Open the tsconfig.json and change the outDir as “./wwwroot/out-tsc”
- Open the Home/Index.cshtml change the content of it as follows:
@{
Layout = null;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Admin</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="~/inline.bundle.js"></script>
<script type="text/javascript" src="~/polyfills.bundle.js"></script>
<script type="text/javascript" src="~/styles.bundle.js"></script>
<script type="text/javascript" src="~/vendor.bundle.js"></script>
<script type="text/javascript" src="~/main.bundle.js"></script>
</body>
</html>
9. You should exclude node_modules directory from the project in Visual Studio.
10. Open Project Properties and go to tab Build Events write the following command at the textarea:
echo "building angular app" &&^ ng build
Now you can run the application from Visual Studio 2017. The angular app will be built and the you will see the app in browser. But this project does not support production build, so you have to manually build the angular app or restart the project again to see the changes.
The next step is to install and configure webpack to enable production build.
Happy coding.
Murat Demirci 