How To Create Angular App Using Angular CLI

Before one year, I planned to create a simple Angular app but at the time I didn't have any idea about Angular CLI. So, I faced a lot of issues while configuring things. I learned a lot and spent days configuring the Angular app before I was finally done.

 

In this article, we will learn how to create an Angular app using Angular CLI. Angular CLI is just a command line interface that helps us create an Angular app very easily within two minutes.

To know more about Angular, please go through the given links.

• How to create a simple Angular application
• How to work with dropdown in Angular
• How to post Form-Data in Angular using WebAPI
• Angular4 content to learn

Agenda

• How to create an Angular app using Angular-CLI
• How to use Angular CLI commands 
• Create an app with component, module, and HTML.
• Create HTML to show "Welcome to C# Corner, Angular app using Angular CLI by Bikesh Srivastava".
• Explanantion of each Angular CLI command.

What is Angular CLI?

Angular CLI is "a command line interface to create angular app with webpack and other configuration". Angular CLI provides four to five commands to create Angular application easily. Some of the commands are given below.



For more details, go to the official site of Angular CLI - https://cli.angular.io/ 

 

Don't confuse with the "my-dream-app" word, it's just the project name. You can write anything. Angular CLI provides us a very powerful, simple and easy command with which we can create an Angular app within two minutes. So, I would like to suggest you use Angular CLI commands to create Angular apps.

If you are using Angular CLI, you don't need to configure anything extra. Just run single command and run the application.

 

Let's follow the below steps

Step 1

Install Node.js npm on your system. You can download it from the Node.js official site https://nodejs.org/en/. After the installation is completed, check if it is installed or not. For that, open CMD on your system and type "npm -v" followed by pressing the Enter key.  You can se the latest version of npm installed on your system.

 

Step 2

Open cmd on your system and type "npm install -g @angular/cli" and press Enter. The Angular CLI will be installed for all the users on the computer because I used "-g". If you don't want to apply Angular CLI to all the users, you can remove -g from command.

 

Now, we can run Angular CLI to create, serve, run etc....

These Angular CLI commands can be used now.

• ng new project_Name
• ng generate
• ng serve 
• ng Test,Lint,Format

ng new app_Name

Before running this command, be sure "npm install -g @angular/cli" is executed. You don't have any need to run it again and again. You can use ng new command on system cmd command and on VS code also. So now, I am going to create a simple application using VS code.

 

 

Open Visual Studio Code => Open terminal to run command. Then, choose a directory to create project. Here, Angular4 is my project name.

Press Enter and check if the Angular4 project is created on the desktop with related files. One more point - you don't need to run npm install command. Angular CLI will do that by deafult.

 

 

In this image, you can see that Angular CLI created an Angular app and then installed packages from npm.

Note- If you have already installed Git on your system, Angular CLI configures Git with your project. In the following image, all configuration in created and installed successfully.

 

ng serve / npm start 

Now, we are ready to run the app. So, we can use either of the commands "ng serve" or "npm start". The "ng serve" runs the application directly while the "npm start" command runs 'ng serve' in the background. See package.json for more details. 

 

Package.json

{
  "name": "angular4",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@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",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.7",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

In package.json, you can add or remove dependencies,scripts.etc....

 

So now it is time to run the aaplication. Use npm start or ng serve in terminal or cmd. You should keep in mind that the default port for Angular CLI is http://localhost:4200/ and the default browser is Google Chrome. So, copy and paste the URL in Chrome browser and hit Enter. 

 

Output 

 

So, if you want to change the port number according to your choice, don't worry about that. I am here to tell you how we can change the default port from 4200 to anything.

Open Angular-cli.json in your project and add 1-3 lines of code. Suppose I want to chnage it from 4200 to 2500. See the code given below.

{
    "defaults": {
        "serve": {
            "port": 2500
        }
    }
}

 If you are not getting where we need to add this line of code, just see the complete code of Angular-cli.json.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular4"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "serve": {
      "port": 2500
    },
    "styleExt": "css",
    "component": {}
  }
}

Highlighted code is updated by me to change the port number.

So now it is time to work more with the Angular app and enjoy.

For more details, go to the official site of Angular - https://cli.angular.io/