Adds a guide describing how to use the standalone migration schematic. The new guide is grouped together with the existing standalone guide.
PR Close#49044
The commit enables the @typescript-eslint/quotes rule which mendates single quotes over doubles and allows template literals with backticks.
PR Close#48952
Add a new loaderParams attribute, which can be used to send arbitrary data to a custom loader, allowing for greater control of image CDN features.
PR Close#48907
This commit updates the docs of the functional guards and resolvers to improve the migration
experience when moving away from class-based equivalents.
PR Close#48873
StrongBrew has stopped a few years back.
We are taking over at https://simplified.courses where we have an Angular blog, do on-site training and create content.
PR Close#48340
It seems that the description of the `FormControl` usage is incorrect or at least the copy is not very helpful for beginners and can be very confusing as we do not have a command to generate a `FormControl`, as far as I know 😄. Additionally, the link for component generation points to the CLI page instead of the component generation section on the CLI page. It would be DX/UX for readers and users to get where the link's text is supposed to take them.
PR Close#48858
Some users are woried about `$any()` as function calls are to be avoided in templates. This sentence clarifies the situation.
fixes#48781
PR Close#48785
PNG converted to base64 don't work on stackblitz.
As stackblitz does't support binary files for dynamicaly created projects, we now use only svgs.
Fixes: #48773
PR Close#48774
- Update Chrome supported version description to match other browsers.
- Updates browserslist configuration in build section to match supported browsers
PR Close#48782
docs: Document extracted from the original Introduction document, which is to be retired. Linting suggested corrections made. Restructuring or rewording sentences to be shorter and clearer.
docs: revised understanding doc and pullapprove.yml
PR Close#47906
In Angular CLI 15.1 new sub commands to generate configuration and environments files were added. This commit updates several docs to mention these commands.
Closes#48364
PR Close#48757
Class and `InjectionToken`-based guards and resolvers are not as configurable,
are less re-usable, require more boilerplate, cannot be defined inline with the route,
and require more in-depth knowledge of Angular features (`Injectable`/providers).
In short, they're less powerful and more cumbersome.
In addition, continued support increases the API surface which in turn increases
bundle size, code complexity, the learning curve and API surface to teach,
maintenance cost, and cognitive load (needing to grok several different types
of information in a single place).
Lastly, supporting only the `CanXFn` types for guards and `ResolveFn` type
for resolvers in the `Route` interface will enable better code
completion and integration with TypeScript. For example, when writing an
inline functional resolver today, the function is typed as `any` and
does not provide completions for the `ResolveFn` parameters. By
restricting the type to only `ResolveFn`, in the example below
TypeScript would be able to correctly identify the `route` parameter as
`ActivatedRouteSnapshot` and when authoring the inline route, the
language service would be able to autocomplete the function parameters.
```
const userRoute: Route = {
path: 'user/:id',
resolve: {
"user": (route) => inject(UserService).getUser(route.params['id']);
}
};
```
Importantly, this deprecation only affects the support for class and
`InjectionToken` guards at the `Route` definition. `Injectable` classes
and `InjectionToken` providers are _not_ being deprecated in the general
sense. Functional guards are robust enough to even support the existing
class-based guards through a transform:
```
function mapToCanMatch(providers: Array<Type<{canMatch: CanMatchFn}>>): CanMatchFn[] {
return providers.map(provider => (...params) => inject(provider).canMatch(...params));
}
const route = {
path: 'admin',
canMatch: mapToCanMatch([AdminGuard]),
};
```
With regards to tests, because of the ability to map `Injectable`
classes to guard functions as outlined above, nothing _needs_ to change
if projects prefer testing guards the way they do today. Functional
guards can also be written in a way that's either testable with
`runInContext` or by passing mock implementations of dependencies.
For example:
```
export function myGuardWithMockableDeps(
dep1 = inject(MyService),
dep2 = inject(MyService2),
dep3 = inject(MyService3),
) { }
const route = {
path: 'admin',
canActivate: [() => myGuardWithMockableDeps()]
}
// test file
const guardResultWithMockDeps = myGuardWithMockableDeps(mockService1, mockService2, mockService3);
const guardResultWithRealDeps = TestBed.inject(EnvironmentInjector).runInContext(myGuardWithMockableDeps);
```
DEPRECATED: Class and `InjectionToken` guards and resolvers are
deprecated. Instead, write guards as plain JavaScript functions and
inject dependencies with `inject` from `@angular/core`.
PR Close#47924
Ikko Eltociear Ashimine