The peek-a-boo example image does not exactly reflect what happens. This updates the hook table and the image of the peek-a-boo output. Closes#40138
PR Close#47219
Addresses https://github.com/angular/angular/issues/47059
I try to keep the edit as concise as possible because adding any further
explanation would bring to much deeper info compared to the topic of the
page
Removed some convoluted info and replaced with a link to a page that
should focus on the specific aspect of the matter.
Conditional is obliged because IMHO that page should have a dedicated
paragraph explaining various ways of populating different injectors with
providers, and maybe integrating the interesting parts from the recent
created page about standalone app.
PR Close#47094
Adds suggestions for how to resolve the most common messages produced by the documentation linter.
Adds links to the Proselint and other style tests to the new documentation.
Updates pullapprove and navigation.
PR Close#47019
Refactored the DI section to improve doc quality, reduce cognitive load and drive consistency.
- Added an overview with prerequisites and doc cards that point to rest of the DI content
- Added introduction topic with topic purpose, value proposition and "fail fast"
- Broke apart complex concepts into simpler tasks
- Unified tone and language for each topic
- Added new content based on SME feedback
- Deleted obsolete content
PR Close#44466
In Angular 14, we introduced the `loadComponent` API for a `Route` to
allow lazy loading of a routed component in addition to the existing
`loadChildren` which allows lazy loading of child routes. As a result,
the `preload` method of the `PreloadingStrategy` needs to sometimes be
called even when there is a `canLoad` guard on the `Route`. `CanLoad`
guards block loading of child routes but _do not_ block loading of the
component.
This change updates the conditional checks in the internal preloader to
skip calling the `PreloadingStrategy.preload` when there is only a
`loadChildren` callback with a `canLoad` guard an no `loadComponent`.
In this case, the callback passed to the `preload` method is already
effectively a no-op so it's not necessary to call it at all.
resolves#47003
PR Close#47007
Fix typo [missing plural marker "element_s_"] on https://angular.io/guide/structural-directives.
Original:
>Structural directives are directives which change the DOM layout by adding and removing DOM element.
Fix:
>Structural directives are directives which change the DOM layout by adding and removing DOM element**s**.
PR Close#46961
This commit updates the code to include the TransferState providers (used for serialization) into the `ServerModule` instead of having the need to import the `ServerTransferStateModule` separately.
The list of providers in the `ServerTransferStateModule` is now empty and importing it is a noop. This is not a breaking change, since the `ServerModule` must be included anyways to make server rendering work correctly.
PR Close#46899
This commit updates the `TransferState` to make it `providedIn: 'root'`. This makes the entire `BrowserTransferStateModule` module unnecessary, so it got deprecated as well.
The `ServerTransferStateModule` is still retained, but the `renderApplication` function now also includes the necessary tokens to serialize the `TransferState` automatically, so when using the `renderApplication` function, there is no need to include `ServerTransferStateModule` as well.
This change is a part of the ongoing efforts to update the shape of the FW APIs to make them standalone-friendly (so there is no need to import any NgModules).
PR Close#46879
* Adds a short note about how service workers report request timeouts
* Updated heading levels to present a clearer hierarchy and cleaner local TOC
* Removed documentation lint errors
* Moves the service worker service timeout paragraph to a more logical topic in service-worker-devops
* Removes line error from the more logical topic.
* address feedback from PR review comments
fixes#46445
PR Close#46882
This commit adds the `createNgModuleRef` function alias to the public API. The alias is called `createNgModule`. The `createNgModule` name is more consistent with the rest of the API surface, where functions that return `*Ref`s don't include the `Ref` into the function name, for example: `createPlatform`, `ViewContainerRef.createComponent`, etc.
DEPRECATED:
The `createNgModuleRef` is deprecated in favor of newly added `createNgModule` one.
PR Close#46789
Remove or reframe references to the obsolete HeroListComponent component that was taken from an old version of the Tour of Heroes tutorial.
Incorporates review feedback.
Fix#44662
PR Close#46647
Add a section regarding component view encapsulations in the complex animation
sequences guide to let developers know how animations work in regard to
view encapsulations.
This section is used to both add information to the guide but also to
take a stand on how the animations should behave in regard to the
shadow dom view encapsulation.
This relates to PR #46488 which by trying to make sure the query
function works with shadow dom elements proved that having the
animations implementation work with shadow dom would increase the
complexity of the code and would have a negative impact on performance,
such facts alongide the small adoption of shadow dom by users influenced
the decision to keep the current functionalities and simply discourage
the use of animations and shadow dom components.
PR Close#46738
This commit adds a full example for the IfLoadedDirective and moves
the code to the StackBlitz playground for structural directives.
Fixes#40739, #37119
PR Close#46425
Currently we have two main types of guards:
`CanLoad`: decides if we can load a module (used with lazy loading)
`CanActivate` and friends. It decides if we can activate/deactivate a route.
So we always decide where we want to navigate first ("recognize") and create a new router state snapshot. And only then we run guards to check if the navigation should be allowed.
This doesn't handle one very important use case where we want to decide where to navigate based on some data (e.g., who the user is).
I suggest to add a new guard that allows us to do that.
```
[
{path: 'home', component: AdminHomePage, canUse: [IsAdmin]},
{path: 'home', component: SimpleHomePage}
]
```
Here, navigating to '/home' will render `AdminHomePage` if the user is an admin and will render 'SimpleHomePage' otherwise. Note that the url will remain '/home'.
With the introduction of standalone components and new features in the Router such as `loadComponent`,
there's a case for deprecating `CanLoad` and replacing it with the `CanMatch` guard. There are a few reasons for this:
* One of the intentions of having separate providers on a Route is that lazy
loading should not be an architectural feature of an application. It's an
optimization you do for code size. That is, there should not be an architectural
feature in the router to specifically control whether to lazy load something or
not based on conditions such as authentication. This is a slight nuanced
difference between the proposed canUse guard: this guard would control whether
you can use the route at all and as a side-effect, whether we download the code.
`CanLoad` only specified whether the code should be downloaded so canUse is more powerful and more appropriate.
* The naming of `CanLoad` will be potentially misunderstood for the `loadComponent` feature.
Because it applies to `loadChildren`, it feels reasonable to think that it will
also apply to `loadComponent`. This isn’t the case: since we don't need
to load the component until right before activation, we defer the
loading until all guards/resolvers have run.
When considering the removal of `CanLoad` and replacing it with `CanMatch`, this
does inform another decision that needed to be made: whether it makes sense for
`CanMatch` guards to return a UrlTree or if they should be restricted to just boolean.
The original thought was that no, these new guards should not allow returning UrlTree
because that significantly expands the intent of the feature from simply
“can I use the route” to “can I use this route, and if not, should I redirect?”
I now believe it should allowed to return `UrlTree` for several reasons:
* For feature parity with `CanLoad`
* Because whether we allow it as a return value or not, developers will still be
able to trigger a redirect from the guards using the `Router.navigate` function.
* Inevitably, there will be developers who disagree with the philosophical decision
to disallow `UrlTree` and we don’t necessarily have a compelling reason to refuse this as a feature.
Relates to #16211 - `CanMatch` instead of `CanActivate` would prevent
blank screen. Additional work is required to close this issue. This can
be accomplished by making the initial navigation result trackable (including
the redirects).
Resolves#14515
Replaces #16416Resolves#34231Resolves#17145Resolves#12088
PR Close#46021
When a Content Security Policy is defined that uses trusted-types in an application that uses lazy chunk files, ng
serve will be broken as angular#bundler entry needs to be added to
Content Security Policy.
Fixes#44647
PR Close#45450
In the example, @ContentChild is used in app.component.ts but the component we want to project content into is example-zippy.component.ts.
PR Close#45828
Jessica Janiuk