Create Angular 8 Project - Quick Steps

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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 Hello World Example Tutorial

>> Angular 8 + Spring Boot Example Tutorial 

>> Angular 7|8 ngFor Example

>> Angular 7|8 ngIf, ngIf else, ngIf then Example
>> Angular 7|8 ngSwitch Example

Angular 8 CRUD App

>> Angular 8 CRUD Example Tutorial

>> Angular 6 CRUD App Example
>> How to Add Bootstrap to an Angular 8
>> How to Add Bootstrap to an Angular 7

Angular 8 with Spring Boot CRUD App Series

>> Spring Boot + Angular 8 CRUD Example Tutorial - Main Tutorial
>> Spring Boot + Angular 8 CRUD, Part 1 - Develop Spring Boot CRUD Rest APIs
>> Spring Boot + Angular 8 CRUD, Part 2 - Create Angular 8 App
>> Spring Boot + Angular 8 CRUD, Part 3 - Develop Angular 8 CRUD Operations
>> Spring Boot + Angular 8 CRUD, Part 4 - Angular 8 CRUD App Configuration
>> Spring Boot + Angular 8 CRUD, Part 5 - Running Angular 8 CRUD App

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF