angular.io/guide/i18n live example does not work

[RudolfStarosta]

📚 Docs or angular.io bug report

Description

When trying to start the live example on https://angular.io/guide/i18n which links to https://angular.io/generated/live-examples/i18n/stackblitz.html I get an 422 response.

🔬 Minimal Reproduction

What's the affected URL?**

https://angular.io/guide/i18n

Reproduction Steps**

Click link live example (https://angular.io/generated/live-examples/i18n/stackblitz.html)

Expected vs Actual Behavior**

Stackblitz starts an shows source code and app generated from it

📷Screenshot

🔥 Exception or Error

see comment

🌍 Your Environment

Browser info

Firefox 88.0 (64 bits)

Anything else relevant?

[RudolfStarosta]

[petebacondarwin]

The error response gives us some indication:

{
  "error": "MISSING_PEERS",
  "data": {
    "@angular/compiler-cli": {
      "@angular/localize@11.2.11": "11.2.11"
    }
  }
}

I am not sure if this means that @angular/compiler-cli is missing or @angular/localize...

[iRealNirmal]

@petebacondarwin I think we should add link of live stackblitz link where translation example can be verified, if you want I can create stackblitz and help you update link for it.

[petebacondarwin]

From @gkalpak

It is because we don't add the @angular/compiler-cli dependency (which is a devDependency) in our StackblitzBuilder:

angular/aio/tools/stackblitz-builder/builder.js

Lines 49 to 51 in da6ed15

	// Add unit test packages from devDependencies for unit test examples
	const devDependencies = packageJson.devDependencies;
	['jasmine-core', 'jasmine-marbles'].forEach(dep => exampleDependencies[dep] = devDependencies[dep]);

And since @angular/localize has @angular/compiler-cli as a peerDependency, StackBlitz complains. (edited)

[petebacondarwin]

@iRealNirmal : There is a link in the guide already. It points to this page that redirects to the StackBlitz.

[iRealNirmal]

this is duplicate of #39563

[iRealNirmal]

@petebacondarwin probably not but possible it's due to this incorrect version here?

angular/aio/tools/examples/shared/boilerplate/i18n/package.json

Line 35 in 74da372

"@angular/cli": "~11.2.9",

[petebacondarwin]

Indeed it is a duplicate. Since we have started the discussion here, I will close the other one.

[petebacondarwin]

@iRealNirmal - that version for the CLI is actually correct. FW and CLI are out of sync by one patch version.
I believe the real reason is what @gkalpak wrote: #41838 (comment)

[iRealNirmal]

ok thanks for heads up so @gkalpak is taking care of this change ? Also for patch version out of sync, do you think we should create ticket or we can ignore for now ?

[petebacondarwin]

The CLI and FW are out of sync because one made an extra patch release to fix an urgent bug. It is no problem and doesn't need to be fixed.
Currently neither @gkalpak nor I are working on fixing this example, so if you want to give it a try, please go ahead.

[iRealNirmal]

ok thanks I will try to work on this

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}