Skip to content

refactor(router): remove support for loadChildren string syntax #43591

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
JoostK wants to merge 6 commits into from
Closed

refactor(router): remove support for loadChildren string syntax #43591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6320c00
docs: refactor example apps to use dynamic imports for `loadChildren`
JoostK Sep 25, 2021
fb1d1c7
refactor(router): remove support for `loadChildren` string syntax
JoostK Sep 24, 2021
1a9c0e4
fixup! refactor(router): remove support for `loadChildren` string syntax
JoostK Sep 25, 2021
2d16f74
fixup! refactor(router): remove support for `loadChildren` string syntax
JoostK Sep 25, 2021
eafaa78
fixup! refactor(router): remove support for `loadChildren` string syntax
JoostK Sep 27, 2021
04fb369
refactor(compiler-cli): remove `listLazyRoutes` operation
JoostK Sep 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion aio/content/guide/deprecations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ v12 - v15
| `@angular/core` | [`entryComponents`](api/core/NgModule#entryComponents) | <!--v9--> v11 |
| `@angular/core` | [`ANALYZE_FOR_ENTRY_COMPONENTS`](api/core/ANALYZE_FOR_ENTRY_COMPONENTS) | <!--v9--> v11 |
| `@angular/core` | [Factory-based signature of `ViewContainerRef.createComponent`](api/core/ViewContainerRef#createComponent) | <!--v13--> v15 |
| `@angular/router` | [`loadChildren` string syntax](#loadChildren) | <!--v9--> v11 |
| `@angular/core/testing` | [`TestBed.get`](#testing) | <!--v9--> v12 |
| `@angular/core/testing` | [`async`](#testing) | <!--v9--> v12 |
| `@angular/core/testing` | [`aotSummaries` argument in `TestBed.initTestEnvironment`](#testing) | <!--v13--> v14 |
Expand Down Expand Up @@ -630,6 +629,15 @@ 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.
The `DeprecatedLoadChildren` type was removed from `@angular/router`.
Find more information about the replacement in the [`LoadChildrenCallback` documentation](api/router/LoadChildrenCallback).

The supporting classes `NgModuleFactoryLoader`, `SystemJsNgModuleLoader` and `SystemJsNgModuleLoaderConfig` classes were removed from `@angular/core`, as well as `SpyNgModuleFactoryLoader` from `@angular/router`.

<!-- 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"
Expand Down
4 changes: 0 additions & 4 deletions goldens/circular-deps/packages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,6 @@
"packages/compiler-cli/src/ngtsc/partial_evaluator/src/interface.ts",
"packages/compiler-cli/src/ngtsc/partial_evaluator/src/interpreter.ts"
],
[
"packages/compiler-cli/src/ngtsc/routing/src/analyzer.ts",
"packages/compiler-cli/src/ngtsc/routing/src/lazy.ts"
],
[
"packages/compiler-cli/src/ngtsc/scope/src/component_scope.ts",
"packages/compiler-cli/src/ngtsc/scope/src/local.ts"
Expand Down
19 changes: 0 additions & 19 deletions goldens/public-api/core/core.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -813,12 +813,6 @@ export abstract class NgModuleFactory<T> {
abstract get moduleType(): Type<T>;
}

// @public @deprecated
export abstract class NgModuleFactoryLoader {
Comment thread
atscott marked this conversation as resolved.
Resolved
// (undocumented)
abstract load(path: string): Promise<NgModuleFactory<any>>;
}

// @public
export abstract class NgModuleRef<T> {
abstract get componentFactoryResolver(): ComponentFactoryResolver;
Expand Down Expand Up @@ -1213,19 +1207,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>;
Expand Down
10 changes: 3 additions & 7 deletions goldens/public-api/router/router.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { Location as Location_2 } from '@angular/common';
import { LocationStrategy } from '@angular/common';
import { ModuleWithProviders } from '@angular/core';
import { NgModuleFactory } from '@angular/core';
import { NgModuleFactoryLoader } from '@angular/core';
import { Observable } from 'rxjs';
import { OnChanges } from '@angular/core';
import { OnDestroy } from '@angular/core';
Expand Down Expand Up @@ -174,9 +173,6 @@ export class DefaultUrlSerializer implements UrlSerializer {
serialize(tree: UrlTree): string;
}

// @public @deprecated
export type DeprecatedLoadChildren = string;

// @public
export type DetachedRouteHandle = {};

Expand Down Expand Up @@ -246,7 +242,7 @@ export interface IsActiveMatchOptions {
}

// @public
export type LoadChildren = LoadChildrenCallback | DeprecatedLoadChildren;
export type LoadChildren = LoadChildrenCallback;

// @public
export type LoadChildrenCallback = () => Type<any> | NgModuleFactory<any> | Observable<Type<any>> | Promise<NgModuleFactory<any> | Type<any> | any>;
Expand Down Expand Up @@ -466,7 +462,7 @@ export class RouteConfigLoadStart {

// @public
export class Router {
constructor(rootComponentType: Type<any> | null, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location_2, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes);
constructor(rootComponentType: Type<any> | null, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location_2, injector: Injector, compiler: Compiler, config: Routes);
canceledNavigationResolution: 'replace' | 'computed';
// (undocumented)
config: Routes;
Expand Down Expand Up @@ -650,7 +646,7 @@ export interface RouterOutletContract {

// @public
export class RouterPreloader implements OnDestroy {
constructor(router: Router, moduleLoader: NgModuleFactoryLoader, compiler: Compiler, injector: Injector, preloadingStrategy: PreloadingStrategy);
constructor(router: Router, compiler: Compiler, injector: Injector, preloadingStrategy: PreloadingStrategy);
// (undocumented)
ngOnDestroy(): void;
// (undocumented)
Expand Down
23 changes: 2 additions & 21 deletions goldens/public-api/router/testing/testing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,9 @@ import { ExtraOptions } from '@angular/router';
import { Injector } from '@angular/core';
import { Location as Location_2 } from '@angular/common';
import { ModuleWithProviders } from '@angular/core';
import { NgModuleFactory } from '@angular/core';
import { NgModuleFactoryLoader } from '@angular/core';
import { Route } from '@angular/router';
import { Router } from '@angular/router';
import { RouteReuseStrategy } from '@angular/router';
import { Routes } from '@angular/router';
import { UrlHandlingStrategy } from '@angular/router';
import { UrlSerializer } from '@angular/router';
Expand All @@ -25,25 +24,7 @@ export class RouterTestingModule {
}

// @public
export function setupTestingRouter(urlSerializer: UrlSerializer, contexts: ChildrenOutletContexts, location: Location_2, loader: NgModuleFactoryLoader, compiler: Compiler, injector: Injector, routes: Route[][], opts?: ExtraOptions, urlHandlingStrategy?: UrlHandlingStrategy): Router;

// @public @deprecated
export function setupTestingRouter(urlSerializer: UrlSerializer, contexts: ChildrenOutletContexts, location: Location_2, loader: NgModuleFactoryLoader, compiler: Compiler, injector: Injector, routes: Route[][], urlHandlingStrategy?: UrlHandlingStrategy): Router;

// @public
export class SpyNgModuleFactoryLoader implements NgModuleFactoryLoader {
constructor(compiler: Compiler);
// (undocumented)
load(path: string): Promise<NgModuleFactory<any>>;
set stubbedModules(modules: {
[path: string]: any;
});
// (undocumented)
get stubbedModules(): {
[path: string]: any;
};
}

export function setupTestingRouter(urlSerializer: UrlSerializer, contexts: ChildrenOutletContexts, location: Location_2, compiler: Compiler, injector: Injector, routes: Route[][], opts?: ExtraOptions | UrlHandlingStrategy, urlHandlingStrategy?: UrlHandlingStrategy, routeReuseStrategy?: RouteReuseStrategy): Router;

@JoostK JoostK Sep 26, 2021

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is technically a breaking change (and mentioned in the commit message) to a signature that was not marked as deprecated, but I don't see a different way of achieving this. Since this is test-only code it is unlikely to be called from a library, so I'd consider this an acceptable break.

@atscott This particular change is not accounted for in the fixup commit that removes NgModuleFactoryLoader. Any g3 usages need to be cleaned up separately (or we'd have to extend the patch to undo this change and create an intermediate Injector to provide the given NgModuleFactoryLoader)

@atscott atscott Sep 29, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As long as g3 still uses loadChildren: string, we'll still need this because the tests need a way to stub the loader.

Ah, I see what you did. I don't think this should be an issue.


// (No @packageDocumentation comment for this package)

Expand Down
4 changes: 2 additions & 2 deletions goldens/size-tracking/aio-payloads.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@
"master": {
"uncompressed": {
"runtime-es2017": 4841,
"main-es2017": 463023,
"main-es2017": 462372,
"polyfills-es2017": 55373,
"styles": 69772,
"light-theme": 79025,
"dark-theme": 78924
}
}
}
}
}
6 changes: 3 additions & 3 deletions goldens/size-tracking/integration-payloads.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"master": {
"uncompressed": {
"runtime": 1105,
"main": 145314,
"main": 144744,
"polyfills": 36939
}
}
Expand All @@ -33,7 +33,7 @@
"master": {
"uncompressed": {
"runtime": 1101,
"main": 137914,
"main": 137399,
"polyfills": 37641
}
}
Expand All @@ -42,7 +42,7 @@
"master": {
"uncompressed": {
"runtime": 2843,
"main": 239937,
"main": 238453,
"polyfills": 37064,
"src_app_lazy_lazy_module_ts": 795
}
Expand Down
3 changes: 2 additions & 1 deletion modules/playground/src/routing/app/inbox-app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@ export class DraftsCmp {

export const ROUTER_CONFIG = [
{path: '', pathMatch: 'full', redirectTo: 'inbox'}, {path: 'inbox', component: InboxCmp},
{path: 'drafts', component: DraftsCmp}, {path: 'detail', loadChildren: 'app/inbox-detail.js'}
{path: 'drafts', component: DraftsCmp},
{path: 'detail', loadChildren: () => import('./inbox-detail.js').then(mod => mod.default)}
];

@Component({selector: 'inbox-app', templateUrl: './inbox-app.html'})
Expand Down
6 changes: 4 additions & 2 deletions packages/compiler-cli/integrationtest/ngtools_src/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@ export class HomeView {
declarations: [AppComponent, HomeView],
imports: [
BrowserModule, RouterModule.forRoot([
{path: 'lazy', loadChildren: './lazy.module#LazyModule'},
{path: 'feature2', loadChildren: 'feature2/feature2.module#Feature2Module'},
{path: 'lazy', loadChildren: () => import('./lazy.module').then(mod => mod.LazyModule)}, {
path: 'feature2',
loadChildren: () => import('./feature2/feature2.module').then(mod => mod.Feature2Module)
},
{path: '', component: HomeView}
])
],
Expand Down
12 changes: 9 additions & 3 deletions packages/compiler-cli/integrationtest/ngtools_src/feature/lazy-feature.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,15 @@ export class LazyFeatureComponent {

@NgModule({
imports: [RouterModule.forChild([
{path: '', component: LazyFeatureComponent, pathMatch: 'full'},
{path: 'feature', loadChildren: './feature.module#FeatureModule'},
{path: 'nested-feature', loadChildren: './lazy-feature-nested.module#LazyFeatureNestedModule'}
{path: '', component: LazyFeatureComponent, pathMatch: 'full'}, {
path: 'feature',
loadChildren: () => import('./feature.module').then(mod => mod.FeatureModule)
},
{
path: 'nested-feature',
loadChildren: () =>
import('./lazy-feature-nested.module').then(mod => mod.LazyFeatureNestedModule)
}
])],
declarations: [LazyFeatureComponent]
})
Expand Down
7 changes: 5 additions & 2 deletions packages/compiler-cli/integrationtest/ngtools_src/feature2/feature2.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,11 @@ export class FeatureComponent {
declarations: [FeatureComponent],
imports: [RouterModule.forChild([
{path: '', component: FeatureComponent},
{path: 'd', loadChildren: './default.module'},
{path: 'e', loadChildren: 'feature/feature.module#FeatureModule'},
{path: 'd', loadChildren: () => import('./default.module').then(mod => mod.default)},
{
path: 'e',
loadChildren: () => import('../feature/feature.module').then(mod => mod.FeatureModule)
},
])]
})
export class Feature2Module {
Expand Down
11 changes: 8 additions & 3 deletions packages/compiler-cli/integrationtest/ngtools_src/lazy.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,14 @@ export class LazyComponent {

@NgModule({
imports: [[RouterModule.forChild([
{path: '', component: LazyComponent, pathMatch: 'full'},
{path: 'feature', loadChildren: './feature/feature.module#FeatureModule'},
{path: 'lazy-feature', loadChildren: './feature/lazy-feature.module#LazyFeatureModule'}
{path: '', component: LazyComponent, pathMatch: 'full'}, {
path: 'feature',
loadChildren: () => import('./feature/feature.module').then(mod => mod.FeatureModule)
},
{
path: 'lazy-feature',
loadChildren: () => import('./feature/lazy-feature.module').then(mod => mod.LazyFeatureModule)
}
])]],
declarations: [LazyComponent]
})
Expand Down
87 changes: 0 additions & 87 deletions packages/compiler-cli/integrationtest/test/test_ngtools_api.ts
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/compiler-cli/integrationtest/tsconfig-build.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,5 @@
"src/module",
"src/bootstrap",
"test/all_spec",
"test/test_ngtools_api"
]
}
1 change: 0 additions & 1 deletion packages/compiler-cli/integrationtest/tsconfig-xi18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,5 @@
"src/module",
"src/bootstrap",
"test/all_spec",
"test/test_ngtools_api"
]
}
3 changes: 1 addition & 2 deletions packages/compiler-cli/ngcc/src/analysis/decoration_analyzer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,8 +138,7 @@ export class DecorationAnalyzer {
/* errorOnDuplicateProv */ false),
new NgModuleDecoratorHandler(
this.reflectionHost, this.evaluator, this.fullMetaReader, this.fullRegistry,
this.scopeRegistry, this.referencesRegistry, this.isCore, /* routeAnalyzer */ null,
this.refEmitter,
this.scopeRegistry, this.referencesRegistry, this.isCore, this.refEmitter,
/* factoryTracker */ null, !!this.compilerOptions.annotateForClosureCompiler,
this.injectableRegistry, NOOP_PERF_RECORDER),
];
Expand Down
1 change: 0 additions & 1 deletion packages/compiler-cli/src/ngtsc/annotations/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ ts_library(
"//packages/compiler-cli/src/ngtsc/partial_evaluator",
"//packages/compiler-cli/src/ngtsc/perf",
"//packages/compiler-cli/src/ngtsc/reflection",
"//packages/compiler-cli/src/ngtsc/routing",
"//packages/compiler-cli/src/ngtsc/scope",
"//packages/compiler-cli/src/ngtsc/shims:api",
"//packages/compiler-cli/src/ngtsc/transform",
Expand Down
Loading