lazy-animations.md

Hi, thank you for helping testing this new feature !

To test this feature we're going to use the artifacts generated by this PR : angular/angular#50738.

Install the dependencies

To retrieve the artifacts

1. Go on to the PR
2. Look for a job called publish_packages_as_artifacts and open it
3. Open the artifacts tab and run the following script in the console of your favorite browser :

var oldFocus = document.activeElement;
oldFocus.focus();

const keep = new Set(["@angular/core", "@angular/compiler", "@angular/compiler-cli", "@angular/animations", "@angular/platform-browser", "@angular/common", "@angular/router"])

var text = $$('li a').filter(a => a.href.endsWith('tgz') && a.text.startsWith('angular/')).map((a) => {
  const package = a.text.match(/(angular.*)-pr/)[1];
  const url = a.href;
  return [`@${package}`, url]
}).filter(([package]) => keep.has(package)).map(([package, url]) => (`"${package}": "${url}"`)).join(',\n');

window.copy(text);

This script will parse the page and extract the dependencies we need and paste them to the clipboard. You should get something that looks like :

"@angular/animations": "https://output.circle-artifacts.com/output/job/8b9aa2c7-3b9f-4a7f-9cf7-b3cf4d5113aa/artifacts/0/angular/animations-pr50738-a3b6b416e8.tgz",
"@angular/common": "https://output.circle-artifacts.com/output/job/8b9aa2c7-3b9f-4a7f-9cf7-b3cf4d5113aa/artifacts/0/angular/common-pr50738-a3b6b416e8.tgz",
"@angular/compiler-cli": "https://output.circle-artifacts.com/output/job/8b9aa2c7-3b9f-4a7f-9cf7-b3cf4d5113aa/artifacts/0/angular/compiler-cli-pr50738-a3b6b416e8.tgz",
"@angular/compiler": "https://output.circle-artifacts.com/output/job/8b9aa2c7-3b9f-4a7f-9cf7-b3cf4d5113aa/artifacts/0/angular/compiler-pr50738-a3b6b416e8.tgz",
"@angular/core": "https://output.circle-artifacts.com/output/job/8b9aa2c7-3b9f-4a7f-9cf7-b3cf4d5113aa/artifacts/0/angular/core-pr50738-a3b6b416e8.tgz",
"@angular/platform-browser": "https://output.circle-artifacts.com/output/job/8b9aa2c7-3b9f-4a7f-9cf7-b3cf4d5113aa/artifacts/0/angular/platform-browser-pr50738-a3b6b416e8.tgz",
"@angular/router": "https://output.circle-artifacts.com/output/job/8b9aa2c7-3b9f-4a7f-9cf7-b3cf4d5113aa/artifacts/0/angular/router-pr50738-a3b6b416e8.tgz"

Replace the entries in your package.json and install them.

Usage

Call provideLazyLoadedAnimations() to get the necessary providers.

Example:

bootstrapApplication(RootComponent, {
    providers: [
      provideLazyLoadedAnimations()
    ]
});

Now we should be good, enjoy the test and let me know of the issues you might encounter !

Many thx !