Ultimate Guide to Angular CLI
Posted By : Ishaan Madan | 30-Jun-2017
Angular CLI Introduction
Angular CLI is the Command Line Interface which is used to automate our development and its workflow. We can perform following tasks using Angular CLI:
- Creating an Angular application
- Serve the Angular application with LiveReload support.
- Doing Unit test in the application
- Runing end-to-end (E2E) tests in the application.
- build and deployment of the application on different environment.
Minimum Prerequisites
1.Node.js 6.9.0 or higher.
2. NPM 3.0.0 or higher
Angular CLI Installation
$ npm install -g @angular/cli
This command will install the ng
command globally across the system and can be verified using:
$ ng version
which will display the version installed:
@angular/cli: 1.0.0
node: 6.10.0
os: darwin x64
Create the Angular Application using CLI
$ ng new my-app
The command results in production of following directories and project structure:
.
??? README.md
??? e2e
? ??? app.e2e-spec.ts
? ??? app.po.ts
? ??? tsconfig.e2e.json
??? karma.conf.js
??? package.json
??? protractor.conf.js
??? src
? ??? app
? ? ??? app.component.css
? ? ??? app.component.html
? ? ??? app.component.spec.ts
? ? ??? app.component.ts
? ? ??? app.module.ts
? ??? assets
? ??? environments
? ? ??? environment.prod.ts
? ? ??? environment.ts
? ??? favicon.ico
? ??? index.html
? ??? main.ts
? ??? polyfills.ts
? ??? styles.css
? ??? test.ts
? ??? tsconfig.app.json
? ??? tsconfig.spec.json
? ??? typings.d.ts
??? tsconfig.json
??? tslint.json
$ ng generate --help
can be used to see all theh available options of the locall installation of the Angular CLI.
Serving the Application
The app can be run by going into the project's root directory and using ther serve command of the angular CLI:
$ ng serve
This command will start the development server at default 4200 port. the output in the terminal can be viewed as:
** NG Live Development Server is running on http://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.
Navigating to http://localhost:4200/ will display a working angular quick start application:
Generate command:
The ng generate
command is a vital command and can be used to add different features into the existing application:
ng generate class my-new-class
: adding a new class to the applicationng generate component my-new-component
: adding a new component to the applicationng generate directive my-new-directive
: adding a new directive to the applicationng generate enum my-new-enum
: adding an enum to the applicationng generate module my-new-module
: add a new module to the applicationng generate pipe my-new-pipe
: adding a new pipe to the applicationng generate service my-new-service
: adding a new service to the application
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Ishaan Madan
Ishaan, a skilled technical project manager, excels at breaking down complex projects into manageable tasks. With a background in both technology and project management, he offers a unique perspective to every project he undertakes. His effective communication skills enable him to collaborate seamlessly with both technical and non-technical stakeholders, ensuring everyone is aligned towards shared objectives. He has hands-on experience in utilizing agile methodologies like Scrum and Kanban to drive project management and foster team collaboration. He leverages project management tools such as JIRA, Trello, and Clickup to monitor progress, manage tasks, and facilitate communication among team members and stakeholders. Moreover, his proficiency in full-stack development empowers him to comprehend the technical aspects of projects and provide guidance to developers when necessary. He demonstrates expertise in utilizing popular Python frameworks like Django and Flask, along with data analysis and manipulation libraries such as NumPy and Pandas. On the front-end, Ishaan adeptly employs JavaScript libraries like React and Angular to craft visually appealing and user-friendly interfaces. Additionally, he possesses proficiency in HTML, CSS, and JavaScript for designing responsive and mobile-friendly layouts.