feat: change @Injectable() to support tree-shakeable tokens (#22005)
This commit bundles 3 important changes, with the goal of enabling tree-shaking of services which are never injected. Ordinarily, this tree-shaking is prevented by the existence of a hard dependency on the service by the module in which it is declared. Firstly, @Injectable() is modified to accept a 'scope' parameter, which points to an @NgModule(). This reverses the dependency edge, permitting the module to not depend on the service which it "provides". Secondly, the runtime is modified to understand the new relationship created above. When a module receives a request to inject a token, and cannot find that token in its list of providers, it will then look at the token for a special ngInjectableDef field which indicates which module the token is scoped to. If that module happens to be in the injector, it will behave as if the token itself was in the injector to begin with. Thirdly, the compiler is modified to read the @Injectable() metadata and to generate the special ngInjectableDef field as part of TS compilation, using the PartialModules system. Additionally, this commit adds several unit and integration tests of various flavors to test this change. PR Close #22005
This commit is contained in:

committed by
Miško Hevery

parent
2d5e7d1b52
commit
235a235fab
@ -0,0 +1,21 @@
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
load("//tools:defaults.bzl", "ng_module", "ts_library")
|
||||
load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
|
||||
|
||||
ng_module(
|
||||
name = "app",
|
||||
srcs = glob(
|
||||
[
|
||||
"src/**/*.ts",
|
||||
],
|
||||
),
|
||||
module_name = "app_built",
|
||||
deps = [
|
||||
"//packages/compiler-cli/integrationtest/bazel/injectable_def/lib2",
|
||||
"//packages/core",
|
||||
"//packages/platform-browser",
|
||||
"//packages/platform-server",
|
||||
"@rxjs",
|
||||
],
|
||||
)
|
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, NgModule} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {ServerModule} from '@angular/platform-server';
|
||||
import {Lib2Module} from 'lib2_built/module';
|
||||
|
||||
@Component({
|
||||
selector: 'id-app',
|
||||
template: '<lib2-cmp></lib2-cmp>',
|
||||
})
|
||||
export class AppComponent {
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
Lib2Module,
|
||||
BrowserModule.withServerTransition({appId: 'id-app'}),
|
||||
ServerModule,
|
||||
],
|
||||
declarations: [AppComponent],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class BasicAppModule {
|
||||
}
|
@ -0,0 +1,44 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, Injectable, NgModule, Optional, Self} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {ServerModule} from '@angular/platform-server';
|
||||
|
||||
@Injectable()
|
||||
export class Service {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'hierarchy-app',
|
||||
template: '<child-cmp></child-cmp>',
|
||||
providers: [Service],
|
||||
})
|
||||
export class AppComponent {
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'child-cmp',
|
||||
template: '{{found}}',
|
||||
})
|
||||
export class ChildComponent {
|
||||
found: boolean;
|
||||
|
||||
constructor(@Optional() @Self() service: Service|null) { this.found = !!service; }
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule.withServerTransition({appId: 'hierarchy-app'}),
|
||||
ServerModule,
|
||||
],
|
||||
declarations: [AppComponent, ChildComponent],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class HierarchyAppModule {
|
||||
}
|
@ -0,0 +1,41 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, Injectable, NgModule, Optional, Self} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {ServerModule} from '@angular/platform-server';
|
||||
|
||||
@Injectable()
|
||||
export class NormalService {
|
||||
constructor(@Optional() @Self() readonly shakeable: ShakeableService|null) {}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'self-app',
|
||||
template: '{{found}}',
|
||||
})
|
||||
export class AppComponent {
|
||||
found: boolean;
|
||||
constructor(service: NormalService) { this.found = !!service.shakeable; }
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule.withServerTransition({appId: 'id-app'}),
|
||||
ServerModule,
|
||||
],
|
||||
declarations: [AppComponent],
|
||||
bootstrap: [AppComponent],
|
||||
providers: [NormalService],
|
||||
})
|
||||
export class SelfAppModule {
|
||||
}
|
||||
|
||||
@Injectable({scope: SelfAppModule})
|
||||
export class ShakeableService {
|
||||
}
|
@ -0,0 +1,42 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, Inject, InjectionToken, NgModule, forwardRef} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {ServerModule} from '@angular/platform-server';
|
||||
|
||||
export interface IService { readonly data: string; }
|
||||
|
||||
@Component({
|
||||
selector: 'token-app',
|
||||
template: '{{data}}',
|
||||
})
|
||||
export class AppComponent {
|
||||
data: string;
|
||||
constructor(@Inject(TOKEN) service: IService) { this.data = service.data; }
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule.withServerTransition({appId: 'id-app'}),
|
||||
ServerModule,
|
||||
],
|
||||
declarations: [AppComponent],
|
||||
bootstrap: [AppComponent],
|
||||
providers: [{provide: forwardRef(() => TOKEN), useClass: forwardRef(() => Service)}]
|
||||
})
|
||||
export class TokenAppModule {
|
||||
}
|
||||
|
||||
export class Service { readonly data = 'fromToken'; }
|
||||
|
||||
export const TOKEN = new InjectionToken('test', {
|
||||
scope: TokenAppModule,
|
||||
useClass: Service,
|
||||
deps: [],
|
||||
});
|
@ -0,0 +1,30 @@
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
load("//tools:defaults.bzl", "ts_library")
|
||||
load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test")
|
||||
|
||||
ts_library(
|
||||
name = "test_lib",
|
||||
testonly = 1,
|
||||
srcs = glob(
|
||||
[
|
||||
"**/*.ts",
|
||||
],
|
||||
),
|
||||
deps = [
|
||||
"//packages/compiler-cli/integrationtest/bazel/injectable_def/app",
|
||||
"//packages/core",
|
||||
"//packages/platform-server",
|
||||
],
|
||||
)
|
||||
|
||||
jasmine_node_test(
|
||||
name = "test",
|
||||
bootstrap = ["angular/tools/testing/init_node_spec.js"],
|
||||
deps = [
|
||||
":test_lib",
|
||||
"//packages/platform-server",
|
||||
"//packages/platform-server/testing",
|
||||
"//tools/testing:node",
|
||||
],
|
||||
)
|
@ -0,0 +1,58 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {enableProdMode} from '@angular/core';
|
||||
import {renderModuleFactory} from '@angular/platform-server';
|
||||
import {BasicAppModuleNgFactory} from 'app_built/src/basic.ngfactory';
|
||||
import {HierarchyAppModuleNgFactory} from 'app_built/src/hierarchy.ngfactory';
|
||||
import {SelfAppModuleNgFactory} from 'app_built/src/self.ngfactory';
|
||||
import {TokenAppModuleNgFactory} from 'app_built/src/token.ngfactory';
|
||||
|
||||
enableProdMode();
|
||||
|
||||
describe('ngInjectableDef Bazel Integration', () => {
|
||||
it('works in AOT', done => {
|
||||
renderModuleFactory(BasicAppModuleNgFactory, {
|
||||
document: '<id-app></id-app>',
|
||||
url: '/',
|
||||
}).then(html => {
|
||||
expect(html).toMatch(/>0:0<\//);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('@Self() works in component hierarchies', done => {
|
||||
renderModuleFactory(HierarchyAppModuleNgFactory, {
|
||||
document: '<hierarchy-app></hierarchy-app>',
|
||||
url: '/',
|
||||
}).then(html => {
|
||||
expect(html).toMatch(/>false<\//);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('@Optional() Self() resolves to @Injectable() scoped service', done => {
|
||||
renderModuleFactory(SelfAppModuleNgFactory, {
|
||||
document: '<self-app></self-app>',
|
||||
url: '/',
|
||||
}).then(html => {
|
||||
expect(html).toMatch(/>true<\//);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('InjectionToken ngInjectableDef works', done => {
|
||||
renderModuleFactory(TokenAppModuleNgFactory, {
|
||||
document: '<token-app></token-app>',
|
||||
url: '/',
|
||||
}).then(html => {
|
||||
expect(html).toMatch(/>fromToken<\//);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
@ -0,0 +1,17 @@
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
load("//tools:defaults.bzl", "ng_module")
|
||||
|
||||
ng_module(
|
||||
name = "lib1",
|
||||
srcs = glob(
|
||||
[
|
||||
"**/*.ts",
|
||||
],
|
||||
),
|
||||
module_name = "lib1_built",
|
||||
deps = [
|
||||
"//packages/core",
|
||||
"@rxjs",
|
||||
],
|
||||
)
|
@ -0,0 +1,21 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Injectable, NgModule} from '@angular/core';
|
||||
|
||||
@NgModule({})
|
||||
export class Lib1Module {
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
scope: Lib1Module,
|
||||
})
|
||||
export class Service {
|
||||
static instanceCount = 0;
|
||||
instance = Service.instanceCount++;
|
||||
}
|
@ -0,0 +1,18 @@
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
load("//tools:defaults.bzl", "ng_module")
|
||||
|
||||
ng_module(
|
||||
name = "lib2",
|
||||
srcs = glob(
|
||||
[
|
||||
"**/*.ts",
|
||||
],
|
||||
),
|
||||
module_name = "lib2_built",
|
||||
deps = [
|
||||
"//packages/compiler-cli/integrationtest/bazel/injectable_def/lib1",
|
||||
"//packages/core",
|
||||
"@rxjs",
|
||||
],
|
||||
)
|
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, Injector, NgModule} from '@angular/core';
|
||||
import {Lib1Module, Service} from 'lib1_built/module';
|
||||
|
||||
@Component({
|
||||
selector: 'lib2-cmp',
|
||||
template: '{{instance1}}:{{instance2}}',
|
||||
})
|
||||
export class Lib2Cmp {
|
||||
instance1: number = -1;
|
||||
instance2: number = -1;
|
||||
|
||||
constructor(service: Service, injector: Injector) {
|
||||
this.instance1 = service.instance;
|
||||
this.instance2 = injector.get(Service).instance;
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
declarations: [Lib2Cmp],
|
||||
exports: [Lib2Cmp],
|
||||
imports: [Lib1Module],
|
||||
})
|
||||
export class Lib2Module {
|
||||
}
|
Reference in New Issue
Block a user