43ecf8a77b
`@angular/platform-server` provides the foundation for rendering an Angular app on the server. In order to achieve that, it uses a server-side DOM implementation (currently [domino][1]). For rendering on the server to work as closely as possible to running the app on the browser, we need to make DOM globals (such as `Element`, `HTMLElement`, etc.), which are normally provided by the browser, available as globals on the server as well. Currently, `@angular/platform-server` achieves this by extending the `global` object with the DOM implementation provided by `domino`. This assignment happens in the [setDomTypes()][2] function, which is [called in a `PLATFORM_INITIALIZER`][3]. While this works in most cases, there are some scenarios where the DOM globals are needed sooner (i.e. before initializing the platform). See, for example, #24551 and #39950 for more details on such issues. This commit provides a way to solve this problem by exposing a side-effect-ful entry-point (`@angular/platform-server/init`), that shims the `global` object with DOM globals. People will be able to import this entry-point in their server-rendered apps before bootstrapping the app (for example, in their `main.server.ts` file). (See also [#39950 (comment)][4].) In a future update, the [`universal` schematics][5] will include such an import by default in newly generated projects. [1]: https://www.npmjs.com/package/domino [2]: https://github.com/angular/angular/blob/0fc8466f1be392917e0c/packages/platform-server/src/domino_adapter.ts#L17-L21 [3]: https://github.com/angular/angular/blob/0fc8466f1be392917e0c/packages/platform-server/src/server.ts#L33 [4]: https://github.com/angular/angular/issues/39950#issuecomment-747598403 [5]: https://github.com/angular/angular-cli/blob/cc51432661eb4ab4b6a3/packages/schematics/angular/universal PR Close #40559 |
||
|---|---|---|
| .. | ||
| e2e | ||
| src | ||
| .browserslistrc | ||
| .editorconfig | ||
| .gitignore | ||
| README.md | ||
| angular.json | ||
| karma.conf.js | ||
| package.json | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.server.json | ||
| tsconfig.spec.json | ||
| tslint.json | ||
| yarn.lock | ||
README.md
CliElementsUniversal
This project tests the integration of Angular Elements (@angular/elements) with SSR (via @angular/platform-server).
The project was generated with Angular CLI version 11.1.4.
Support for Angular Elements was added with ng add @angular/elements and for SSR with ng generate app-shell.
What this project tests is that an app can be successfully SSR'd even when it uses @angular/elements, which relies on certain DOM built-ins being available as soon as it is imported.
This is tested by generating the app-shell (using ng run cli-elements-universal:app-shell:production) and then verifying that the index.html file was generated correctly.
(See, the test-ssr script in package.json.)
NOTE:
Currently, domino (the server-side DOM implementation used by @angular/platform-server) does not support Web Components, so the Custom Elements functionality does not work on the server.