E.g. for a component like this:
```
@Component({
template: ‘<ng-content select=“child”></ng-content>’
})
class MyComp {
@Input(‘aInputName’)
aInputProp: string;
@Output(‘aEventName’)
aOuputProp: EventEmitter<any>;
}
```
the `ComponentFactory` will now contain the following:
- `inputs = {aInputProp: ‘aInputName’}`
- `outputs = {aOutputProp: ‘aOutputName’}`
- `ngContentSelectors = [‘child’]`
E.g. for a component like this:
```
@Component({
template: ‘<ng-content select=“child”></ng-content>’
})
class MyComp {
@Input(‘aInputName’)
aInputProp: string;
@Output(‘aEventName’)
aOuputProp: EventEmitter<any>;
}
```
the `ComponentFactory` will now contain the following:
- `inputs = {aInputProp: ‘aInputName’}`
- `outputs = {aOutputProp: ‘aOutputName’}`
- `ngContentSelectors = [‘child’]`
fixes#12869fixes#12889fixes#13885fixes#13870
Before this change there was a single injector tree.
Now we have 2 injector trees, one for the modules and one for the components.
This fixes lazy loading modules.
See the design docs for details:
https://docs.google.com/document/d/1OEUIwc-s69l1o97K0wBd_-Lth5BBxir1KuCRWklTlI4
BREAKING CHANGES
`ComponentFactory.create()` takes an extra optional `NgModuleRef` parameter.
No change should be required in user code as the correct module will be used
when none is provided
DEPRECATIONS
The following methods were used internally and are no more required:
- `RouterOutlet.locationFactoryResolver`
- `RouterOutlet.locationInjector`
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.
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.
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.
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.
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
- 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
- Make sure `NodeDef`s don’t fall into dictionary mode.
- Use strategy pattern to add debug information / checks, instead of constantly checking for `isDevMode`.
- introduce a very light weight `RendererV2` interface to not have duplicate
code paths for direct and non direct rendering
The strategy pattern is implemented via the new `Services` object.
Part of #14013
PR Close#14345
Subclassing errors is problematic since Error returns a
new instance. All of the patching which we do than prevent
proper application of source maps.
PR Close#14160
`ComponentFactory`s can now be created from a `ViewDefinitionFactory` via
`RefFactory.createComponentFactory`.
This commit also:
- splits `Services` into `Refs` and `RootData`
- changes `ViewState` into a bitmask
- implements `ViewContainerRef.move`
Part of #14013
PR Close#14237
Angular 1.x -> AngularJS
Angular 1 -> AngularJS
Angular1 -> AngularJS
Angular 2+ -> Angular
Angular 2.0 -> Angular
Angular2 -> Angular
I have deliberately not touched any of the symbol names as that would cause big merge collisions with Tobias's work.
All the renames are in .md, .json, and inline comments and jsdocs.
PR Close#14132
Also have a new node type for queries.
This leads to less memory usage and better performance.
Deep Tree Benchmark results (depth 11):
- createAndDestroy (view engine vs current codegen):
* pureScriptTime: 78.80+-4% vs 72.34+-4%
* scriptTime: 78.80+-4% vs 90.71+-9%
* gc: 5371.66+-108% vs 9717.53+-174%
* i.e. faster when gc is also considered and about 2x less memory usage!
- update unchanged
Part of #14013
PR Close#14120
The new view engine allows our codegen to produce less code,
as it can interpret view definitions during runtime.
The view engine is not feature complete yet, but already
allows to implement a tree benchmark based on it.
Part of #14013
Detailed changes:
- remove `UNINITIALIZED`, initialize change detection fields with `undefined`.
* we use `view.numberOfChecks === 0` now everywhere
as indicator whether we are in the first change detection cycle
(previously we used this only in a couple of places).
* we keep the initialization itself as change detection get slower without it.
- remove passing around `throwOnChange` in various generated calls,
and store it on the view as property instead.
- change generated code for bindings to DOM elements as follows:
Before:
```
var currVal_10 = self.context.bgColor;
if (jit_checkBinding15(self.throwOnChange,self._expr_10,currVal_10)) {
self.renderer.setElementStyle(self._el_0,'backgroundColor',((self.viewUtils.sanitizer.sanitize(jit_21,currVal_10) == null)? null: self.viewUtils.sanitizer.sanitize(jit_21,currVal_10).toString()));
self._expr_10 = currVal_10;
}
var currVal_11 = jit_inlineInterpolate16(1,' ',self.context.data.value,' ');
if (jit_checkBinding15(self.throwOnChange,self._expr_11,currVal_11)) {
self.renderer.setText(self._text_1,currVal_11);
self._expr_11 = currVal_11;
}
```,
After:
```
var currVal_10 = self.context.bgColor;
jit_checkRenderStyle14(self,self._el_0,'backgroundColor',null,self._expr_10,self._expr_10=currVal_10,false,jit_21);
var currVal_11 = jit_inlineInterpolate15(1,' ',self.context.data.value,' ');
jit_checkRenderText16(self,self._text_1,self._expr_11,self._expr_11=currVal_11,false);
```
Performance impact:
- None seen (checked against internal latency lab)
Part of #13651
- add ng2_switch benchmark to track `ngFor` over `ngSwitch`
- measure create only, createDestroy and update
- simplify the created dom
- always add a style binding
The methods on `ViewResolverMock` have been merged into `DirectiveResolver`.
BREAKING CHANGE:
- ES5 users can no longer use the `View(…)` function to provide `ViewMetadata`.
This mirrors the removal of the `@View` decorator a while ago.
Introduces `ref-` to give a name to an element or a directive (also works for `<template>` elements), and `let-` to introduce an input variable for a `<template>` element.
BREAKING CHANGE:
- `#...` now always means `ref-`.
- `<template #abc>` now defines a reference to the TemplateRef, instead of an input variable used inside of the template.
- `#...` inside of a *ngIf, … directives is deprecated.
Use `let …` instead.
- `var-...` is deprecated. Replace with `let-...` for `<template>` elements and `ref-` for non `<template>` elements.
Closes#7158Closes#8264
