angular-cli: Create a new project "Tour of Heroes app" Tutorial Produces Compile Errors

🐞 Bug report

Command (mark with an `x`)

new
build
serve
test
e2e
generate
add
update
lint
extract-i18n
run
config
help
version
doc

Is this a regression?

I don’t know, this is my first time creating an Angular project following the tutorial instructions.

Yes, the previous version in which this bug was not present was: ....

Description

A clear and concise description of the problem...

I follow the “Tour of Heroes” Tutorial Project here https://angular.io/tutorial/toh-pt0 and receive the build errors.

🔬 Minimal Reproduction

Do this in VS Code. Follow the Tour of Heroes Angular tutorial (https://angular.io/tutorial/toh-pt0) per the instructions to reproduce.

🔥 Exception or Error





Error: ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\......\angular-tour-of-heroes\node_modules\@ngtools\webpack\src\ivy\plugin.js:376:100
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
 @ multi ./src/main.ts main[0]

Error: ./src/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\....\angular-tour-of-heroes\node_modules\@ngtools\webpack\src\ivy\plugin.js:376:100
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
 @ multi ./src/polyfills.ts polyfills[0]

Error: ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\....\angular-tour-of-heroes\node_modules\@ngtools\webpack\src\ivy\plugin.js:376:100
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
 @ ./src/main.ts

Error: ./src/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: angularCompiler.getNextProgram is not a function
    at C:\.....\angular-tour-of-heroes\node_modules\@ngtools\webpack\src\ivy\plugin.js:376:100
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
 @ ./src/polyfills.ts

🌍 Your Environment





ng version 

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.0.0-rc.1
Node: 14.16.1
Package Manager: npm 6.14.12
OS: win32 x64

Angular: 12.0.0-rc.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0-next.8
@angular-devkit/build-angular   0.1200.0-next.8
@angular-devkit/core            12.0.0-next.8
@angular-devkit/schematics      12.0.0-rc.1
@schematics/angular             12.0.0-rc.1
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 18 (5 by maintainers)

Commits related to this issue

docs: describe your change... Change line 64 to npm install -g @angular/cli@latest Per issue: https://github.com/angular/angular-cli/issues/20692 — committed to kathleenwestpracticeC/angular by kathleenwestpracticeC 3 years ago
docs: clarify how to install the latest CLI It is possible to get into a state where the globally installed CLI is out of step with the examples in the tutorials. This commit provides an info box to ... — committed to petebacondarwin/angular by petebacondarwin 3 years ago
build(docs-infra): show the current version when installing the CLI It is important to use the correct major version of the Angular CLI when following the examples in the tutorials. This commit provi... — committed to petebacondarwin/angular by petebacondarwin 3 years ago
build(docs-infra): show the current version when installing the CLI It is important to use the correct major version of the Angular CLI when following the examples in the tutorials. This commit provi... — committed to petebacondarwin/angular by petebacondarwin 3 years ago

Most upvoted comments

@kathleenwestpracticeC - I wonder if you accidentally installed the next version of the CLI globally at some point? Once that is done following the steps in that guide would indeed result in next version of the project. Perhaps the first step in the guide should be changed to

npm install -g @angular/cli@latest

petebacondarwin on May 6, 2021

Sorry about that. The command should have been ng update @angular-devkit/build-angular --next. Prerelease versions are unstable and can contain breaking changes. We recommend to update them as a group when new prereleases are available with the following command: ng update @angular/cli @angular/core --next.

clydin on May 4, 2021

Hi @kathleenwestpracticeC,

Below are the commands listed in order of how they are mentioned in above page.

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open

Following the steps in https://angular.io/guide/setup-local doesn’t lead to a project being created with the prerelease version of the Angular mentioned above and surely not a broken project.

At this point, there isn’t any actionable from our end, since the tutorial correct. Feel free to open a new issue with more information if you remember how you ended up having a project in a broken state.

Thanks.

alan-agius4 on May 6, 2021

Hi @kathleenwestpracticeC,

It’s unclear to how you ended up using incompatible versions and moreover using version 12, which is currently the latest version. Following the steps of the tutorial provided https://angular.io/tutorial/toh-pt0, you should be on the latest version of Angular, which is currently version 11.

I recommend someone update the Angular website/tutorials for those steps to make sure only the latest stable releases are being used and reach out to whoever is managing the releases to let them know that a simple new project does not build for:

@angular-devkit/build-angular 0.1200.0-next.8 @angular-devkit/core 12.0.0-next.8

And I’d like to ask just how that code made it out into the wild when it cannot compile with a new project?

Again, it’s unclear how you ended up in this state, we have several E2E testing the most used workflow, including generating a new project. I assure you that generating a new project using both latest and next version does work.

Can you please indicate the page(s) where it is referenced to use pre-release packages?

alan-agius4 on May 5, 2021

The update command was particular to the state of the project referenced in this issue. A newly generated project (ng new ...) should create a project with compatible versions of the framework packages.

Version 11 of Angular is the current, stable version of the framework and is recommended for production applications at this time. The command npm install -g @angular/cli should install the latest stable version. Alternatively, to create a project without a global install or with particular version (v11 in this case), the following command can be used: npx @angular/cli@11 new my-project.

clydin on May 4, 2021

From the version output, it appears that multiple, different v12 prerelease versions are in use within the project. Can you try updating the project ng update @angular/cli --next? The update should synchronize the versions.

clydin on May 4, 2021

angular-cli: Create a new project "Tour of Heroes app" Tutorial Produces Compile Errors

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

About this issue

Commits related to this issue

Most upvoted comments

Command (mark with an `x`)