Few weeks ago I have posted a tutorial on how to build an Angular2 application with ASP.NET Core API. Today, I would like to show you another way to accomplish that - by using Angular2 CLI, which has built in support for building and bundling Angular2 applications.
- Angular2 CLI
- Creating an application
- Working with your application
I have blogged about it last week, but in short, it is a command line tool to help you work with Angular2 applications:
- initialize a new app
- generate code for new components, services etc.
- serve locally during development
- build for deployment
Using it is much simpler, than configuring the application manually. If you are starting a new app, I strongly recommend using it.
Creating an application
I will now walk you through the process of creating an app using Visual Studio 2015. The whole code is available on GitHub. Thanks to the input from Paweł Sołtysiak, the project is also compatible with VS Code.
Open Visual Studio and create a new ASP.NET Core project called Backend in the new solution. Name the solution with your project name.
Because we have created an empty project, we need to configure MVC and add support for static files. For that, you need to add these two packages to
When that’s done, you can modify the Startup class:
Next, add a new Class Library project in this solution.
I have used the Class Library so that the frontend part is visible in the Visual Studio.
Now, open a command prompt. If you haven’t done that already, install Angular CLI with
npm install -g angular-cli. Next, cd to the Frontend directory and run
ng init --name ProjectName. This step will take a while. Ng will bootstrap your angular application and download all npm packages that you need.
Proxy to the API
Because you will use TypeScript to write the frontend part, you can’t just serve these files to the browser. In the previous tutorial, I have used gulp to process all the files. Here, we will use
ng command for it. The
ng serve command is building the app, serves it on 4200 port and watches for changes you make in your code. When it detects modified file, it rebuilds the app and sends an event to the browser so it refreshes the window. This is great, but we also need to call our ASP API somehow. This is where the proxy configuration comes in. You need to create a file called
proxy.conf.json in the Frontend directory:
The target value contains a port number. If you’re using Visual Studio, you can read it from Backend project properties.
This will pass all the API requests to the running ASP.NET Core application.
The last thing we need to do here is to modify npm start script, so it uses the proxy configuration. Open
package.json in the Frontend project, find the scripts section and modify start command to:
I mentioned above, we will use the cli to build the angular app. The CLI tool, by default, creates the files in the
dist directory. We will change it to
wwwroot in our backend app. For that, open
angular-cli.json file and edit
Working with your application
Now, when everything is set up, there are few things to remember.
To work on the app, you need to start both, ng dev server and ASP.NET application. The first one is started with the command
npm start executed from the Frontend directory. Backend app can be started from the Visual Studio or also command line with
dotnet watch run. If you use the command line version, be careful about the port it uses and set it up properly in the proxy config file. The watch command in dotnet watches for changes in the application and rebuilds it whenever you change something.
You can also use ng tool to generate the angular2 files for you. Here are some useful commands. You can find all the details in the documentation
- ng g component my-new-component
- ng g directive my-new-directive
- ng g pipe my-new-pipe
- ng g service my-new-service
- ng g module my-module
The route command has been temporarily disabled due to the changes in the router, but it’s probably coming back soon.
Building for deployment
To deploy the app, you need to first build the angular2 app with
ng build command. It will transpile and bundle all needed files and copy everything, including static files, to
wwwroot folder of the backend application. When it’s done, you can use Publish option in Visual Studio to generate the whole package.
As you see, the process described here is very straight forward. In these few steps, what you get is an application, which is very easy to maintain and deploy. You can do it all manually, or clone my seed repository, rename the project and start working on your application.