Top

Popular Search:

Installation

How to Start

Welcome to Angular! Angular helps you build modern applications for the web, mobile, or desktop.

For getting started an Angular application you needs two things as Prerequisites.

Prerequisites

Before you begin, make sure your development environment includes

  • Node
  • npm (Node Package Manager)

Node.js

  • Download the above 20 & below 22 version node.js from nodejs.org.

  • Install Node.js using downloaded file

  • To check your node version, run node -v in a terminal/console window.

npm (Node Package Manager)

  • Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager.

  • This Quick Start uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window.

  • For better understanding Angular we suggest you to once go through official documentation of Angular from Angular Docs

Angular setup

If you want Cuba theme setup then directly follow next Cuba setup section

Installing Angular CLI

  • You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks as it is a progressive framework for building user interfaces.

  • Install the Angular CLI globally.

  • To install the CLI using npm, open a terminal/console window and enter the following command: 

    npm install -g @angular/cli

Create Initial application

  • 1. Run the CLI command react create and provide the name my-app, as shown here: 

    ng new my-app

  • 2. The angular new command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.

Serve Application

  • 1. Go to the workspace folder (my-app). 

    cd my-app

  • 2. Launch the server by using the CLI command ng serve 

    ng serve
Tailwind setup

Install Tailwind CSS

Run this in the root of your Angular project: 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This creates a tailwind.config.js file.

Configure Tailwind

In tailwind.config.js , set the content to include your Angular files: 

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind Directives to Global Styles

Open src/styles.css (or styles.scss if you're using SCSS), and add: 

@tailwind base;
@tailwind components;
@tailwind utilities;

If you're using SCSS, name the file styles.scss and make sure angular.json points to it.

What if npx tailwindcss init doesn't work?

If the command fails, follow one of the options below to fix it:

Option 1: Reinstall Tailwind and try again

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Option 2: Manually create the config file

If needed, create a tailwind.config.js file in your project root with this content:

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Cuba setup

If you have already download and install node.js, tailwind CSS and Angular CLI then ignore prerequisites accordingly.

Node.js

Download the above 20 & below 22 version node.js from nodejs.org.

Installing Angular CLI

npm install -g @angular/cli

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This creates a tailwind.config.js file.

Setup Cuba theme by

  • 1) Download and extract an Cuba theme from themeforest
  • 2) Extract it and then go in to theme folder.
    • cd theme
  • 3) Import all dependency by installing npm command
    • npm install
  • 4) Now you are in stage to successfully run Cuba using below command:
    • ng serve

    Once you serve your application by default it will take their default port so you can open port using localhost:4200

    Make sure you are not running any other angular project in local if so then use new generated port from terminal with label called app running at:

    Some Common solution if you do not run project successfully
    • Use Latest Version of node.js
    • Remove node_module and package-lock.json file and again do npm install
    • You can again download theme from themeforst and then again run
    • Then also if you don't solve issue you can generate a ticket.

Build Application

Build you application for host on server using below command:

ng build