Post
Ask Question

Getting Started With Angular 6.0

Introduction

Angular has released its latest version, Angular 6.0. In this article, we will understand the new features of Angular 6.0 and also set up a new project with the help of Angular CLI 6.0 and Visual Studio Code.

What’s new in Angular 6.0
  • ng update: A new CLI command that will update your project dependencies to their latest versions.
  • ng add: Another new CLI command that will make adding new capabilities to your project easier.
  • Angular Elements: This is a new feature that allows us to compile Angular components to native web components which we can use in our Angular app.
  • <template> element is deprecated: You can't use <template> anymore inside of your component templates. You need to use <ng-template> instead.
  • Angular CLI now has the support for creating and building libraries. To create a library project within your CLI workspace run the following command:

ng generate library <name>

e.g. :- ng generate library my-demo-lib

  • Angular Material Starter Components: If you run "ng add @angular/material" to add material to an existing application, you will also be able to generate 3 new starter component.
    1. Material Sidenav
      A starter component including a toolbar with the app name and the side navigation.

    2. Material Dashboard
      A starter dashboard component containing a dynamic grid list of cards.

    3. Material Data Table
      A starter data table component that is pre-configured with a data source for sorting and pagination.
  • Angular CLI now has support for workspaces containing multiple projects, such as multiple applications and/or libraries. 
  • The ".angular-cli.json" file has been deprecated. Angular projects will now use "angular.json" instead of ".angular-cli.json" for build and project configuration.
  • Angular 6 will also allow us to use RxJS V6 with our application.
  • Tree Shakable Providers: - Angular 6.0 allows us to bundle services into the code base in modules where they are injected. This will help us to make our application smaller. 
e.g. – Earlier, we used to reference our services as below:
  1. // In app.module.ts  
  2.   
  3. @NgModule({  
  4.   ...  
  5.   providers: [MyService]  
  6. })  
  7. export class AppModule {}  
  8.   
  9. // In myservice.ts   
  10.   
  11. import { Injectable } from '@angular/core';  
  12.   
  13. @Injectable()  
  14. export class MyService {  
  15.   constructor() { }  
  16. }  

This approach will still work but Angular 6.0 provides a new and easier alternative to this. We no longer need to add references in our NgModule. We can inject the reference directly into the service. Therefore, we can use the service as below:

  1. // In myservice.ts  
  2.   
  3. import { Injectable } from '@angular/core';  
  4.   
  5. @Injectable({  
  6.   providedIn: 'root',  
  7. })  
  8. export class MyService {  
  9.   constructor() { }  
  10. }   
That is all about the features/improvements in the latest release of Angular. Let us move to create our first application using Angular 6.0.
 
Prerequisites
  • Install the latest version of Node.js from here
  • Install Visual Studio Code from here
Installing node.js will also install npm on your machine. After installing Node.js, open command prompt and run the following set of commands to check the version of node and npm installed on your machine.
  • node -v
  • npm -v 
Refer to the below image:
 
 

Installing Angular CLI

Since node and npm are installed, the next step is to install Angular CLI. Run the following command in a command window.
  • npm i -g @angular/cli
This will install Angular 6.0 CLI globally on your machine.
 
 

Create the Angular 6 app

Open VS Code and navigate to View >> Integrated Terminal.
 
 

This will open a terminal window in VS Code.

Type the following sequence of commands in the terminal window. These commands will create a directory with name “ng6Demo” and then create an Angular application with the name “ng6App” inside that directory.
  • mkdir ng6Demo
  • cd ng6Demo
  • ng new ng6App

Hence, we have created our first Angular 6 application using VS Code and Angular CLI. Now, run the following command to open the project.

  • code .
Refer to the image below :
 
 
This will open the code file of our application in a new VS Code window. You can see the following file structure in Solution Explorer.
 
 
 
Notice that the folder structure is a little bit different from the older version of Angular. We have a new “angular.json” file instead of the old “.angular-cli.json” file. This config file will still serve the same task as before but the schema has changed a bit.
 
Open package.json file and you can observe that we have the latest Angular 6.0.0 packages installed in our project.
  1. {  
  2.   "name": "ng6-app",  
  3.   "version": "0.0.0",  
  4.   "scripts": {  
  5.     "ng": "ng",  
  6.     "start": "ng serve",  
  7.     "build": "ng build",  
  8.     "test": "ng test",  
  9.     "lint": "ng lint",  
  10.     "e2e": "ng e2e"  
  11.   },  
  12.   "private": true,  
  13.   "dependencies": {  
  14.     "@angular/animations": "^6.0.0",  
  15.     "@angular/common": "^6.0.0",  
  16.     "@angular/compiler": "^6.0.0",  
  17.     "@angular/core": "^6.0.0",  
  18.     "@angular/forms": "^6.0.0",  
  19.     "@angular/http": "^6.0.0",  
  20.     "@angular/platform-browser": "^6.0.0",  
  21.     "@angular/platform-browser-dynamic": "^6.0.0",  
  22.     "@angular/router": "^6.0.0",  
  23.     "core-js": "^2.5.4",  
  24.     "rxjs": "^6.0.0",  
  25.     "zone.js": "^0.8.26"  
  26.   },  
  27.   "devDependencies": {  
  28.     "@angular/compiler-cli": "^6.0.0",  
  29.     "@angular-devkit/build-angular": "~0.6.0",  
  30.     "typescript": "~2.7.2",  
  31.     "@angular/cli": "~6.0.0",  
  32.     "@angular/language-service": "^6.0.0",  
  33.     "@types/jasmine": "~2.8.6",  
  34.     "@types/jasminewd2": "~2.0.3",  
  35.     "@types/node": "~8.9.4",  
  36.     "codelyzer": "~4.2.1",  
  37.     "jasmine-core": "~2.99.1",  
  38.     "jasmine-spec-reporter": "~4.2.1",  
  39.     "karma": "~1.7.1",  
  40.     "karma-chrome-launcher": "~2.2.0",  
  41.     "karma-coverage-istanbul-reporter": "~1.4.2",  
  42.     "karma-jasmine": "~1.1.1",  
  43.     "karma-jasmine-html-reporter": "^0.2.2",  
  44.     "protractor": "~5.3.0",  
  45.     "ts-node": "~5.0.1",  
  46.     "tslint": "~5.9.1"  
  47.   }  
  48. }  

Execution Demo

The name of our Angular application is ng6app which is inside ng6demo directory.

So, we will first navigate to our application using the below commands.

  • cd ng6demo
  • cd ng6app
Now, we use the following command to start the web server.
  • ng serve
 
After running this command, you can see that it is asking to open http://localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.
 
 
 
Now we will try to change the welcome text on the screen. Navigate to /src/app/app.component.ts file and replace the code with the below code.
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent {  
  9.   title = 'Csharp Corner';  
  10. }  

Now open the browser, you can see that the web page has been updated with new welcome message "Welcome to Csharp Corner!"

 

Conclusion

We learned about the new features of Angular 6.0. We have installed the Angular 6.0 CLI and created our first Angular 6.0 application with the help of Visual Studio Code. We have also customized the welcome message on the webpage.


Similar Articles