with Johannes Hoppe

---

Welcome – great to have you with us!
In this repository, you will find all the preparation details and, during the workshop, the source code of our sample application.

✅ Preparation

To get started right away, please complete a few setup steps.
The entire installation will take about 30 minutes.

1.) Required Software

1. Node.js 18, 20, or 22 (latest minor version): https://nodejs.org
2. Google Chrome: https://www.google.com/chrome/
3. Visual Studio Code: https://code.visualstudio.com
   or another suitable IDE like IntelliJ/WebStorm
   • We recommend installing a selection of extensions for Visual Studio Code.
     We’ve prepared an Extension Pack that sets everything up for you:
     Angular-Schule: Extension Pack (Visual Studio Code only)

2.) Proxy?

If your company network uses a proxy for internet access, special settings may be required.
We’ve created a guide for this:
https://workshop.angular.schule/proxy

If you encounter proxy-related issues, please contact us, and we’ll find a solution.

3.) Install Packages

The Angular CLI is the official build tool for Angular. You can install the CLI globally using the following command:

npm install --location=global @angular/cli

⚠️ Please check the installed versions afterward to ensure we are all on the same version during the workshop:

node -v
> Expected: 18.19.x or higher, 20.11.x or higher, or 22.x (but not 19.x or 21.x!)

ng version
> Expected: 19.x.x (!)

If you already have an older version of the Angular CLI installed, please run the installation again.
The latest version should always be installed globally.

4.) Create the Starter Project

Please create the practice project before the workshop starts.
The Angular CLI takes care of most steps for us. We’ll explain each parameter in detail during the workshop!

⚠️ Do not create the project on a network drive but directly on the local hard drive!

Run the following commands in your working directory:

ng new book-rating --style=scss --no-ssr
cd book-rating
ng serve

The installation might take a while with a slow internet connection.
Be patient when it says Installing packages (npm)!

You should see a website with the text "Hello, book-rating" at http://localhost:4200!

Then stop the running web server with Ctrl + C.

5.) Test Environment Check

Please check if the following command runs without errors:

ng test

After that, you can stop the process with Ctrl + C.

6.) Install Styles

Please run this command in the project folder book-rating to install our CSS styles package.
You can ignore any warnings during installation.

npm i @angular-schule/workshop-styles

Next, open the file src/styles.scss in the project folder book-rating and add the following line:

@use '@angular-schule/workshop-styles/index';

This will globally include the installed styles into the project and activate them.
We will use these styles together during the workshop.

7.) Explore the Project

Open the project folder book-rating in your editor.
Take a few minutes to explore the structure of the generated project.
This way, you’ll already be familiar with the key files before we explain the structure in detail during the workshop!

We’re looking forward to it! 🙂

Once all participants are set up, we can start without any delays.
If you encounter any errors, please send us the error message via email to [email protected] or bring your questions to the tech check.

---

© https://angular.schule | Updated: 17.12.2024