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.

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!!!