How to Setup Angular 5 Development Environment
and Unit Test?
Setup the Development Environment -
1. Install
Node.js and NPM - If you are not already have on your machine!
2. Then
you install the Angular CLI globally!
Follow
the below steps to setup angular 5 app with e2e test-
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.
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)
Project
looks like –
Result
looks like –
I hope you are enjoying with this post!
Please share with you friends!! Thank you!!!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
