Whats New in Angular V15

github.com/SeijiV13

seijivillafranca.com

Seiji Villafranca

github.com/SeijiV13

Senior Developer, Wypoon Technologies Netherlands

Microsoft MVP

Auth0 Ambassador

Community Lead, AngularPH,

Author

seijivillafranca.com

Talks

Standalone Components

build applications without using NgModules

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

Router and HttpClient tree-shakable standalone APIs

lazy load standalone components

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


// lazy loaded component
import {Routes} from '@angular/router';

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

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

Functional router guards

can create factory-like functions that accept a configuration and return a guard or resolver function

// create a class that mplements canactivate
@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
  constructor(private loginService: LoginService) {}

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

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

Functional router guards

can create factory-like functions that accept a configuration and return a guard or resolver function

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

Router unwraps default imports

router now auto-unwraps default exports when lazy loading

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



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

Router unwraps default imports

router now auto-unwraps default exports when lazy loading

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

Angular v15 is now available!. Over the past year we removed Angular’s… | by Minko Gechev | Angular Blog

Reference

Thank you

and happy coding!

Better stack trace

Ignore scripts coming from node_modules by annotating source maps via the Angular CLI

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

Better stack trace

Ignore scripts coming from node_modules by annotating source maps via the Angular CLI

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)

Automatic imports in language service

The language service now can automatically import components that you’re using in a template but haven’t added to a standalone component or an NgModule.

Whats New in Angular V15

By Seiji Ralph Villafranca

Made with Slides.com

Whats New in Angular V15

  • 42

More from Seiji Ralph Villafranca