How to create an Angular application

Versions

• This course is built on the following versions:
  • Angular : 18.1.0
  • Angular CLI : 18.1.3
  • Node.js: 20.16.0
  • npm client: 10.8.2
• You can find these versions in the engines part of the Angular CLI package.json

Prerequisites

• Working with the Angular framework requires some prior knowledge:
  • TypeScript/JavaScript
  • HTML
  • CSS

TypeScript

• You will be writing TypeScript when developing your Angular app
• TypeScript extends JavaScript by adding types
• In the end, TypeScript transcompiles to JavaScript
• Knowledge of TypeScript is helpful, but not required. You'll learn it on the go!

Node.js & npm client

• Download and install from the Node.js website
• Node.js >= 20.16.0
• npm client is installed with Node.js by default

Version check

• Check your versions with the following commands:

node -v
npm -v

Angular CLI

• We use the Angular CLI to
  • create projects
  • generate code
  • perform handy development tasks (testing, bundling, deployment)
• To install the Angular CLI, open a terminal window and run the following command:

npm install -g @angular/cli@18.1.0

• This command installs the @angular/cli npm package globally (-g) on your system

@angular/cli@18.1.0

• This course is built on version 18.1.0 of the Angular CLI
• The @ character allows us to install a specific version of a npm package

npm install -g

• Globally means that you can use the installed npm package on any folder on your device (for the Angular CLI this is about executing commands to enhance the development process)
• You can limit the scope of an npm package by removing the -g parameter, so you install the package into a specific folder (and subfolders)

IDE

Visual Studio Code

• In this course we will work (as recommended by the Angular team) with Visual Studio Code as editor for our Angular applications
• Download Visual Studio Code (VS Code)

Others

• Other possible IDEs: IntelliJ IDEA, WebStorm, ...

Our first app

• Thanks to the Angular CLI we can create a working Angular application with one single command: ng new [app name]
• Let's create an Angular application for our news company
• Navigate to a folder where you want to store your Angular application code and execute the following command:

ng new my-news

PowerShell on Windows

• If you are using PowerShell on Windows, you may have to enable script execution with the Set-ExecutionPolicy RemoteSigned command before you can run the ng new command

Error npm install

• You could get an error during/after the npm install (that is performed by the ng new command)
• This has something to do with a wrong node installation.
• You can easily switch between node versions using nvm (windows installer!)
• nvm use 20.16.0 will for example switch the node version to 20.16.0

• The initial creation will ask you some questions. Answer them as described below:
  • Which stylesheet format would you like to use? (Use arrow keys)
    • Choose CSS
  • Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?
    • Choose N

My News application

• During the course you will hopefully learn a lot about the Angular framework
• All these techniques will be explained by integrating and using them into the My News application
• This web application will be a news app, where journalists can add articles and visitors can read them, like them, add comments...

• Navigate to the my-news folder
• Build and serve the application locally by executing the following command

ng serve --open

• If all went right, you should see a page similar to the following:

npm start

• In the package.json you can specify scripts, which will execute one or more commands
• npm start executes ng serve
• You can add multiple parameters to extend the npm start script:
  • --open or -o: automatically opens the browser
  • --port 5878 : opens application on port 5878
• Full implementation:

"scripts": {
    "ng": "ng",
    "start": "ng serve -o --port 5878",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

GitHub

To track all your changes and progress, you can use your GitHub account to create a new repository. This is very handy to revert any changes, ... especially if you start working on your project!