Angular 5 Setup Development Unit Test Environments

Angular 5 Setup Guide for Development and Unit Test Environments

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.

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
`-- @angular/[email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules\@angular\cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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/ (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/ (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/ (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 [email protected] requires a peer of @angular/[email protected]^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..
My Blogs - and
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide. Powered by Blogger.