After the introduction of the view engine, we can drop a lot of code that is not used any more.
This should reduce the size of the app bundles because a lot of this code was not being properly tree-shaken by today's tools even though it was dead code.
E.g. for no view encapsulation, the delegate will always be the same.
Nevertheless, we still need to create a new `AnimationRenderer` per
component.
Attention: This change will conflict with a local mod in G3.
- Don’t use the animation renderer if a component
used style encapsulation but no animations.
- The `AnimationRenderer` should be cached in the same
lifecycle as its delegate.
- Trigger names need to be namespaced per component type.
When the `enableLegacyTemplate` is set to `false`, `<template>` tags and the
`template` attribute are no more used to define angular templates but are
treated as regular tag and attribute.
The default value is `true`.
In order to define a template, you have to use the `<ng-template>` tag.
This option applies to your application and all the libraries it uses. That is
you should make sure none of them rely on the legacy way to defined templates
when this option is turned off (`false`).
The rationale of this change is to improve the inter-operability with web
components that might make use of the `<template>` tag.
DEPRECATION
The template tags and template attribute are deprecated:
<template ngFor [ngFor]=items let-item><li>...</li></template>
<li template="ngFor: let item of items">...</li>
should be rewritten as:
<ng-template ngFor [ngFor]=items let-item><li>...</li></ng-template>
Note that they still be supported in 4.x with a deprecartion warning in
development mode.
MIGRATION
- `template` tags (or elements with a `template` attribute) should be rewritten
as a `ng-template` tag,
- `ng-content` selectors should be updated to referto a `ng-template` where they
use to refer to a template: `<ng-content selector="template[attr]">` should be
rewritten as `<ng-content selector="ng-template[attr]">`
- if you consume a component relying on your templates being actual `template`
elements (that is they include a `<ng-content selector="template[attr]">`). You
should still migrate to `ng-template` and make use of `ngProjectAs` to override
the way `ng-content` sees the template:
`<ng-template projectAs="template[attr]">`
- while `template` elements are deprecated in 4.x they continue to work.
BREAKING CHANGE: Because all lifecycle hooks are now interfaces
the code that uses 'extends' keyword will no longer compile.
To migrate the code follow the example below:
Before:
```
@Component()
class SomeComponent extends OnInit {}
```
After:
```
@Component()
class SomeComponent implements OnInit {}
```
we don't expect anyone to be affected by this change.
Closes#10083
Use `RendererV2` instead of `Renderer` now. `Renderer` can still be injected
and delegates to `RendererV2`.
Use `RendererFactoryV2` instead of `RootRenderer`. `RootRenderer` cannot be used
anymore.
BREAKING CHANGE:
- `RootRenderer` cannot be used any more, use `RendererFactoryV2` instead.
Note: `Renderer` can still be injected/used, but is deprecated.
Currently styles are rendered to the root component element, which ensures they're cleaned up automatically
when the client application is bootstrapped. This is less than ideal as progressive rendering can cause HTML
to be rendered before the CSS is loaded, causing flicker.
This change returns to rendering <style> elements in the <head>, and introduces a mechanism for removing
them on client bootstrap. This relies on associating the server and client bootstrap. Another way to think
of this is that the client, when bootstrapping an app, needs to know whether to expect a server rendered
application exists on the page, and to identify the <style> elements that are part of that app in order
to remove them.
This is accomplished by providing a string TRANSITION_ID on both server and client. For most applications,
this will be achieved by writing a client app module that imports BrowserModule.withServerTransition({appId: <id>}).
The server app module will import this client app module and therefore inherit the provider for
TRANSITION_ID. renderModule[Factory] on the server will validate that a TRANSITION_ID has been provided.
TypeScript compiler will now build to ES2015 code and modules. Babili is used to minify ES2015
code, providing an initial optimization that we couldn't previously get just from Uglify. Uses
Babel to convert ES2015 to UMD/ES5 code, and Uglify to minimize the output.
Some versions of TypeScript are super slow to compile functions that
contain a lot of `if` conditions in them. Splitting the handle event
expressions per element is similar to what we did in the old codegen.
Allow to style components that don’t use shadow dom inside of components that do.
This reverts 53cf2ec573
and adds a test for this case.
Related to #7887
Note that this does not yet include enabling the view engine
by default.
Included refactoring:
- view engine: split namespace of elements / attributes already
when creating the `NodeDef`
- view engine: when injecting the old `Renderer`, use an implementation
that is based on `RendererV2`
- view engine: store view queries in the component view, not
on the host element
Included refactoring:
- splits the `RendererV2` into a `RendererFactoryV2` and a `RendererV2`
- makes the `DebugRendererV2` a private class in `@angular/core`
- remove `setBindingDebugInfo` from `RendererV2`, but rename `RendererV2.setText` to
`RendererV2.setValue` and allow it on comments and text nodes.
Part of #14013
This change installs HttpModule with ServerModule, and overrides bindings to
service Http requests made from the server with the 'xhr2' NPM package.
Outgoing requests are wrapped in a Zone macro-task, so they will be tracked
within the Angular zone and cause the isStable API to show 'false' until they
return. This is essential for Universal support of server-side HTTP.
This ensures when the tree is serialized to the client and the app is later bootstrapped,
the <style> tags created during server-side rendering are destroyed.
Aspects: di, query, content projection
Included refactoring:
- use a number as query id
- use a bloom filter for aggregating matched queries of nested elements
- separate static vs dynamic queries
Part of #14013
- PlatformState provides an interface to serialize the current Platform State as a string or Document.
- renderModule and renderModuleFactory are convenience methods to wait for Angular Application to stabilize and then render the state to a string.
- refactor code to remove defaultDoc from DomAdapter and inject DOCUMENT where it's needed.
Included refactoring:
- make ViewData.parentIndex point to component provider index
- split NodeType.Provider into Provider / Directive / Pipe
- make purePipe take the real pipe as argument to detect changes
- order change detection:
1) directive props
2) renderer props
Part of #14013
PR Close#14412
Tobias Bosch
Igor Minar
Jason Aden
Igor Minar
Chuck Jazdzewski
Matias Niemelä
Victor Berchet
Marc Laval
Dzmitry Shylovich
vikerman
Alex Rickabaugh
Jason Aden
Miško Hevery
vsavkin
Dzmitry Shylovich
Ward Bell
David Purpura
Vikram Subramanian
Alex Eagle
Alex Eagle
Dzmitry Shylovich