When setting up Angular at https://angular.io/docs/ts/latest/guide/setup.html, it is suggested to use the QuickStart seed. The package.json for this seed contains the necessary dependencies that need to be downloaded:

"dependencies": {
  "@angular/common": "~2.4.0",
  "@angular/compiler": "~2.4.0",
  "@angular/core": "~2.4.0",
  "@angular/forms": "~2.4.0",
  "@angular/http": "~2.4.0",
  "@angular/platform-browser": "~2.4.0",
  "@angular/platform-browser-dynamic": "~2.4.0",
  "@angular/router": "~3.4.0",

  "angular-in-memory-web-api": "~0.2.4",
  "systemjs": "0.19.40",
  "core-js": "^2.4.1",
  "rxjs": "5.0.1",
  "zone.js": "^0.7.4"
}

If desired, you can customize your own package.json by running npm init, copying these dependencies (or most of them), and then executing npm install with your custom package.json file.

Setting Up Angular 4 offers two methods of installation:

Important: Ensure that node.js and npm are already installed on your system.

1. Follow the cloning steps using terminal commands.
2. Download the QuickStart seed, unzip it into your project directory, then proceed with the provided terminal commands.

1. Cloning Method :

If you wish to create a project named helloworld, execute the following commands in your terminal:

 git clone https://github.com/angular/quickstart.git helloworld
 cd helloworld
 npm install
 npm start

Upon executing the final command, you will be able to view the output in your browser like this

https://i.sstatic.net/NB6wL.png

2. Downloading Method :

Download the QuickStart seed, unzip it into your project folder, then follow the instructions below using terminal commands.

cd quickstart
npm install
npm start

For more detailed information, visit the official site

1. Copy and paste the following code into a new file, naming it package.json.

   {
   "name": "demo-app",
   "version": "1.0.0",
   "author": "Aravind",
   "description": "setting up files for the first Demo App",
   "scripts": {
       "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
       "tsc": "tsc",
       "tsc:w": "tsc -w",
       "lint": "tslint ./app/**/*.ts -t verbose",
       "lite": "lite-server",
       "typings": "typings",
       "postinstall": "typings install"
   },
   "license": "ISC",
       "dependencies": {
       "@angular/common": "2.0.0",
       "@angular/compiler": "2.0.0",
       "@angular/core": "2.0.0",
       "@angular/forms": "2.0.0",
       "@angular/http": "2.0.0",
       "@angular/platform-browser": "2.0.0",
       "@angular/platform-browser-dynamic": "2.0.0",
       "@angular/router": "3.0.0",
   
       "core-js": "^2.4.1",
       "reflect-metadata": "^0.1.3",
       "rxjs": "5.0.0-beta.12",
       "systemjs": "0.19.27",
       "zone.js": "^0.6.23",
   
       "bootstrap": "^3.3.6"
   },
   "devDependencies": {
       "concurrently": "^2.2.0",
       "lite-server": "^2.2.0",
       "tslint": "^3.7.4",
       "typescript": "^2.0.2",
       "typings": "^1.0.4"
   },
   "repository": {}
   }
   

2. Open the command prompt and go to the root folder.

   npm install 
   
   or
   
   npm i 
   

If you prefer creating a new package.json

1. Go to a folder in the command prompt

2. Run this command

   npm init
   

3. This will generate a new package.json file with the code above for installing angular2 and other basics.

For an easy setup guide, check out this post.

The choice of build tool will determine the process for installing Angular components. For example, if you are using webpack, you can simply add the necessary angular components to your dependencies like so:

  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0"
}

You may also need to include any additional vendor modules that are required for your specific situation.

1. Begin by installing Angular CLI version 1.1.3
2. Next, uninstall the latest version of CLI using the command npm uninstall –g @angular/cli
3. Clear the cache with the command: npm cache clean
4. Proceed to install the specific version of Angular CLI with the command

   npm install –g @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcdfd0d5fc8d928d928f">[email protected]</a>

5. Open the Node.js Command Prompt
6. Navigate to the project folder location using the command cd project_name
7. Install the following packages:
8. npm i codemirror
9. npm i ng2-codemirror
10. npm i ng2-split-pane
11. npm i ng2-daterange-picker
12. Run npm install
13. Finally, execute the command ng serve

Setting Up Angular Dependencies

• Firstly, ensure you have a stable version of Node.js installed by running the command node -v
• Next, install TypeScript by executing the following command: npm install -g typescript
• After that, download and set up Angular CLI using the command npm install -g @angular/cli

Angular is known for its component-based architecture. Each component plays a vital role in building the entire application. A component typically consists of custom elements, HTML elements, ShadowDOM, and HTML imports.

1. Get the sample code from https://angular.io/
2. Save and change the name of the code.

3. Go to the main directory in Command Prompt.

   $ cd myproject
   

4. Run the following commands

   $ npm install
   $ npm start