BREAKING CHANGE:
The `<template>` tag was deprecated in Angular v4 to avoid collisions (i.e. when
using Web Components).
This commit removes support for `<template>`. `<ng-template>` should be used
instead.
BEFORE:
<!-- html template -->
<template>some template content</template>
# tsconfig.json
{
# ...
"angularCompilerOptions": {
# ...
# This option is no more supported and will have no effect
"enableLegacyTemplate": [true|false]
}
}
AFTER:
<!-- html template -->
<ng-template>some template content</ng-template>
PR Close#22783
Adds a stub for `elementStyle` and `elementClass` instruction
with a canonical spec for the compiler. The spec shows the the
compiler should be using `elementStyle` and `elementClass` instruction
in place of `[class]` and `[style]` bindings respectively.
PR Close#22719
This change makes the code cleaner for the user. It does mean
a little bit more work for us since we have to patch the `type` back
into the `DirectiveDef`. However since the patching happens only once
on startup it should not be significant.
PR Close#21374
This separation is no longer needed since directives are now passed into the `container` as an array rather than as child functions of the `containerStart`
PR Close#21374
We used to have a separate `directive` instruction for instantiating
directives. However, such an instruction requires that directives
are created in the correct order, which would require that template
compiler would have knowledge of all dependent directives. This
would break template compilation locality principle.
This change only changes the APIs to expected form but does
not change the semantics. The semantics will need to be corrected
in subsequent commits. The semantic change needed is to
resolve the directive instantiation error at runtime based on
injection dependencies.
PR Close#21374
Each node now has two index: nodeIndex and checkIndex.
nodeIndex is the index in both the view definition and the view data.
checkIndex is the index in in the update function (update directives and update
renderer).
While nodeIndex and checkIndex have the same value for now, having both of them
will allow changing the structure of view definition after compilation (ie for
runtime translations).
- prevents unsubscribing from the zone on error
- prevents unsubscribing from directive `EventEmitter`s on error
- prevents detaching views in dev mode if there on error
- ensures that `ngOnInit` is only called 1x (also in prod mode)
Fixes#9531Fixes#2413Fixes#15925
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
BREAKING CHANGE:
- Injector was renamed into `ReflectiveInjector`,
as `Injector` is only an abstract class with one method on it
- `Injector.getOptional()` was changed into `Injector.get(token, notFoundValue)`
to make implementing injectors simpler
- `ViewContainerRef.createComponent` now takes an `Injector`
instead of `ResolvedProviders`. If a reflective injector
should be used, create one before calling this method.
(e.g. via `ReflectiveInjector.resolveAndCreate(…)`.
This adds the feature for `@ViewChild`/`@ViewChildren`/`@ContentChild`/`@ContentChildren` to define what to read from the queried element.
E.g. `@ViewChild(`someVar`, read: ViewContainerRef)` will locate the element with a variable `someVar` on it and return a `ViewContainerRef` for it.
Background: With this change, Angular knows exactly at which elements there will be `ViewConainerRef`s as the user has to ask explicitly of them. This simplifies codegen and will make converting Angular templates into server side templates simpler as well.
BREAKING CHANGE:
- `DynamicComponentLoader.loadIntoLocation` has been removed. Use `@ViewChild(‘myVar’, read: ViewContainerRef)` to get hold of a `ViewContainerRef` at an element with variable `myVar`.
- `DynamicComponentLoader.loadNextToLocation` now takes a `ViewContainerRef` instead of an `ElementRef`.
- `AppViewManager` is renamed into `ViewUtils` and is a mere private utility service.
Each compile template now exposes a `<CompName>NgFactory` variable
with an instance of a `ComponentFactory`.
Calling `ComponentFactory.create` returns a `ComponentRef` that can
be used directly.
BREAKING CHANGE:
- `Compiler` is renamed to `ComponentResolver`,
`Compiler.compileInHost` has been renamed to `ComponentResolver.resolveComponent`.
- `ComponentRef.dispose` is renamed to `ComponentRef.destroy`
- `ViewContainerRef.createHostView` is renamed to `ViewContainerRef.createComponent`
- `ComponentFixture_` has been removed, the class `ComponentFixture`
can now be created directly as it is no more using private APIs.
BREAKING CHANGE:
- Renderer:
* renderComponent method is removed form `Renderer`, only present on `RootRenderer`
* Renderer.setDebugInfo is removed. Renderer.createElement / createText / createTemplateAnchor
now take the DebugInfo directly.
- Query semantics:
* Queries don't work with dynamically loaded components.
* e.g. for router-outlet: loaded components can't be queries via @ViewQuery,
but router-outlet emits an event `activate` now that emits the activated component
- Exception classes and the context inside changed (renamed fields)
- DebugElement.attributes is an Object and not a Map in JS any more
- ChangeDetectorGenConfig was renamed into CompilerConfig
- AppViewManager.createEmbeddedViewInContainer / AppViewManager.createHostViewInContainer
are removed, use the methods in ViewContainerRef instead
- Change detection order changed:
* 1. dirty check component inputs
* 2. dirty check content children
* 3. update render nodes
Closes#6301Closes#6567
Update the Angular 2 transformer to recognize
`package:angular2/platform/browser.dart` as the library which exports
the `bootstrap` function.
Update playground, examples, benchmarks, & tests to import bootstrap from
platform/browser.
Closes#7647
TL;DR: Modify pubspec.yaml files to use the recommended "targeted"
transformers. The unified "simple" angular2 transformer still works as
always, but we want to encourage use of the targeted transformers
whereever possible.
See [the wiki](https://github.com/angular/angular/wiki/Advanced-Transformer-Configuration)
for details about targeted transformers.
See #1872
BREAKING CHANGE:
- Platform pipes can only contain types and arrays of types,
but no bindings any more.
- When using transformers, platform pipes need to be specified explicitly
in the pubspec.yaml via the new config option
`platform_pipes`.
- `Compiler.compileInHost` now returns a `HostViewFactoryRef`
- Component view is not yet created when component constructor is called.
-> use `onInit` lifecycle callback to access the view of a component
- `ViewRef#setLocal` has been moved to new type `EmbeddedViewRef`
- `internalView` is gone, use `EmbeddedViewRef.rootNodes` to access
the root nodes of an embedded view
- `renderer.setElementProperty`, `..setElementStyle`, `..setElementAttribute` now
take a native element instead of an ElementRef
- `Renderer` interface now operates on plain native nodes,
instead of `RenderElementRef`s or `RenderViewRef`s
Closes#5993
All common directives, forms, and pipes have been moved out of angular2/core,
but we kept reexporting them to make transition easier.
This commit removes the reexports.
BREAKING CHANGE
Before
import {NgIf} from 'angular2/core';
After
import {NgIf} from 'angular2/common';
Closes#5362
Currently, core depends on DomRenderer, which depends on the browser.
This means that if you depend on angular2/core, you will always
pull in the browser dom adapter and the browser render, regardless
if you need them or not.
This PR moves the browser dom adapter and the browser renderer out of core.
BREAKING CHANGE
If you import browser adapter or dom renderer directly (not via angular2/core),
you will have to change the import path.
Igor Minar
Kara Erickson
Victor Berchet
Miško Hevery
Marc Laval
David-Emmanuel Divernois
Alex Eagle
Tobias Bosch
Chuck Jazdzewski
Matias Niemelä
vikerman
Igor Minar
Bowen Ni
Bowen Ni
vsavkin
Joao Dias
Pawel Kozlowski
Alex Eagle
Igor Minar
Julie Ralph
Victor Savkin
Jason Choi
Olivier Chafik
Alex Castillo
Alex Rickabaugh
Tim Blasi
Brian Ford
Yegor Jbanov
Jeff Cross