angular: first-app-lesson-01 does not install

Same issue on macOS 12.5.1:

% node -v
v20.10.0

% npm -v
10.2.3

Fresh install of angular:

% npm install -g @angular/cli

added 227 packages in 8s

45 packages are looking for funding
  run `npm fund` for details
Reshimming asdf nodejs...

I’m trying Lesson 1: Hello world. First, the downloaded folder is named:

first-app-lesson-00

Yet, the tutorial says:

In your project directory, navigate to the first-app directory.

I looked inside the first-app-lesson-00 directory, and there is no first-app directory. After going into the directory:

first-app-lesson-00

and running npm install, this is what I see:

~/angular_examples/first-app-lesson-00% npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: angular.io-example@0.0.0
npm ERR! Found: @angular/common@17.0.0
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"17.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^16.0.0" from angular-in-memory-web-api@0.16.0
npm ERR! node_modules/angular-in-memory-web-api
npm ERR!   angular-in-memory-web-api@"~0.16.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/7stud/.npm/_logs/2024-01-05T01_04_50_686Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/7stud/.npm/_logs/2024-01-05T01_04_50_686Z-debug-0.log

Option 1 results:

~/angular_examples/first-app-lesson-00% npm install angular-in-memory-web-api@latest
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated protractor@7.0.0: We have news to share - Protractor is deprecated and will reach end-of-life by Summer 2023. To learn more and find out about other options please refer to this post on the Angular blog. Thank you for using and contributing to Protractor. https://goo.gle/state-of-e2e-in-angular

added 1138 packages, and audited 1139 packages in 27s

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

12 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

~/angular_examples/first-app-lesson-00% npm install

up to date, audited 1139 packages in 878ms

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

12 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

~/angular_examples/first-app-lesson-00% ng serve
zsh: command not found: ng

Option 2 results (after deleting first-app-lesson-00 folder and unzipping download again):

