Create Angular 8 Project - Quick Steps

Author:
In this tutorial, we will create a simple Angular 8 project step by step.

Prerequisites

Let's get started with the prerequisites. You will need to have:
  • The knowledge of TypeScript, HTML, and CSS.
  • Node and NPM installed on your system.

Step 1 - Install Node and NPM

First, download the Windows installer from the Node.js website. If you installed under the default configuration, Node.js should now be added to your PATH. The npm comes with Node JS.

Now, we need to check the Node.js and npm versions. Open the terminal or Node command line then type these commands.
C:\Angular>node -v
v10.15.3

C:\Angular>npm -v
6.9.0

Step 2 - Install the latest version of Angular CLI

To install or update Angular 8 CLI, type this command in the Terminal or Node Command-Line.
npm install -g @angular/cli
Now, let's check the latest version of Angular CLI:
C:\angular>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.1
Node: 10.15.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.1
@angular-devkit/core         8.0.1
@angular-devkit/schematics   8.0.1
@schematics/angular          8.0.1
@schematics/update           0.800.1
rxjs                         6.4.0

Step 3 - Create an Angular 8 App using Angular CLI

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications.
If you are new to Angular CLI then check out official documentation at https://cli.angular.io.
Let's use the below command to generate an Angular 8 App. We name this project as "angular8-example".
ng new angular8-example
Here is the output of the app:
C:\Angular>ng new angular8-example
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE angular8-example/angular.json (3814 bytes)
CREATE angular8-example/package.json (1280 bytes)
CREATE angular8-example/README.md (1052 bytes)
CREATE angular8-example/tsconfig.base.json (458 bytes)
CREATE angular8-example/tsconfig.json (475 bytes)
CREATE angular8-example/tslint.json (3184 bytes)
CREATE angular8-example/.editorconfig (274 bytes)
CREATE angular8-example/.gitignore (631 bytes)
CREATE angular8-example/.browserslistrc (853 bytes)
CREATE angular8-example/karma.conf.js (1049 bytes)
CREATE angular8-example/tsconfig.app.json (292 bytes)
CREATE angular8-example/tsconfig.spec.json (338 bytes)
CREATE angular8-example/src/favicon.ico (948 bytes)
CREATE angular8-example/src/index.html (320 bytes)
CREATE angular8-example/src/main.ts (372 bytes)
CREATE angular8-example/src/polyfills.ts (2835 bytes)
CREATE angular8-example/src/styles.css (80 bytes)
CREATE angular8-example/src/test.ts (753 bytes)
CREATE angular8-example/src/assets/.gitkeep (0 bytes)
CREATE angular8-example/src/environments/environment.prod.ts (51 bytes)
CREATE angular8-example/src/environments/environment.ts (662 bytes)
CREATE angular8-example/src/app/app-routing.module.ts (246 bytes)
CREATE angular8-example/src/app/app.module.ts (393 bytes)
CREATE angular8-example/src/app/app.component.html (25757 bytes)
CREATE angular8-example/src/app/app.component.spec.ts (1152 bytes)
CREATE angular8-example/src/app/app.component.ts (241 bytes)
CREATE angular8-example/src/app/app.component.css (0 bytes)
CREATE angular8-example/e2e/protractor.conf.js (869 bytes)
CREATE angular8-example/e2e/tsconfig.json (299 bytes)
CREATE angular8-example/e2e/src/app.e2e-spec.ts (670 bytes)
CREATE angular8-example/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.

Step 4 - Run Angular 8 App 

The Angular CLI includes a server so that you can build and serve your app locally.
Navigate to the workspace folder, such as angular8-example.
Run the following command:
ng serve
By default, the Angular app runs on 4200 port but you can change default port with the following command:
ng serve --port 4204
Hit http://localhost:4200/ link in the browser will open the below page on the screen.

Related Angular 8 Tutorials

Angular 8 CRUD App

Angular 8 with Spring Boot CRUD App Series

Comments

Post a Comment

Leave Comment