JoostK · Sep 24, 2021 · Sep 29, 2021
diff --git a/aio/content/guide/deprecations.md b/aio/content/guide/deprecations.md
@@ -54,7 +54,6 @@ v12 - v15
 | `@angular/core`         | [`defineInjectable`](#core)                                                                   | <!--v8--> v11         |
 | `@angular/core`         | [`entryComponents`](api/core/NgModule#entryComponents)                                        | <!--v9--> v11         |
 | `@angular/core`         | [`ANALYZE_FOR_ENTRY_COMPONENTS`](api/core/ANALYZE_FOR_ENTRY_COMPONENTS)                       | <!--v9--> v11         |
-| `@angular/router`       | [`loadChildren` string syntax](#loadChildren)                                                 | <!--v9--> v11         |
 | `@angular/core/testing` | [`TestBed.get`](#testing)                                                                     | <!--v9--> v12         |
 | `@angular/core/testing` | [`async`](#testing)                                                                           | <!--v9--> v12         |
 | `@angular/forms`        | [`FormBuilder.group` legacy options parameter](api/forms/FormBuilder#group)                   | <!--v11--> v14        |
@@ -624,6 +623,14 @@ For more information about the npm package format, see the [Angular Package Form
 
 Angular used to sanitize `[style]` and `[style.prop]` bindings to prevent malicious code from being inserted through `javascript:` expressions in CSS `url()` entries. However, most modern browsers no longer support the usage of these expressions, so sanitization was only maintained for the sake of IE 6 and 7. Given that Angular does not support either IE 6 or 7 and sanitization has a performance cost, we will no longer sanitize style bindings as of version 10 of Angular.
 
+### `loadChildren` string syntax in `@angular/router`
+
+It is no longer possible to use the `loadChildren` string syntax to configure lazy routes.
+The string syntax has been replaced with dynamic import statements.
+Find more information about the replacement [in the `LoadChildrenCallback` documentation](api/router/LoadChildrenCallback).
+
+The supporting classes `SystemJsNgModuleLoader` and `SystemJsNgModuleLoaderConfig` classes were removed from `@angular/core`.
+
 <!-- links -->
 
 [AioGuideI18nCommonMergeDefineLocalesInTheBuildConfiguration]: guide/i18n-common-merge#define-locales-in-the-build-configuration "Define locales in the build configuration - Common Internationalization task #6: Merge translations into the application | Angular"

diff --git a/goldens/public-api/core/core.md b/goldens/public-api/core/core.md
@@ -1213,19 +1213,6 @@ export interface StaticClassSansProvider {
 // @public
 export type StaticProvider = ValueProvider | ExistingProvider | StaticClassProvider | ConstructorProvider | FactoryProvider | any[];
 
-// @public @deprecated
-export class SystemJsNgModuleLoader implements NgModuleFactoryLoader {
-    constructor(_compiler: Compiler, config?: SystemJsNgModuleLoaderConfig);
-    // (undocumented)
-    load(path: string): Promise<NgModuleFactory<any>>;
-}
-
-// @public @deprecated
-export abstract class SystemJsNgModuleLoaderConfig {
-    factoryPathPrefix: string;
-    factoryPathSuffix: string;
-}
-
 // @public
 export abstract class TemplateRef<C> {
     abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;

diff --git a/goldens/public-api/router/router.md b/goldens/public-api/router/router.md
@@ -660,14 +660,14 @@ export class RouterPreloader implements OnDestroy {
 }
 
 // @public
-export class RouterState extends ɵangular_packages_router_router_m<ActivatedRoute> {
+export class RouterState extends ɵangular_packages_router_router_n<ActivatedRoute> {
     snapshot: RouterStateSnapshot;
     // (undocumented)
     toString(): string;
 }
 
 // @public
-export class RouterStateSnapshot extends ɵangular_packages_router_router_m<ActivatedRouteSnapshot> {
+export class RouterStateSnapshot extends ɵangular_packages_router_router_n<ActivatedRouteSnapshot> {
     // (undocumented)
     toString(): string;
     url: string;

diff --git a/packages/core/src/linker.ts b/packages/core/src/linker.ts
@@ -14,7 +14,6 @@ export {ElementRef} from './linker/element_ref';
 export {NgModuleFactory, NgModuleRef} from './linker/ng_module_factory';
 export {getModuleFactory, NgModuleFactoryLoader} from './linker/ng_module_factory_loader';
 export {QueryList} from './linker/query_list';
-export {SystemJsNgModuleLoader, SystemJsNgModuleLoaderConfig} from './linker/system_js_ng_module_factory_loader';
 export {TemplateRef} from './linker/template_ref';
 export {ViewContainerRef} from './linker/view_container_ref';
 export {EmbeddedViewRef, ViewRef} from './linker/view_ref';
diff --git a/packages/core/src/linker/ng_module_factory_loader.ts b/packages/core/src/linker/ng_module_factory_loader.ts
@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Injectable} from '../di';
 import {NgModuleType} from '../metadata/ng_module_def';
 import {NgModuleFactory as R3NgModuleFactory} from '../render3/ng_module_ref';
 

diff --git a/packages/core/src/linker/system_js_ng_module_factory_loader.ts b/packages/core/src/linker/system_js_ng_module_factory_loader.ts
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -767,12 +767,6 @@
   {
     "name": "SwitchMapSubscriber"
   },
-  {
-    "name": "SystemJsNgModuleLoader"
-  },
-  {
-    "name": "SystemJsNgModuleLoaderConfig"
-  },
   {
     "name": "THROW_IF_NOT_FOUND"
   },
@@ -2114,4 +2108,4 @@
   {
     "name": "ɵɵtextInterpolate1"
   }
-]
+]
diff --git a/packages/core/test/linker/system_ng_module_factory_loader_spec.ts b/packages/core/test/linker/system_ng_module_factory_loader_spec.ts
diff --git a/packages/router/src/router_module.ts b/packages/router/src/router_module.ts
@@ -7,7 +7,7 @@
  */
 
 import {APP_BASE_HREF, HashLocationStrategy, Location, LOCATION_INITIALIZED, LocationStrategy, PathLocationStrategy, PlatformLocation, ViewportScroller} from '@angular/common';
-import {ANALYZE_FOR_ENTRY_COMPONENTS, APP_BOOTSTRAP_LISTENER, APP_INITIALIZER, ApplicationRef, Compiler, ComponentRef, Inject, Injectable, InjectionToken, Injector, ModuleWithProviders, NgModule, NgModuleFactoryLoader, NgProbeToken, OnDestroy, Optional, Provider, SkipSelf, SystemJsNgModuleLoader} from '@angular/core';
+import {ANALYZE_FOR_ENTRY_COMPONENTS, APP_BOOTSTRAP_LISTENER, APP_INITIALIZER, ApplicationRef, Compiler, ComponentRef, Inject, Injectable, InjectionToken, Injector, ModuleWithProviders, NgModule, NgModuleFactory, NgModuleFactoryLoader, NgProbeToken, OnDestroy, Optional, Provider, SkipSelf} from '@angular/core';
 import {of, Subject} from 'rxjs';
 
 import {EmptyOutletComponent} from './components/empty_outlet';
@@ -27,6 +27,18 @@ import {UrlHandlingStrategy} from './url_handling_strategy';
 import {DefaultUrlSerializer, UrlSerializer, UrlTree} from './url_tree';
 import {flatten} from './utils/collection';
 
+@Injectable()
+export class UnavailableNgModuleFactoryLoader implements NgModuleFactoryLoader {
+  load(path: string): Promise<NgModuleFactory<any>> {
+    if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+      return Promise.reject(new Error(
+          'The usage of `loadChildren` with a module path string is no longer supported. Find more at https://v12.angular.io/api/router/LoadChildrenCallback to learn about the new approach.'));
+    } else {
+      return Promise.reject(new Error('`loadChildren` using a string is no longer supported'));
+    }
+  }
+}
+
 /**
  * The directives defined in the `RouterModule`.
  */
@@ -59,7 +71,7 @@ export const ROUTER_PROVIDERS: Provider[] = [
   },
   ChildrenOutletContexts,
   {provide: ActivatedRoute, useFactory: rootRoute, deps: [Router]},
-  {provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader},
+  {provide: NgModuleFactoryLoader, useClass: UnavailableNgModuleFactoryLoader},
   RouterPreloader,
   NoPreloading,
   PreloadAllModules,

diff --git a/packages/router/test/integration.spec.ts b/packages/router/test/integration.spec.ts
@@ -5106,6 +5106,34 @@ describe('Integration', () => {
                      `RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.`);
            })));
 
+    it('throws a descriptive error when string-based loadChildren is used', fakeAsync(() => {
+         // Although the string-based `loadChildren` API (`DeprecatedLoadChildren`) is still
+         // available, the runtime no longer bundles a loader that is capable of handling it by
+         // default. This test verifies that a descriptive error is reported.
+         @NgModule({
+           imports: [RouterModule.forRoot([{
+             path: 'lazy/loaded',
+             loadChildren: 'module',
+           }])],
+         })
+         class LoadedModule {
+         }
+
+         TestBed.configureTestingModule({
+           imports: [LoadedModule],
+         });
+
+         const router = TestBed.inject(Router);
+         const fixture = createRoot(router, RootCmp);
+
+         let recordedError: any = null;
+         router.navigateByUrl('/lazy/loaded').catch(err => recordedError = err);
+         advance(fixture);
+         expect(recordedError.message)
+             .toEqual(
+                 'The usage of `loadChildren` with a module path string is no longer supported. Find more at https://v12.angular.io/api/router/LoadChildrenCallback to learn about the new approach.');
+       }));
+
     it('should combine routes from multiple modules into a single configuration',
        fakeAsync(inject(
            [Router, Location, NgModuleFactoryLoader],