~/angular_examples/first-app-lesson-00% npm install --force
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @angular-devkit/build-angular@17.0.0
npm WARN Found: typescript@4.9.5
npm WARN node_modules/typescript
npm WARN   peer typescript@">=5.2 <5.3" from @ngtools/webpack@17.0.0
npm WARN   node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack
npm WARN     @ngtools/webpack@"17.0.0" from @angular-devkit/build-angular@17.0.0
npm WARN     node_modules/@angular-devkit/build-angular
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer typescript@">=5.2 <5.3" from @angular-devkit/build-angular@17.0.0
npm WARN node_modules/@angular-devkit/build-angular
npm WARN   dev @angular-devkit/build-angular@"17.0.0" from the root project
npm WARN 
npm WARN Conflicting peer dependency: typescript@5.2.2
npm WARN node_modules/typescript
npm WARN   peer typescript@">=5.2 <5.3" from @angular-devkit/build-angular@17.0.0
npm WARN   node_modules/@angular-devkit/build-angular
npm WARN     dev @angular-devkit/build-angular@"17.0.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @angular/compiler-cli@17.0.0
npm WARN Found: typescript@4.9.5
npm WARN node_modules/typescript
npm WARN   peer typescript@">=5.2 <5.3" from @ngtools/webpack@17.0.0
npm WARN   node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack
npm WARN     @ngtools/webpack@"17.0.0" from @angular-devkit/build-angular@17.0.0
npm WARN     node_modules/@angular-devkit/build-angular
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer typescript@">=5.2 <5.3" from @angular/compiler-cli@17.0.0
npm WARN node_modules/@angular/compiler-cli
npm WARN   dev @angular/compiler-cli@"17.0.0" from the root project
npm WARN   2 more (@angular-devkit/build-angular, @ngtools/webpack)
npm WARN 
npm WARN Conflicting peer dependency: typescript@5.2.2
npm WARN node_modules/typescript
npm WARN   peer typescript@">=5.2 <5.3" from @angular/compiler-cli@17.0.0
npm WARN   node_modules/@angular/compiler-cli
npm WARN     dev @angular/compiler-cli@"17.0.0" from the root project
npm WARN     2 more (@angular-devkit/build-angular, @ngtools/webpack)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: angular-in-memory-web-api@0.16.0
npm WARN Found: @angular/common@17.0.0
npm WARN node_modules/@angular/common
npm WARN   @angular/common@"17.0.0" from the root project
npm WARN   4 more (@angular/forms, @angular/platform-browser, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer @angular/common@"^16.0.0" from angular-in-memory-web-api@0.16.0
npm WARN node_modules/angular-in-memory-web-api
npm WARN   angular-in-memory-web-api@"~0.16.0" from the root project
npm WARN 
npm WARN Conflicting peer dependency: @angular/common@16.2.12
npm WARN node_modules/@angular/common
npm WARN   peer @angular/common@"^16.0.0" from angular-in-memory-web-api@0.16.0
npm WARN   node_modules/angular-in-memory-web-api
npm WARN     angular-in-memory-web-api@"~0.16.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: angular-in-memory-web-api@0.16.0
npm WARN Found: @angular/core@17.0.0
npm WARN node_modules/@angular/core
npm WARN   @angular/core@"17.0.0" from the root project
npm WARN   7 more (@angular/compiler, @angular/animations, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer @angular/core@"^16.0.0" from angular-in-memory-web-api@0.16.0
npm WARN node_modules/angular-in-memory-web-api
npm WARN   angular-in-memory-web-api@"~0.16.0" from the root project
npm WARN 
npm WARN Conflicting peer dependency: @angular/core@16.2.12
npm WARN node_modules/@angular/core
npm WARN   peer @angular/core@"^16.0.0" from angular-in-memory-web-api@0.16.0
npm WARN   node_modules/angular-in-memory-web-api
npm WARN     angular-in-memory-web-api@"~0.16.0" from the root project
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated protractor@7.0.0: We have news to share - Protractor is deprecated and will reach end-of-life by Summer 2023. To learn more and find out about other options please refer to this post on the Angular blog. Thank you for using and contributing to Protractor. https://goo.gle/state-of-e2e-in-angular

added 1138 packages, and audited 1139 packages in 31s

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

12 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

~/angular_examples/first-app-lesson-00% ng serve 
zsh: command not found: ng

After seeing the last result again, I opened up a new Terminal window, then I cd’ed into the first-app-lesson-00 directory:

~/angular_examples/first-app-lesson-00% ng serve
? Would you like to enable autocompletion? This will set up your terminal so pressing TAB 
while typing Angular CLI commands will show possible options and autocomplete arguments. 
(Enabling autocompletion will modify configuration files in your home directory.) Yes
Appended `source <(ng completion script)` to `/Users/7stud/.zshrc`. Restart your terminal or run the following to autocomplete `ng` commands:

    source <(ng completion script)

Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  82.71 kB | 
main.js             | main          |   2.11 kB | 
styles.css          | styles        | 457 bytes | 

                    | Initial Total |  85.27 kB

Application bundle generation complete. [1.922 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/

That indicates that the app is up and running.

As far as I can tell, angular is unable to resolve all the dependencies it needs, and angular employs several deprecated packages. If the angular team can’t produce a hello world app that works without error, then angular is way too complex. I’m posting this in the hopes that the angular team will be able to help the next poor sap who is interested in seeing what angular is all about. I’m off to try Svelte. Good luck all.

Hey @jeremy-ekers, I tried reproducing above issue you mentioned.

• I assumed you downloaded demo-app from page : https://angular.io/tutorial/first-app/first-app-lesson-01 , with download link (Completed code): https://angular.io/generated/zips/first-app-lesson-01/first-app-lesson-01.zip
• after npm install faced same issue

You can go with 2 possible approaches (both worked for me)-

Option 1 :

1. Run npm install angular-in-memory-web-api@latest,
2. Run npn install
3. Run ng serve : app is successfully deployed.

Option 2 :

1. Just run npm install --force , it will install all required dependecies forcefully.
2. Then run ng serve : app is successfully deployed.

I hope it works for you.

in package.json I changed

    "typescript": "~4.9.3"

to

    "typescript": "~5.2"

reran npm i

How do we get some attention on this? It is absurd that the very first beginner example Angular is putting forward is non-functional out of the box.

npm i --force

The first-app-lesson-01 can run if you try one of the options listed above and as an alternative, you can also do this lesson in the browser on angular.dev:

https://angular.dev/tutorials/first-app

These changes will go out in the next minor release but I understand that this is frustrating. As an alternative for now the first-app-lesson-01 can be run if you try one of the options listed above or you can also do this lesson in the browser on angular.dev:

https://angular.dev/tutorials/first-app

Thank you for your patience on this one.

Changes haven’t been deployed yet, there is work pending on our side for this.

Quick update - we have a PR open to address the infra-changes that should fix this issue.

Stay tuned.