* feat(common): support `as` syntax in template/* bindings
Closes#15020
Showing the new and the equivalent old syntax.
- `*ngIf="exp as var1”`
=> `*ngIf="exp; let var1 = ngIf”`
- `*ngFor="var item of itemsStream |async as items”`
=> `*ngFor="var item of itemsStream |async; let items = ngForOf”`
* feat(common): convert ngIf to use `*ngIf="exp as local“` syntax
* feat(common): convert ngForOf to use `*ngFor=“let i of exp as local“` syntax
* feat(common): expose NgForOfContext and NgIfContext
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`
This API was introduced only in a beta release, and is being removed because we found it to be incorrect prior to launch. For more information about why this is being removed, see https://github.com/angular/angular/pull/15050.
BREAKING CHANGE:
Perviously, any provider that had an ngOnDestroy lifecycle hook would be created eagerly.
Now, only classes that are annotated with @Component, @Directive, @Pipe, @NgModule are eager. Providers only become eager if they are either directly or transitively injected into one of the above.
This also makes all `useValue` providers eager, which
should have no observable impact other than code size.
EXPECTED IMPACT:
Making providers eager was an incorrect behavior and never documented.
Also, providers that are used by a directive / pipe / ngModule stay eager.
So the impact should be rather small.
Fixes#14552
The main use case for the generated source maps is to give
errors a meaningful context in terms of the original source
that the user wrote.
Related changes that are included in this commit:
* renamed virtual folders used for jit:
* ng://<module type>/module.ngfactory.js
* ng://<module type>/<comp type>.ngfactory.js
* ng://<module type>/<comp type>.html (for inline templates)
* error logging:
* all errors that happen in templates are logged
from the place of the nearest element.
* instead of logging error messages and stacks separately,
we log the actual error. This is needed so that browsers apply
source maps to the stack correctly.
* error type and error is logged as one log entry.
Note that long-stack-trace zone has a bug that
disables source maps for stack traces,
see https://github.com/angular/zone.js/issues/661.
BREAKING CHANGE:
- DebugNode.source no more returns the source location of a node.
Closes 14013
This can be used to e.g. add the NoopAnimationsModule by default:
```
TestBed.initTestEnvironment([
BrowserDynamicTestingModule,
NoopAnimationsModule
], platformBrowserDynamicTesting());
```
DEPRECATION:
Use `RouterModule.forRoot(routes, {initialNavigation: 'enabled'})` instead of
`RouterModule.forRoot(routes, {initialNavigtaion: true})`.
Before doing this, move the initialization logic affecting the router
from the bootstrapped component to the boostrapped module.
Similarly, use `RouterModule.forRoot(routes, {initialNavigation: 'disabled'})`
instead of `RouterModule.forRoot(routes, {initialNavigation: false})`.
Deprecated options: 'legacy_enabled', `true` (same as 'legacy_enabled'),
'legacy_disabled', `false` (same as 'legacy_disabled').
The "Router Initial Navigation" design document covers this change.
Read more here:
https://docs.google.com/document/d/1Hlw1fPaVs-PCj5KPeJRKhrQGAvFOxdvTlwAcnZosu5A/edit?usp=sharing
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.
- 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`).
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.
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.
BREAKING CHANGE: Classes that derive from `AsyncPipe` and override
`transform()` might not compile correctly. Use of `async` pipe in
templates is unaffected.
Mitigation: Update derived classes of `AsyncPipe` that override
`transform()` to include the type parameter overloads.
Related to #12398
PR Close#14367
BREAKING CHANGE:
- `KeyValueDifferFactory` and `IterableDifferFactory` no longer have `ChangeDetectorRef` as
a parameter. It was not used and has been there for historical reasons. If you call
`DifferFactory.create(...)` remove the `ChangeDetectorRef` argument.
`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
Note, this affects the underlying class and should not affect usage.
DEPRECATION:
- the `NgFor` class is now deprecated. Use `NgForOf<T>` instead.
IMPORTANT: Only the `NgFor` class is deprecated, not the `ngFor`
directive. The `*ngFor` and related directives are unaffected by
this change as references to the `NgFor` class generated from
templates will be automatically converted to references to
`NgForOf<T>` without requiring any template modifications.
- `TrackByFn` is now deprecated. Use `TrackByFunction<T>` instead.
Migration:
- Replace direct references to the `NgFor` class to `NgForOf<any>`.
- Replace references to `TrackByFn` to `TrackByFunction<any>`.
BREAKING CHANGE:
A definition of `Iterable<T>` is now required to correctly compile
Angular applications. Support for `Iterable<T>` is not required at
runtime but a type definition `Iterable<T>` must be available.
`NgFor`, and now `NgForOf<T>`, already supports `Iterable<T>` at
runtime. With this change the type definition is updated to reflect
this support.
Migration:
- add "es2015.iterable.ts" to your tsconfig.json "libs" fields.
Part of #12398
PR Close#14104
This makes it more consistent with the dynamic version of `upgrade` and makes it
possible to share code between the dynamic and static versions.
This commit also refactors the file layout, moving common and dynamic-specific
files to `common/` and `dynamic/` directories respectively and renaming `aot/`
to `static/`.
Some private keys, used as AngularJS DI tokens, have also been renamed, but this
should not affect apps, since these keys are undocumented and not supposed to
be used externally.
BREAKING CHANGE:
Previously, `upgrade/static/downgradeInjectable` returned an array of the form:
```js
['dep1', 'dep2', ..., function factory(dep1, dep2, ...) { ... }]
```
Now it returns a function with an `$inject` property:
```js
factory.$inject = ['dep1', 'dep2', ...];
function factory(dep1, dep2, ...) { ... }
```
It shouldn't affect the behavior of apps, since both forms are equally suitable
to be used for registering AngularJS injectable services, but it is possible
that type-checking might fail or that current code breaks if it relies on the
returned value being an array.
Make sure that context (`this`) that is passed to functions generated by test helpers is passed through to the callback functions. Enables usage of Jasmine's variable sharing system to prevent accidental memory leaks during test runs.
Allow NgComponentOutlet to dynamically load a module, then load a component from
that module. Useful for lazy loading code, then add the lazy loaded code to the
page using NgComponentOutlet.
Closes#14043
- Introduce `InjectionToken<T>` which is a parameterized and type-safe
version of `OpaqueToken`.
DEPRECATION:
- `OpaqueToken` is now deprecated, use `InjectionToken<T>` instead.
- `Injector.get(token: any, notFoundValue?: any): any` is now deprecated
use the same method which is now overloaded as
`Injector.get<T>(token: Type<T>|InjectionToken<T>, notFoundValue?: T): T;`.
Migration
- Replace `OpaqueToken` with `InjectionToken<?>` and parameterize it.
- Migrate your code to only use `Type<?>` or `InjectionToken<?>` as
injection tokens. Using other tokens will not be supported in the
future.
BREAKING CHANGE:
- Because `injector.get()` is now parameterize it is possible that code
which used to work no longer type checks. Example would be if one
injects `Foo` but configures it as `{provide: Foo, useClass: MockFoo}`.
The injection instance will be that of `MockFoo` but the type will be
`Foo` instead of `any` as in the past. This means that it was possible
to call a method on `MockFoo` in the past which now will fail type
check. See this example:
```
class Foo {}
class MockFoo extends Foo {
setupMock();
}
var PROVIDERS = [
{provide: Foo, useClass: MockFoo}
];
...
function myTest(injector: Injector) {
var foo = injector.get(Foo);
// This line used to work since `foo` used to be `any` before this
// change, it will now be `Foo`, and `Foo` does not have `setUpMock()`.
// The fix is to downcast: `injector.get(Foo) as MockFoo`.
foo.setUpMock();
}
```
PR Close#13785
CHANGES:
- Remove unused `onDestroy` method on the `KeyValueDiffer` and
`IterableDiffer`.
DEPRECATION:
- `CollectionChangeRecord` is renamed to `IterableChangeRecord`.
`CollectionChangeRecord` is aliased to `IterableChangeRecord` and is
marked as `@deprecated`. It will be removed in `v5.x.x`.
- Deprecate `DefaultIterableDiffer` as it is private class which
was erroneously exposed.
- Deprecate `KeyValueDiffers#factories` as it is private field which
was erroneously exposed.
- Deprecate `IterableDiffers#factories` as it is private field which
was erroneously exposed.
BREAKING CHANGE:
- `IterableChangeRecord` is now an interface and parameterized on `<V>`.
This should not be an issue unless your code does
`new IterableChangeRecord` which it should not have a reason to do.
- `KeyValueChangeRecord` is now an interface and parameterized on `<V>`.
This should not be an issue unless your code does
`new IterableChangeRecord` which it should not have a reason to do.
Original PR #12570Fixes#13382
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
- New method `UpgradeAdapter.registerForNg1Tests(modules)` declares the
Angular 1 upgrade module and provides it to the `angular.mock.module()`
helper.
This prevents the need to bootstrap the entire hybrid for every test.
Closes#5462, #12675
- Full support for content projection in downgraded Angular 2
components. In particular, this enables multi-slot projection and
other features on <ng-content>.
- Correctly wire up hierarchical injectors for downgraded Angular 2
components: downgraded components inherit the injector of the first
other downgraded Angular 2 component they find up the DOM tree.
Closes#6629, #7727, #8729, #9643, #9649, #12675
NgIf syntax has been extended to support else clause to display template
when the condition is false. In addition the condition value can now
be stored in local variable, for later reuse. This is especially useful
when used with the `async` pipe.
Example:
```
<div *ngIf="userObservable | async; else loading; let user">
Hello {{user.last}}, {{user.first}}!
</div>
<template #loading>Waiting...</template>
```
closes#13061closes#13297
Add support for the `$postDigest()` and `$onDestroy()` lifecycle hooks.
Better align the behavior of the `$onChanges()` and `$onInit()` lifecycle hooks
with Angular 1.x:
- Call `$onInit()` before pre-linking.
- Always instantiate the controller before calling `$onChanges()`.
Add upgrade-static.umd.js bundles
This allows depending on it without getting a transitive dependency on compiler.
BREAKING CHANGE:
Four newly added APIs in 2.2.0-beta:
downgradeComponent, downgradeInjectable, UpgradeComponent, and UpgradeModule
are no longer exported by @angular/upgrade.
Import these from @angular/upgrade/static instead.
This commit introduces a new API to the ngUpgrade module, which is compatible
with AoT compilation. Primarily, it removes the dependency on reflection
over the Angular 2 metadata by introducing an API where this information
is explicitly defined, in the source code, in a way that is not lost through
AoT compilation.
This commit is a collaboration between @mhevery (who provided the original
design of the API); @gkalpak & @petebacondarwin (who implemented the
API and migrated the specs from the original ngUpgrade tests) and @alexeagle
(who provided input and review).
This commit is an starting point, there is still work to be done:
* add more documentation
* validate the API via internal projects
* align the ngUpgrade compilation of A1 directives closer to the real A1
compiler
* add more unit tests
* consider support for async `templateUrl` A1 upgraded components
Closes#12239
* feat(forms): ngSubmit event exposes $event from original submit event as local variable
Modify NgForm directive and FormGroup directive to expose the original submit event as $event in the ngSubmit event. Modify docs to reflect changes.
This resolves#10920.
* refactor: code cleanup
This reverts commit 727c2b38a4.
Revert "docs(core): updates query decorator docs"
This reverts commit b6287ccc51.
Revert "docs(core): extract how to examples"
This reverts commit 69e8ace884.
When lazily loading code, users need to be able to get hold of the
NgModuleFactory. For SystemJS environments, the SystemJS registry serves
this purpose. However other environments, such as modules compiled with
Closure compiler, do not expose exports object or a path based registry.
For these environments, `@NgModule` objects can include an identifier, and
the loading code can then pass `loadModule(id).then(() =>
getNgModule(id))` to the router.
BREAKING CHANGE: web worker platform is now exported via separate packages.
Please use @angular/platform-webworker and @angular/platform-webworker-dynamic
BREAKING CHANGE:
Exceptions are no longer part of the public API. We don't expect that anyone should be referring to the Exception types.
ExceptionHandler.call(exception: any, stackTrace?: any, reason?: string): void;
change to:
ErrorHandler.handleError(error: any): void;
BREAKING CHANGE: previously deprecated @Component.directives and @Component.pipes support was removed.
All the components and pipes now must be declarated via an NgModule. NgModule is the basic
compilation block passed into the Angular compiler via Compiler#compileModuleSync or #compileModuleAsync.
Because of this change, the Compiler#compileComponentAsync and #compileComponentSync were removed as well -
any code doing compilation should compile module instead using the apis mentioned above.
Lastly, since modules are the basic compilation unit, the ngUpgrade module was modified to always require
an NgModule to be passed into the UpgradeAdapter's constructor - previously this was optional.
Often it is useful to test a component without rendering certain directives/components
in its template because these directives require some complicated setup.
You can do that by using NO_ERRORS_SCHEMA.
TestBed.configureTestingModule({
schemas: [NO_ERRORS_SCHEMA]
});
This would disable all schema checks in your tests.
Miško Hevery
Victor Berchet
Kara
Tobias Bosch
Matias Niemelä
Pete Bacon Darwin
Chuck Jazdzewski
Jason Aden
Victor Savkin
Dzmitry Shylovich
Jason Aden
vikerman
Alex Rickabaugh
vsavkin
Dzmitry Shylovich
Alex Eagle
FrozenPandaz
Vikram Subramanian
Georgios Kalpakas
evan Liu
Dzmitry Shylovich
Toxicable
WilliamKoza
执衡
Dimitri Benin
Gion Kunz
Joao Dias
shlomiassaf
Tsuyoshi Ito
Eudes Petonnet-Vincent
Jónatan Núñez
Pawel Kozlowski
Thomas Shafer
Jeremy Elbourn
Florian Kinder
Cédric Exbrayat
Connor Wyatt
Karl Seamon
Igor Minar
Marc Laval
Martin Probst
Igor Minar
Kara Erickson
Javier Ros
Alex Eagle
Julie Ralph
Hans