python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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.

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/[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/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 [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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions