Create Angular project with PrimeNg

March 3, 2026 ยท View on GitHub

Installing Angular CLI

Before we start creating an Angular project, let's install Angular CLI, a command-line interface that simplifies Angular application development.

  1. Open your terminal or command prompt.

  2. Run the following command to install Angular CLI globally on your system:

npm install -g @angular/cli

Creating a New Angular Project

Now that we have Angular CLI installed, let's create a new Angular project.

Choose the directory where you want to create the project and navigate to it in the terminal.

Run the following command to create a new Angular project:

ng new project-name

The Angular CLI will ask some questions about the project configuration. You can choose to configure them according to your needs or simply press "Enter" to use the default settings.

Wait until the creation process is completed. The Angular CLI will create the basic project structure and install the necessary dependencies.

Navigate to the directory of the newly created project:

cd project-name

Now, you can start the development server to run the project:

ng serve

If you are running a devcontainer inside Linux, you should run the project with the following options:

ng serve --host 0.0.0.0 --port 4200

If you are running a devcontainer inside Windows, you should run the project with the following options:

ng serve --host 0.0.0.0 --port 4200 --poll 2000

Open your browser and visit http://localhost:4200/.
You should see the Angular application running.

Project Structure

project-name/
  |- e2e/
  |- node_modules/
  |- src/
  |  |- app/
  |  |  |- components/
  |  |  |- services/
  |  |  |- app.config.ts
  |  |  |- app.component.ts
  |  |  |- app.component.html
  |  |  |- app.component.css
  |  |  |- app.component.spec.ts
  |  |- assets/
  |  |- environments/
  |  |- index.html
  |  |- main.ts
  |  |- styles.css
  |- angular.json
  |- package.json
  |- tsconfig.json
  |- ...

Project Structure

This is the basic structure of an Angular project. As you develop the application, other directories and files might be created to accommodate new components, services, and so on. It's important to follow this organization to maintain a clean and well-structured Angular project, facilitating collaboration and maintenance.

Explanation of the Structure:

  • e2e/: The "e2e" directory contains end-to-end (e2e) tests written using the Protractor testing tool. These tests simulate user actions and verify if the application works correctly in an environment similar to production.

  • node_modules/: This is the directory where all npm package dependencies are installed. It is created automatically when you run npm install to download the project's dependencies.

  • src/: This is the main directory where the source code of the Angular application is located.

  • src/app/: The "app" directory contains all components, services, and files related to the application's logic.

  • src/app/components/: In this directory, you can organize your components into subdirectories or create individual components. Each component consists of four files: .component.ts, .component.html, .component.css, and .component.spec.ts.

  • src/app/services/: In this directory, you can create and organize services used to share data and logic between components.

  • src/app/app.config.ts: The "app.config.ts" file is the root configuration of the application. It imports and declares the providers used by the application.

  • src/app/app.component.ts: The "app.component.ts" file is the root component of the application, which controls the main template "app.component.html" and the stylesheet "app.component.css".

  • src/app/app.component.html: The "app.component.html" file is the main template of the application, defining the DOM structure that will be rendered.

  • src/app/app.component.css: The "app.component.css" file contains styles specific to the root component.

  • src/app/app.component.spec.ts: The "app.component.spec.ts" file contains unit tests for the root component.

  • src/assets/: The "assets" directory contains static resources for the application, such as images, JSON files, etc.

  • src/environments/: Here, you will find environment-specific configurations, such as environment variables for different development, testing, and production environments.

  • src/index.html: The "index.html" file is the main HTML page of the application, where the Angular app is bootstrapped.

  • src/main.ts: The "main.ts" file is the entry point of the Angular application. It calls the platformBrowser().bootstrapApplicaiton() function to initialize the root component "AppComponent".

  • src/styles.css: The "styles.css" file is the global stylesheet for the application, defining styles that affect all components.

  • angular.json: The "angular.json" file contains the configuration for the Angular project, such as global styles, scripts, build configurations, and other Angular CLI-specific settings.

  • package.json: The "package.json" file is used by npm to manage the project's dependencies and store information about the project, such as its name, version, scripts, etc.

  • tsconfig.json: The "tsconfig.json" file is the TypeScript configuration file, where you can define the TypeScript compiler settings for the project.

Hands on

See Task: Create Angular Project of Account Frontend Example App.