What
Is Angular CLI? Angular CLI is a tool to initialize,
develop, scaffold and maintain Angular applications.
Before you install, check the prerequisite- The Angular CLI
and generated project have dependencies that require Node 6.10.3 or higher,
together with NPM 3 or higher.
Installation
–
npm
install -g
@angular/cli
Example
– In this example, I will show - “How to install are upgrade Angular CLI”?
Open
Node.js Command Prompt –
Your environment has been set
up for using Node.js 6.10.3 (x64) and npm.
C:\Users\Anil>f:
F:\>cd
AngularTestApp
F:\AngularTestApp>md
DemoApp
F:\AngularTestApp>cd
DemoApp
F:\AngularTestApp\DemoApp>npm
install -g @angular/cli
C:\Users\Anil\AppData\Roaming\npm\ng -> C:\Users\Anil\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
C:\Users\Anil\AppData\Roaming\npm
`-- @angular/cli@1.5.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0
(node_modules\@angular\cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2:
wanted {"os":"darwin","arch":"any"}
(current: {"os":"win32","arch":"x64"})
The Angular CLI will add reference to components,
directives and pipes automatically in “app.module”.
Generating
and serving an Angular Project using Development server -
Open Node.js command prompt – Your environment
has been set up for using Node.js 6.10.3 (x64) and npm.
C:\Users\Anil>f:
F:\>cd
AngularTestApp
F:\AngularTestApp>md
DemoApp
F:\AngularTestApp>cd
DemoApp
F:\AngularTestApp\DemoApp>npm
install -g @angular/cli
C:\Users\Anil\AppData\Roaming\npm\ng
-> C:\Users\Anil\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
C:\Users\Anil\AppData\Roaming\npm
`-- @angular/cli@1.5.0
npm WARN optional SKIPPING OPTIONAL
DEPENDENCY: fsevents@^1.0.0 (node_modules\@angular\cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL
DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted
{"os":"darwin","arch":"any"} (current:
{"os":"win32","arch":"x64"})
F:\AngularTestApp\DemoApp>ng
new MyApp
create
MyApp/e2e/app.e2e-spec.ts
(288 bytes)
create
MyApp/e2e/app.po.ts
(208 bytes)
create
MyApp/e2e/tsconfig.e2e.json
(235 bytes)
create
MyApp/karma.conf.js
(923 bytes)
create
MyApp/package.json
(1311 bytes)
create
MyApp/protractor.conf.js
(722 bytes)
create
MyApp/README.md
(1021 bytes)
create
MyApp/tsconfig.json
(363 bytes)
create
MyApp/tslint.json
(2985 bytes)
create
MyApp/.angular-cli.json
(1241 bytes)
create
MyApp/.editorconfig
(245 bytes)
create
MyApp/.gitignore
(516 bytes)
create
MyApp/src/assets/.gitkeep
(0 bytes)
create
MyApp/src/environments/environment.prod.ts
(51 bytes)
create
MyApp/src/environments/environment.ts
(387 bytes)
create
MyApp/src/favicon.ico
(5430 bytes)
create
MyApp/src/index.html
(292 bytes)
create
MyApp/src/main.ts
(370 bytes)
create
MyApp/src/polyfills.ts
(2667 bytes)
create
MyApp/src/styles.css
(80 bytes)
create
MyApp/src/test.ts
(1085 bytes)
create
MyApp/src/tsconfig.app.json
(211 bytes)
create
MyApp/src/tsconfig.spec.json
(304 bytes)
create
MyApp/src/typings.d.ts
(104 bytes)
create
MyApp/src/app/app.module.ts
(316 bytes)
create
MyApp/src/app/app.component.html
(1120 bytes)
create
MyApp/src/app/app.component.spec.ts
(986 bytes)
create
MyApp/src/app/app.component.ts
(207 bytes)
create
MyApp/src/app/app.component.css
(0 bytes)
Installing
packages for
tooling via
npm.
Installed
packages for
tooling via
npm.
Successfully
initialized git.
Project
'MyApp' successfully
created.
F:\AngularTestApp\DemoApp>cd
MyApp
F:\AngularTestApp\DemoApp\MyApp>npm
install
npm
WARN optional
SKIPPING OPTIONAL
DEPENDENCY: fsevents@^1.0.0
(node_modules\chokidar\node_modules\fsevents):
npm
WARN notsup
SKIPPING OPTIONAL
DEPENDENCY: Unsupported
platform for
fsevents@1.1.2:
wanted {"os":"darwin","arch":"any"}
(current: {"os":"win32","arch":"x64"})
npm WARN codelyzer@3.2.2 requires a
peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0
but none
was installed.
npm
WARN codelyzer@3.2.2
requires a
peer of
@angular/core@^2.3.1
|| >=4.0.0-beta <5.0.0
but none
was installed.
F:\AngularTestApp\DemoApp\MyApp>ng
serve
** NG
Live Development
Server is
listening on
localhost:4200,
open your
browser on
http://localhost:4200/
**
Date:
2017-11-10T06:34:59.935Z
Hash:
769315aa3e77866144dd
Time:
6197ms
chunk
{inline} inline.bundle.js
(inline) 5.79
kB [entry]
[rendered]
chunk
{main} main.bundle.js
(main) 20.5
kB [initial]
[rendered]
chunk
{polyfills} polyfills.bundle.js
(polyfills) 550
kB [initial]
[rendered]
chunk
{styles} styles.bundle.js
(styles) 33.6
kB [initial]
[rendered]
chunk
{vendor} vendor.bundle.js
(vendor) 7.02
MB [initial]
[rendered]
webpack:
Compiled successfully.
After execute ng serve command, ** NG Live
Development Server is listening on localhost:4200, open your browser on
http://localhost:4200/ **
Generating
Commands - Components, Directives, Pipes, Services
and so on
1. Component - ng g component my-login
2. Directive - ng g directive my-directive
3. Class - ng g class my-class
4. Pipe - ng g pipe my-pipe
5. Service - ng g service my-service
6. Guard - ng g
guard my-guard
7. Interface -
ng g interface my-interface
8. Enum
- ng g enum my-enum
9. Module
- ng g module my-module
Example
looks like –
F:\AngularTestApp\DemoApp\MyApp>ng
generate component login
create
src/app/login/login.component.html
(24 bytes)
create
src/app/login/login.component.spec.ts
(621 bytes)
create
src/app/login/login.component.ts
(325 bytes)
create
src/app/login/login.component.css
(0 bytes)
update
src/app/app.module.ts
(394 bytes)
F:\AngularTestApp\DemoApp\MyApp>ng
generate component signup
create
src/app/signup/signup.component.html
(25 bytes)
create
src/app/signup/signup.component.spec.ts
(628 bytes)
create
src/app/signup/signup.component.ts
(329 bytes)
create
src/app/signup/signup.component.css
(0 bytes)
update
src/app/app.module.ts
(476 bytes)
And so on are similar like above example code.
Some
Additional Commands -
1. ng
new
2. ng
serve
3. ng
generate
4. ng
lint
5. ng
test
6. ng
e2e
7. ng
build
8. ng
get
9. ng
set
10. ng
doc
11. ng
eject
12. ng
xi18n
13. and
so on
I hope you are enjoying with this post!
Please share with you friends!! Thank you!!!