George Kalpakas 3d2c2c40d8 build(docs-infra): update docs examples to Angular v11.0.1 (#39818)
This commit updates the docs examples to Angular v11.0.1. In addition to
updating the dependencies versions, it also updates the project's
structure and config to more closely match what a new v11 CLI app would
look like. See, also, the [diff][1] between a basic v10.1.3 CLI app and a
v11.0.2 one.

NOTE:
I refrained from disabling the Selenium Promise Manager (as seen
[here][2]) and switching all e2e tests to `async/await`, because that is
a big change and should be done in a separate commit/PR.

[1]: https://github.com/cexbrayat/angular-cli-diff/compare/10.1.3..11.0.2
[2]:
https://github.com/cexbrayat/angular-cli-diff/compare/10.1.3...11.0.2#diff-dbd675d74087d57cd084d6dd6ae24ae2eeff2ff0122680e12916052f8a843a29

PR Close #39818
2020-11-24 14:56:09 -08:00

4.0 KiB

Update example dependencies

Follow these steps to update the examples to the latest versions of Angular (and related dependencies):

  • In shared/package.json, bump all the @angular/* and @nguniversal/* package versions to the version you want to update to and update their peer dependencies (such as @angular-devkit/*, rxjs, typescript, zone.js) and other dependencies (e.g. @types/*) to the latest compatible versions.

    NOTE: The angular-cli-diff repo can be a useful resource for discovering what dependency versions are used for a basic CLI app at a specific CLI version.

  • In the shared/ directory, run yarn to update the dependencies in the shared/node_modules/ directory and the shared/yarn.lock file.

  • In the shared/ directory, run yarn sync-deps to update the dependency versions of the package.json files in each sub-folder of shared/boilerplate/ to match the ones in shared/package.json.

  • Follow the steps in the following section to update the rest of the boilerplate files.

Update other boilerplate files

The Angular CLI default setup is updated using ng update. Any necessary changes to boilerplate files will be done automatically through migration schematics.

NOTE: Migrations affecting source code files will not happen automatically, because ng update does not know about all the examples in aio/content/examples/. You have to make these changes (if any) manually. Again, the angular-cli-diff repo can be a useful resource for discovering changes between versions.

  • In the shared/boilerplate/cli/ directory, run the following commands to migrate the the project to the current versions of Angular CLI and the Angular framework (updated in previous steps):

    # Ensure dependencies are installed.
    yarn install
    
    # Migrate project to new versions.
    yarn ng update @angular/cli --allow-dirty --migrate-only --from=<previous-cli-version>
    yarn ng update @angular/core --allow-dirty --migrate-only --from=<previous-core-version>
    

    NOTE: In order for ng update to work, there must be a node_modules/ directory with installed dependencies inside the shared/boilerplate/cli/ directory. This node_modules/ directory is only needed during the update operation and is otherwise ignored (both by git and by the example-boilerplate.js script) by means of the shared/boilerplate/.gitignore file.

  • The previous command made any necessary changes to boilerplate files inside the cli/ directory, but the same changes need to be applied to the other CLI-based boilerplate directories. Inspect the changes in cli/ and manually apply the necessary ones to other CLI-based boilerplate directories.

  • Also ensure that any relevant changes in the shared/boilerplate/cli/ directory are copied to the shared/example-scaffold/ directory, which is used when creating new examples (via yarn create-example ...). Only files that would not be considered boilerplate should be added to the example-scaffold/ directory.

  • Ensure any changes to cli/tslint.json are ported over to systemjs/tslint.json and also aio/content/examples/tslint.json. This last part is important, since this file is used to lint example code on CI.

  • Inspect the changes and determine whether some of them need to be applied to the systemjs boilerplate files.

  • Inspect the changes and determine whether any updates to guides are necessary. For example, if a file is renamed or moved, any guides mentioning that file may need updating to refer to the new name/location.

  • Commit all changes to the repository.