Setup Angular Project
Pre – Requisite:
Node : 10.8.0 ( node version need to atleast 8.9 for angular 6).
Npm: 6.2.0
Uninstall Existing Angular:
We are going to install fixed angular version 6.1.3. so if lower version is exist we
have to uninstall them using below command.
npm uninstall –g angular-cli (or) npm uninstall –g @angular/cli
Angular-cli is used for version 2 and @angular/cli is used for version 4 and 6.
If your node version is below 8.x you have to uninstall node also.
Uninstall Existing Node:
Uninstall all the packages those are installed via npm globally eg : npm uninstall –g
typescript. Because it may cause cache issue after reinstallation of new node.js.
If you are sure about those packages goto
“C:\Users\bhuvaneswari_v\AppData\Roaming\npm\node_modules “ and check it.
Go to your Control Panel\Programs\Programs and Features and find node.js and
uninstall it.
Now go to “C:\Users\user_name\AppData\Roaming” find npm and npm-cache and
delete permanently (SHIFT + DELETE ).
You are now successfully uninstalled node.js , install new node.js with 10.8.0 version
Angular Installation:
Use below command to install angular 6.x
npm i –g @angular/cli .
i- install, g- globally . you can find this @angular/cli in
“C:\Users\bhuvaneswari_v\AppData\Roaming\npm\node_modules “.
Known issues in installation:
while installing you may end up with below issue ,
Page | 1
To fix this issue you have to install typescript globally using below command,
npm i –g typescript
After typescript installation , continue with angular installation and check angular
version using ng –v. This will show your current version of angular/cli like below.
Page | 2
Setup New Project:
You can either create a angular app from scratch or angular project template from cli.
It is recommended to use template project because it reduce lot of time for installing
packages those are necessary . also it has e2e and unit test files. Install new project
template using below command.
ng new projectname ( projectname without space).
It will create template for your project and install node modules. After successful
installation your project structure like below.
Page | 3
Some times node modules installation may fails, and throw error like below.
It happen because incompatibility of dependency versions in package.json.
Page | 4
Dependency and dev dependency version in above pictures are conflict with each
others.
In this kind of situation we have to create our own package.json manually.
Setup Package.Json
Delete dependencies and dev dependencies in your package.json and install below
commands in order. Here --save is used to update your dependency and --save-dev for
dev dependency.
1. npm i --save core-js
2. npm i –save zone.js
3. npm i –save rxjs
4. npm i –save-dev @angular/compiler-cli
5. npm i –save-dev typescript
6. npm i –save-dev @angular-devkit/build-angular
7. npm i –save @angular/core
8. npm i –save @angular/common
9. npm i –save @angular/compiler
10. npm i –save @angular/platform-browser
11. npm i –save @angular/platform-browser-dynamic
Page | 5
12. npm i –save @angular/forms
13. npm i –save @angular/router
now you have created basic package,json without e2e (protractor, jasmine) , unit test (
karma ).
now you can build and start the project using ng build, ng serve.
Update Existing projects
Angular cli 6.x allows us to update our project to latest version of angular using ng
update command. For this your project must be atleast version 4 .
Use this checklist for more simplicity, https://update.angular.io/.
Go to your proj folder enter below command
1. ng update “proj_name”
2. ng update @angular/core
3. ng update @angular/material ( optional).
4. npm i rxjs-compat.
Page | 6
