Installation¶
Before we get into how to install and configure an Angular Application Development Environment with Angular CLI, please make sure you meet the prerequisites:
- Basic knowledge of JavaScript and TypeScript
- LTS version Node.js
- NPM package manager
- HTML/CSS/JS editor, e.g. IntelliJ IDEA lub Visual Studio Code
- Basic knowledge of the command line (CMD / PowerShell / Terminal)
Angular CLI¶
Angular CLI (Console Line Interface) is a command line interface for Angular. This tool helps you get started quickly with Angular Application development.
The CLI also makes it easy to add functions (components, directives, services) to existing Angular-based applications as well as to test, build and distribute applications.
Installing Node.js¶
If you don't have Node.js
, install it before the next step. The installation process is described in [this section] (../npm.md).
Angular CLI installation¶
To install Angular CLI, execute the following command in the console window:
# flag "-g" denoting global installation
npm install -g @angular/cli
Execute the following command at the command prompt to verify its correctness:
ng version
The command should return the current version of Angular CLI and TypeScript.
Create an angular application¶
Now that everything is ready, we can build our first application using Angular. Open a command prompt, navigate to the folder where you want to create the Angular directory and execute the following command:
ng new my-app
The ng new
command will prompt for information about features to include in the initial application. Accept the defaults with Enter
.
This command will do a few things for us:
- Will initialize the
git
repository. - Will create a
package.json
with all Angular dependencies. - Configure TypeScript, Webpack, Tests.
- Will create a
src
folder with starting code. - Will do
npm install
to get all packages intonode_modules
.
Now go to the newly created directory with the application:
cd my-app
Start the embedded server that observes file changes and builds the application:
ng serve --open
The --open
option automatically opens the tab in the browser to http://localhost:4200/.
If the installation and configuration were successful, you should see a page similar to the one in the screenshot below: