v15 blog post

bootstrap-routes.ts

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes),
  ]
});

default-format.ts

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: DATE_PIPE_DEFAULT_OPTIONS,
      useValue: { dateFormat: 'shortDate' }
    }
  ]
});

density.scss

@use '@angular/material' as mat;

$theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$red-palette),
    accent: mat.define-palette(mat.$blue-palette),
  ),
  typography: mat.define-typography-config(),
  density: -2,
));

@include mat.all-component-themes($theme);

directive-composition.ts

@Component({
  selector: 'mat-menu',
  hostDirectives: [HasColor, {
    directive: CdkMenu,
    inputs: ['cdkMenuDisabled: disabled'],
    outputs: ['cdkMenuClosed: closed']
  }]
})
class MatMenu {}

esbuild-builder.json

"builder": "@angular-devkit/build-angular:browser-esbuild"

functional-guards.ts

const route = {
  path: 'admin',
  canActivate: [() => inject(LoginService).isLoggedIn()]
};

image-directive.ts

import { NgOptimizedImage } from '@angular/common';

// Include it into the necessary NgModule
@NgModule({
  imports: [NgOptimizedImage],
})
class AppModule {}

// ... or a standalone Component
@Component({
  standalone: true
  imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}

lazy-component.ts

@Component({
  standalone: true,
  template: '...'
})
export default class LazyComponent { ... }

lazy-routes.ts

import {Routes} from '@angular/router';

import {LazyComponent} from './lazy.component';

export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

legacy-import.ts

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

mad-slider.html

<mat-slider>
  <input matSliderStartThumb>
  <input matSliderEndThumb>
</mat-slider>

no-unwrap-route.ts

{
  path: 'lazy',
  loadComponent: () => import('./lazy-file').then(m => m.LazyComponent),
}

non-functional-guards.ts

@Injectable({providedIn: 'root'})
export class MyGuardWithDependency implements CanActivate {
  constructor(private loginService: LoginService) {}

  canActivate() {
    return this.loginService.isLoggedIn();
  }
}

const route = {
  path: 'somePath',
  canActivate: [MyGuardWithDependency]
};

old-builder.json

"builder": "@angular-devkit/build-angular:browser"

polyfills.json

"polyfills": [
  "zone.js"
],

readable-stack-trace.txt

ERROR Error: Uncaught (in promise): Error
Error
    at app.component.ts:18:11
    at fetch (async)		
    at (anonymous)	(app.component.ts:4)
    at request	(app.component.ts:4)
    at (anonymous)	(app.component.ts:17)
    at submit	(app.component.ts:15)
    at AppComponent_click_3_listener	(app.component.html:4)

route-definition.ts

import {Routes} from '@angular/router';

export const appRoutes: Routes = [{
  path: 'lazy',
  loadChildren: () => import('./lazy/lazy.routes').then(routes => routes.lazyRoutes),
}];

standalone.ts

import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from './image-grid';

@Component({
  standalone: true,
  selector: 'photo-gallery',
  imports: [ImageGridComponent],
  template: `
    ... <image-grid [images]="imageList"></image-grid>
  `,
})
export class PhotoGalleryComponent {
  // component logic
}

bootstrapApplication(PhotoAppComponent);

unreadable-stack-trace.txt

ERROR Error: Uncaught (in promise): Error
Error
    at app.component.ts:18:11
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:26378:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at resolvePromise (zone.js:1211:31)
    at zone.js:1118:17
    at zone.js:1134:33

unwrap-route.ts

{
  path: 'lazy',
  loadComponent: () => import('./lazy-file'),
}