The Angular team had announced about Angular CLI tool that makes creating and scaffolding Angular 2 applications incredibly easy in the NG-Conference. Angular CLI is a command-line interface for you to work with Angular and also to automate your development workflow. To provide you with the superficial features of the Angular CLI makes it easier to work with already created applications right out of the box.
With these basic features of Angular CLI available to use, you should be looking forward to starting with the setup process. Let’s delay no further and get deep-diving into the setup process.
The pre-requisite for us to have before we can use Angular CLI is Node.js (6.9.0) and npm (3.0.0 or higher) installed on your system. You can follow the Official documentation available here and download the latest version of Node.js for your OS and follow the given instructions. If you already have the pre-requisites already available on your system, then it is the right time to check the versions available using the following commands.
$ node –v # (displays the Node.js version installed)
$ npm –v # (displays the npm version installed)
With the pre-requisites handled, the next step is to have ‘TypeScript’ installed on your system. It is not at all mandatory to have TypeScript installed along with Node.js, npm – but as a recommendation from the Angular team, it is 100% better to have this on your system. The following command should do the trick if the pre-requisites are handled correctly.
$ npm install –g typescript@2.2.0
With the above pre-requisites and the recommendations handled, now we are at the final step of installing Angular CLI on our system. The following command helps us install the Angular CLI tool on our system:
$ npm install –g @angular/cli
The command above installs, ng command as a global one, which can be verified as shown in the next step below.
$ ng version
@angular/cli: 1.2.1
node: 6.9.0
os: darwin x64
With this step done successfully, you are now ready to create new applications. The next section describes the process of creating newer Angular applications.
[ Related Article: Angular vs JQuery - Comparison ]
Creating a new application can be done in two ways, using either of the following commands (using Angular CLI):
ng init – This command creates a new Angular application in the present folder.
ng new – This command creates a new folder and then under the new folder if we run ng init it creates a new Angular application.
Putting the commands above to use, let’s create a new application called ‘my-angular-application’.
$ ng new my-angular-application
The command above does the following in the background and generates the application skeleton for us to develop it further. Let’s strip the above command to bare bones and try to understand each step individually.
[ Related Article: AngularJS Interview Questions for Freshers ]
After running the command above, this is how your folder structure would look like:
//end-to-end tests are created under this
|__e2e/
|__app.e2e-spec.ts
|__app.po.ts
|__tsconfig.e2e.json
//npm dependencies are fetched here
|__node_modules/
//built applications will reside here, obviously this won’t be shown until you build your application at least once.
|__dist/
//actual development work would be here, and these are the files that we will be going to touch more frequently.
|__src/
|__app/
|__app.component.css|html|spec.ts|ts
|__app.module.ts
|__assets/
|__environments/
|__environment.prod.ts|ts
|__favicon.ico
|__index.html
|__main.ts
|__polyfills.ts
|__styles.css
|__test.ts
|__tsconfig.app.json
|__tsconfig.spec.json
|__typings.d.ts
//Overall configuration will be present here.
|__.angular-cli.json //This is the main configuration file
|__.editorconfig
|__.gitignore
|__karma-conf.js
|__package.json
|__protractor-conf.js
|__README.md
|__tsconfig.json
|__tslint.json
It is very important to take note of the folder structure that gets generated and where each of the files is located (for the first time at least) because this is how Angular CLI generates all of these following the Angular style guide as discussed above. There’s always a need to learn about the structure and style guide to incorporate these things into your development as well.
Here’s the default package.json that gets created along with the project by using the command above.
{
"name": "my-angular-application",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.2.1",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
If you run the help command, you will be able to see all the available options of your locally installed Angular CLI tool. You can run the following command to check the available options:
$ ng generate –help
Options are shown below and by default, every other option is false unless specifically mentioned to be true:
To preview the newly created angular application, traverse to the directory and run the following commands. To start the built-in development server on port 4200:
$ cd my-angular-application
$ ng serve
** NG Live Development Server is running on https://localhost:4200 **
Hash: 09fb2ad840c1472e5885
Time: 6230ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 3.62 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
Navigate to your browser and key in the following to see whether your application is in action.
So what do you think has happened right now, let’s see the sequence of steps:
Angular CLI tool loads its own configuration from the file .angular-cli.json
Angular CLI tool runs the Webpack to build all the required Javascript and CSS modules
Angular CLI tool starts the Webpack development server to show us the preview on localhost:4200, just as the screenshot shown above.
Note that the ng server command doesn’t exit and return to your terminal as of the above step. For this to return back to the terminal, you need to press ctrl + c.
You can do much more than just creating newer applications using the Angular CLI tool, you can add more features into the created applications as well using the ng generate command. This can be done just the same way as we have done to create a new Angular application. You can add different types of documents to your application using any or all of the commands mentioned below.
ng g cl my-angular-application-new-class (This command adds a new class to our application)
ng g c my-angular-application-new-component (This command adds a new component to our application)
ng g d my-angular-application-new-directive (This command adds a new directive to our application)
ng g e my-angular-application-new-enum (This command adds a new enum to our application)
ng g m my-angular-application-new-module (This command adds a new module to our application)
ng g p my-angular-application-new-pipe (This command adds a new pipe to our application)
ng g s my-angular-application-new-service (This command adds a new service to our application)
Let’s take an example of adding a new class to our ‘my-angular-application’ application:
$ ng generate class my-user-profile
Angular CLI will automatically adjust the casing of the class file name and class name for us so that the following commands also result in generating the same class file.
$ ng generate class My-User-Profile
$ ng generate class myUser-Profile
$ ng generate class myuserProfile
In the background, a file src/app/my-user-profile.ts will be created that exports a class with the name MyUserProfile.
Let’s now add a new module, shall we?
To add a new module to your application, we can refer to the shortcut commands provided as above or use the following command to generate a new module named ‘ApplicationModule’.
$ ng generate module administrator
Installing module create src/app/administrator/administrator.module.ts
In the background, a folder structure src/app/administrator will be created (if not created all ready). An AdministratorModule module is created inside src/app/administrator/administrator.module.ts.
Now if you want to import your newly created module into any of your existing modules, you can specify it as an import in the following fashion:
import { AdministratorModule } from ‘./administrator/administrator.module’
@NgModule({
imports: [AdministratorModule]
})
export class ApplicationModule { }
By the look of it, you might think that Angular CLI is going to generate code blindly which is not the case actually. Angular CLI uses static analysis to understand the semantics of your project and generates the new feature in the correct module (depending on where you are running your commands). Angular CLI tool finds out the closest module from the whole module tree of your application and then integrates the newly created feature into the module tree in that module.
Angular CLI automatically configures the Karma test runner for you when the application is created initially. Whenever you are adding any new feature into your application, consider adding –spec option to notify the Angular CLI tool to create a corresponding .spec.ts file for that new feature with a sample unit test. As you would’ve already observed, the spec files are also created in the same directory of the corresponding new feature in the src directory.
To run all unit tests under your application, run the following command:
$ ng test
[karma]: No captured browser, open https://localhost:9876/
[karma]: Karma v1.4.1 server started at https://0.0.0.0:9876/
[launcher]: Launching browser Chrome with unlimited concurrency
[launcher]: Starting browser Chrome
[Chrome 57.0.2987 (Mac OS X 10.12.0)]: Connected on socket 4OBzlsVyIPZyE1AYAAAA with id 41455596
Chrome 57.0.2987 (Mac OS X 10.12.0): Executed 3 of 3 SUCCESS (0.132 secs / 0.121 secs)
and a browser will be launched as like the following:
You’ve learned that Angular CLI, a command-line interface that’s used to automate your current development workflow. As of today, you can achieve the following using just the Angular CLI:
You can create a new Angular application
You can run a development server to preview your application during development
To build your application for deployment to an environment of your choice
To add additional features to your Angular applications
To run your Angular application’s unit tests
To run your Angular application’s end-to-end tests
You’ve learned that it is not necessarily important to develop an application using Angular CLI alone, but it does help a lot to improve the quality of your code and helps save a lot of time/effort which you would’ve rather spent identifying the issues in your code.
The development of Angular CLI is still on, which means, over time we can expect more and more cool features available on this tool to develop Angular applications.
The best source for us to follow up on the latest updates on Angular CLI is the official website and also the GitHub repository if you’re really keen on gaining the technical know-how
Our work-support plans provide precise options as per your project tasks. Whether you are a newbie or an experienced professional seeking assistance in completing project tasks, we are here with the following plans to meet your custom needs:
Name | Dates | |
---|---|---|
Angular Training | Dec 14 to Dec 29 | View Details |
Angular Training | Dec 17 to Jan 01 | View Details |
Angular Training | Dec 21 to Jan 05 | View Details |
Angular Training | Dec 24 to Jan 08 | View Details |
Ravindra Savaram is a Technical Lead at Mindmajix.com. His passion lies in writing articles on the most popular IT platforms including Machine learning, DevOps, Data Science, Artificial Intelligence, RPA, Deep Learning, and so on. You can stay up to date on all these technologies by following him on LinkedIn and Twitter.