Skip to content

01 Set up a new Angular app

Yirica edited this page Feb 5, 2021 · 4 revisions

This is the first step in our newcomer experience and covers the creation of a clean Angular app.
If you are completely new to Angular we recommend doing the Tour of Heroes - Tutorial first.

This project currently starts out on Angular version 10.2. You require angular/cli 10.2 to continue this Step.
Therefore, run npm install -g @angular/[email protected] in a console of your choosing.

Task 1: Create a new Angular app called 'newcomer-experience' on Angular version 10.2.X using scss as default style sheet type and strict mode.

Run ng new newcomer-experience --strict --style=scss from a console of your choosing inside your workspace directory.
This creates a directory 'newcomer-experience' containing the clean Angular app including a demo page.
--strict enables stricter typescript type checking to prevent unclean coding habits.
--style=scss makes .scss style sheets the default for generated code.
If you want to see what the command would generate add --dry-run.

To check if everything worked out as intended run npm start and open http://localhost:4200 in your browser.

This should result in the changes provided in this commit

Task 2: Add Angular Material version 10.2.X with indigo-pink theme, global Angular Material typography and browser animations enabled.

Run ng add @angular/[email protected].
Select theme 'inidgo-pink'. You could use any other theme or even create your own but we suggest this one as we designed this project using this theme.
Activate global Angular Material typography. Activates typography used by Angular material for the entire solution. Can be customized later.
Activate browser animations. 'Cause its fancy if stuff moves.

You should not use npm install @angular/[email protected] as it does not execute installation schematics. Even packages without installation schematics can be installed using ng add so this should be the go to way for all package installations required at runtime ("dependencies").

This should result in the changes provided in this commit

This completes Step 1. Continue with Step 2.