Getting Started with Angular (Deborah Kurata)

These are my study notes for the coure Angular: Getting Started from Deborah Kurata, on pluralsight.

The course duration is 5h43m.

Get source code from here:

A blog post from Deborah to support the course is here:

If you sign up to PluralSight, please use this referral link and we'll both get a discount

git clone
cd .\Angular-GettingStarted\

The main demo app is "APM" which stands for "Acme Product Management"

Under the APM-Start folder, here's the initial structure

│   └───src
    │   └───products
    │   ├───home
    │   └───shared
    │   └───images

The web application itself is under the APM-Start\src folder. All the files in the APM-Start folder itself are there to support the tooling and the language and the frameworks etc. Go into the src folder for the real stuff.



First things first

setup environment:

Already have it? check you have version at least 6.9.0 (from 2019)

npm --version


Basic angular application has:

Can use angular cli to do all this...

But how do we get the angular cli?

npm install -g @angular/cli

That's how you get the super dooper useful angular cli.

Make a new app

Make a new app with:

ng new my-app --skip-install --dry-run

(And if you are happy with the output remove the --dry-run)

It will prompt you regarding routing, and what technology to use for styling (css, scss (sass), less, etc.)

cd my-app # go into the folder of our newly created app
tree # look at all these files!
npm install # because we skipped install earlier. I did that because installing is flaky for me. Just me??

Edit the package.json so that the start script passes an -o parameter to the ng serve command. This way when you start your app in the console, it will also open the browser.

"scripts": {
  "ng": "ng",
  "start": "ng serve -0",

Generate some stufff.....

In our new app we can generate some stuff....

Generate a new component, called xyz...

ng generate component xyz

In fact we can generate any of these:


(This is just what we get from the Collection @schematics/angular ok.

As a scientist you can commit everything to your repo. Generate one of those. Then inspect what was added.




npm install

There will be some warnings and a bunch of mess, but it will hopefully succeed at installing all the packages required by your little app.


Warning near the start....

core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

...and eventually a bunch of fatal errors.

Ok, i'll run it a second time. This time it ran quicker but failed because of a locked file called something pinkie.

OK I restarted my console and ran it a 3rd time.

This time it "succeeded" What a mess.

We know it succeeded because it had this line in the output...

added 1074 packages from 1046 contributors, removed 1 package, updated 2 packages, moved 1 package and audited 17156 packages in 104.591s

But also this line...

21 packages are looking for funding
	run `npm fund` for details

..okay. And this:

found 7 vulnerabilities (2 low, 3 moderate, 2 high)
	run `npm audit fix` to fix them, or `npm audit` for details

(OK -- I ran npm audit fix and that stopped me from being able to use anything. Then I checked at the course discussion group and a lot of people did that and Deborah told each of them "no please don't run npm audit fix, that will stop it from working. So just ignore those errors. As a result of running npm audit fix I had to delete the repo and re-clone it. So don't do that.)

NOW when I run:

npm start starts and I get to the welcome screen:

When we run npm start we are running an npm script like this:

if you look inside the file package.json you will find a node like this:

	"scripts": {
		"ng": "ng",
		"start": "ng serve -o",
		"build": "ng build",
		"test": "ng test",
		"lint": "ng lint",
		"e2e": "ng e2e"

Those scripts are a map of friendly little names on the left to 'complex' commands on the right.

So, for this project, when we run npm start it is a shortcut to running: npm run ng serve -o


Other supporting files

Can download the exercise files from:

(I've put them in my ~learning/angular/ folder)


See also