Scribd Logo
Upload

Welcome to Scribd!

  • Setup Angular Project..v.1doc

    Uploaded by

    BHUVANA
    32 views6 pages
    This document provides instructions for setting up a new Angular project using Angular CLI version 6. It describes uninstalling any existing Angular or Node versions, installing the required versions of Node and Angular CLI, creating a new project using the Angular CLI template, and resolving any dependency issues that may occur during project setup.

    Original Description:

    Test

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides instructions for setting up a new Angular project using Angular CLI version 6. It describes uninstalling any existing Angular or Node versions, installing the required versions of Node and Angular CLI, creating a new project using the Angular CLI template, and resolving any dependency issues that may occur during project setup.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    32 views6 pages

    Setup Angular Project..v.1doc

    Uploaded by

    BHUVANA
    This document provides instructions for setting up a new Angular project using Angular CLI version 6. It describes uninstalling any existing Angular or Node versions, installing the required versions of Node and Angular CLI, creating a new project using the Angular CLI template, and resolving any dependency issues that may occur during project setup.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 6

    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

    You might also like