{
        path: '',
        outlet: 'contactus',
        loadChildren: () => import('./contactus/contactus.module').then(m => m.ContactusModule)
      }

Angular

New Capabilities

Named Outlet Lazy Loading

Previously, named outlets could only render components directly. Lazy loading a module through a named outlet was not possible. That limitation is gone now — you can load modules lazily via named outlets. A working example is available on GitHub.

Webpack 5 Integration

Angular 11 allows you to work with Webpack 5, but two caveats apply:

  • This option works only when you use yarn as your package manager.
  • Webpack 5 support remains experimental, so it shouldn't be used in production environments.

To enable Webpack 5, place the following snippet in package.json and run yarn install.

"resolutions": {
    "webpack": "^5.0.0"
}

Track the progress of Webpack 5 support via the GitHub issue.

Deprecations and Breaking Modifications

Router

When using RouteReuseStrategy#shouldReuseRoute, there was a bug where the future and next routes were swapped for child routes. This behavior is now corrected. If your application relied on the previous behavior, you may need to adapt your implementation.

Pipes

  • The SlicePipe now yields null when the input value is undefined.
  • Typings for the date and number pipes have been corrected — they previously accepted any as input.
  • DatePipe now rounds the millisecond portion of a datetime to the nearest millisecond.
  • The async pipe no longer returns null for an undefined input. If your template explicitly checks for undefined, update it to check for null instead.
  • Case conversion pipes such as lowercase previously tolerated falsy values like 0 or false. Now, passing such values throws an exception.

Browser Support

Support for IE 9, IE 10, and IE mobile has been dropped. These browsers were already marked as deprecated in Angular 10.

Forms

  • Typings for validators and asyncValidators have been improved — they previously accepted any.

Angular 11 – Towards the Type Safety — figure 1

Angular Universal

Angular 10 introduced the ability to use an absolute URL during SSR, as covered in this article.

In Angular 11, if you use useAbsoluteUrl, you must now also provide a baseUrl parameter. This baseUrl takes precedence over the protocol, hostname, and port settings.

CollectionChangeRecord Deprecated

If you still use CollectionChangeRecord, switch to IterableChangeRecord, as the former is now officially deprecated.

TypeScript 3.9

Angular 11 supports TypeScript 4.0. Support for TypeScript 3.9 has been removed.

Unit Testing

Previously, invoking TestBed.overrideProvider after TestBed initialization silently did nothing — unlike other override methods, it didn't raise an error. Now, attempting this will throw an exception.

Angular CLI

New Features

Resolver Generator

A new CLI command lets you generate a resolve guard effortlessly. Use the command below to create one.

ng g r/resolver <name>

i18n Extraction from Libraries

Starting with Angular 11, i18n tokens can be extracted from Angular libraries as well. Use the following command with a library project.

ng xi18n --ivy

Strict Mode Prompt

Angular 10 introduced the --strict flag to scaffold an application with all strict checks enabled. In Angular 11, the CLI now prompts you during generation to opt in, as shown in the image below. Additionally, the extra package.json file that was previously placed inside the app folder is no longer created — this change clears up the confusion it caused in the community.

Angular 11 – Towards the Type Safety — figure 2

E2E Tests with async/await

You can now write end-to-end tests using async/await for asynchronous operations. Previously, Protractor relied on SELENIUM_PROMISE_MANAGER to handle async scenarios. The CLI no longer generates Protractor configuration with SELENIUM_PROMISE_MANAGER.

Inline Google Fonts and Icons

Google Fonts and Icons can be inlined directly into index.html. This is controlled by a flag in angular.json under the build section. The behavior is enabled by default in production builds. If you use this feature, ensure your build environment has internet access — keep this in mind for CI pipelines.

"configurations": {
  "optimization": true
}

To turn off this optimization, change the flag as shown below.

"configurations": {
  "optimization": {
    "fonts": false
  }
}

OR

"configurations": {
  "optimization": {
    "fonts": {
      "inline": false
    }
  }
}

HMR (Hot Module Replacement)

The long-awaited HMR support has finally landed. It was broken for quite some time, but now it works. Start it with the command below. For a deeper dive into HMR capabilities, check the webpack documentation.

ng serve --hmr

Angular 11 – Towards the Type Safety — figure 3

Formatted Build Output

The terminal now displays the final build summary in a structured table, looking like this:

Angular 11 – Towards the Type Safety — figure 4

Angular Components

New Features

CDK

  • For testing, you can now dispatch a custom event that can't be simulated with standard events like change or input. Use the dispatchEvent method for such cases.
  • TestElement now supports dispatching a rightClick event, useful for testing context menus that open on right-click.
  • getNativeElement is now available for working with harness environments.
  • A new manualChangeDetection API disables automatic change detection, which is handy when you need to run async code before triggering change detection.
 await manualChangeDetection(async () => {
    await buttonHarness.click();
    fixture.detectChanges();
    // Check expectations while async click operation is in progress.
    expect(isProgressSpinnerVisible()).toBe(true);
    await fixture.whenStable();
    // Check expectations after async click operation complete.
    expect(isProgressSpinnerVisible()).toBe(false);
  });
  • The selectOptions API lets you select options within a native select element in the harness environment.

Material

  • The stepper control now supports theming.
  • The viewChanged event fires when the datepicker changes its view — for instance, switching between month view and year view.
  • MAT_TABS_CONFIG now accepts a dynamicHeight property, letting all tabs in the app grow to match the active tab's height. This was previously only available on MatTabGroup directly. Check an example on StackBlitz.
  • The Tree control includes a new getTreeStructure method in its test harness.
  • MatTree now has an official test harness.

Deprecations and Breaking Changes

  • matSnackBarHarness.getRole() has been replaced by getAriaLive().

ESLint Migration

The plan to move from TSLint to ESLint is underway. An angular-eslint builder already exists and can be adopted today. In the future, the Angular team may ship a dedicated command — similar to ng deploy — to streamline integrating any ESLint builder.

Refer to the angular-eslint repository on GitHub for migration guidance. The team is also developing schematics to automate the migration process.

Summary

Angular 11 concentrates on tightening type safety and clearing out long-standing backlogs that frustrated the community. HMR will notably speed up development workflows, and the improved pipe typings will help eliminate runtime errors. One eagerly anticipated feature for the next major release is Type Safe Forms, which is currently in progress and will introduce a breaking change.

Check the updated roadmap here.