Getting Started With Angular 6 Using Angular CLI - Part One

npm install -g @angular/cli  

ng new angular-app

1. Click on Visual Studio "Terminal" menu from the top of the menu list.
2. The "Terminal" menu displays a list of options; just click "New Terminal ( Cntrl + Shift + ~ )".

There is one more short key for opening the "Terminal" in VS Code ( "Cntrl + ~ " ). We can see the following terminal displayed on the right side bottom of VS Code.

Now, we need to build our application and for that, we need to open the root directory of the application. When you open the Terminal in the VS code, it may display the repository path of our application. So, just change to application path in the following way.

The build artifacts will be stored in the dist/ directory folder in the application. Now run the Angular CLI build Command.

ng build

If you are getting the following error, this means you need to install the "@angular-devkit/build-angular" dev dependency. This package was introduced in Angular 6.0.

The following command will help us to create devkit dependency in our application.

npm install --save-dev @angular-devkit/build-angular

If you are facing the same issue after the installation of the dev kit, then you need to uninstall and install the Angular CLI.

App Component

Components are the basic UI building blocks of an Angular app. So here we can see there is an "app" component generated under the "src -> app" folder in the "angular-app" application. If you are using Angular CLI, it will auto-generate all the files that are relevant to your basic application. For example, in the following screenshot, the app folder contains such auto-generated files as - CSS, spec, ts, and module.

Angular Serve

Now, the build has succeeded. Yes, our application is ready to serve. Please run any of the following commands (one is an alias or a short command) to open our application in a browser.

ng serve --open
ng s -o

Or, if we don’t want to open the application in a browser, then we can just run the following command and navigate to "http://localhost:4200/".

ng serve

Bundling the application

So, we can bundle our application using any of the following commands and flag the "–prod" bundle for production.

ng build --prod
ng serve --prod

For more options, click here.

Changing the default port number

Every application should navigate to "http://localhost:4200/" as default. So, if you are really thinking of opening an application in a different port address, it is possible. Just run any of the following commands.

ng s --port 3000 --open
ng s --port 3000 -o

Output

As I mentioned earlier, the default port we have changed to "3000" instead of "4200".

Download

• Source Code

Reference

• Tech Blog Content
• Angular Docs

Summary

From this article, we have learned the basic configuration of Angular 6 using Angular CLI and a few basic CLI commands. I hope this article is useful for all the Angular CLI beginners.