Create Angular Project Using Angular CLI

Create 1st Angular Project Using Angular CLI

We will discuss…

• Create Angular Application using Angular CLI
• Step by Step with very easy explanation
• Already discussed ANGUALR CLI Machine Setup
• Imp CLI Command Reference and Other concepts

Suggested Videos: 

• Angular CLI introduction and Machine Setup
• TypeScript Introduction

Create ANGULAR Project using CLI
Step 1: Install the Angular CLI globally using npm.
Open a terminal/console window and enter the following command:
npm install -g @angular/cli
ng version :will let you know which version of Angular is referenced by the current directory.
npm  list –global : display all the installed component of package

Step 2: Create a workspace and initial application

• Run the CLI command ng new and provide the name my-dream-app, as shown here:
• ng new my-dream-app
• The ng new command prompts you for information about features to include in the initial app.
• Accept the defaults by pressing the Enter or Return key.
• The CLI creates a new workspace and a simple Welcome app, ready to run.

Step 3: Run the application

• Go to the workspace folder (my-app).
• cd my-dream-app
• The Angular CLI includes a server, so that you can easily build and serve your app locally.

• Step 4: Easily test your app locally while developing. Launch the server by using the CLI command ng serve, with the --open option.
• ng serve --open
• The ng serve (start) command launches the server, watches your files, and rebuilds the app as you make changes to those files.
• The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

You will see: running app

CLI Command Reference

• We are invoking the tool on the command line through the ng executable. Online help is available on the command line.
• Enter the following to list commands or options for a given command (such as generate) with a short description.
• ng help
• ng generate –help

CLI command-language syntax as follows:
ng commandNameOrAlias requiredArg [optionalArg] [options]

• Option names are prefixed with a double dash (--). Option aliases are prefixed with a single dash (-). Arguments are not prefixed.
• For example: ng build my-app -c production

Important CLI commands
ng generate

• Generate components, routes, services and pipes with a simple command.
• The CLI will also create simple test shells for all of these.

Test, Lint

• Make your code really shine. Run your unit tests
• your end-to-end tests, or execute the official Angular linter with the breeze of a command.

Other concepts
As we progress through the course, we will discuss all these in details

• Command Overview (few already discussed)
• Workspaces and project files and project configuration
• Building with Bazel tool
• Relative paths
• Boolean and enumerated options and lot more.

Next Video: Angular 9 Features