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

packages/compiler-cli/integrationtest/bazel/injectable_def/app/BUILD.bazel

@@ -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",
+    ],
+)

packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/basic.ts

@@ -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 {
+}

packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/hierarchy.ts

@@ -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 {
+}

packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/self.ts

@@ -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 {
+}

packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/token.ts

@@ -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: [],
+});

packages/compiler-cli/integrationtest/bazel/injectable_def/app/test/BUILD.bazel

@@ -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",
+    ],
+)

packages/compiler-cli/integrationtest/bazel/injectable_def/app/test/app_spec.ts

@@ -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();
+    });
+  });
+});

packages/compiler-cli/integrationtest/bazel/injectable_def/lib1/BUILD.bazel

@@ -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",
+    ],
+)

packages/compiler-cli/integrationtest/bazel/injectable_def/lib1/module.ts

@@ -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++;
+}

packages/compiler-cli/integrationtest/bazel/injectable_def/lib2/BUILD.bazel

@@ -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",
+    ],
+)

packages/compiler-cli/integrationtest/bazel/injectable_def/lib2/module.ts

@@ -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 {
+}

packages/compiler-cli/src/transformers/program.ts

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AotCompiler, AotCompilerHost, AotCompilerOptions, EmitterVisitorContext, FormattedMessageChain, GeneratedFile, MessageBundle, NgAnalyzedFile, NgAnalyzedModules, ParseSourceSpan, PartialModule, Position, Serializer, TypeScriptEmitter, Xliff, Xliff2, Xmb, core, createAotCompiler, getParseErrors, isFormattedError, isSyntaxError} from '@angular/compiler';
+import {AotCompiler, AotCompilerHost, AotCompilerOptions, EmitterVisitorContext, FormattedMessageChain, GeneratedFile, MessageBundle, NgAnalyzedFile, NgAnalyzedFileWithInjectables, NgAnalyzedModules, ParseSourceSpan, PartialModule, Position, Serializer, TypeScriptEmitter, Xliff, Xliff2, Xmb, core, createAotCompiler, getParseErrors, isFormattedError, isSyntaxError} from '@angular/compiler';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as ts from 'typescript';
@@ -22,7 +22,7 @@ import {MetadataCache, MetadataTransformer} from './metadata_cache';
 import {getAngularEmitterTransformFactory} from './node_emitter_transform';
 import {PartialModuleMetadataTransformer} from './r3_metadata_transform';
 import {getAngularClassTransformerFactory} from './r3_transform';
-import {GENERATED_FILES, StructureIsReused, createMessageDiagnostic, isInRootDir, ngToTsDiagnostic, tsStructureIsReused, userError} from './util';
+import {DTS, GENERATED_FILES, StructureIsReused, TS, createMessageDiagnostic, isInRootDir, ngToTsDiagnostic, tsStructureIsReused, userError} from './util';
 
 
 
@@ -62,6 +62,7 @@ class AngularCompilerProgram implements Program {
   private _hostAdapter: TsCompilerAotCompilerTypeCheckHostAdapter;
   private _tsProgram: ts.Program;
   private _analyzedModules: NgAnalyzedModules|undefined;
+  private _analyzedInjectables: NgAnalyzedFileWithInjectables[]|undefined;
   private _structuralDiagnostics: Diagnostic[]|undefined;
   private _programWithStubs: ts.Program|undefined;
   private _optionsDiagnostics: Diagnostic[] = [];
@@ -191,13 +192,15 @@ class AngularCompilerProgram implements Program {
     }
     return Promise.resolve()
         .then(() => {
-          const {tmpProgram, sourceFiles, rootNames} = this._createProgramWithBasicStubs();
-          return this.compiler.loadFilesAsync(sourceFiles).then(analyzedModules => {
-            if (this._analyzedModules) {
-              throw new Error('Angular structure loaded both synchronously and asynchronously');
-            }
-            this._updateProgramWithTypeCheckStubs(tmpProgram, analyzedModules, rootNames);
-          });
+          const {tmpProgram, sourceFiles, tsFiles, rootNames} = this._createProgramWithBasicStubs();
+          return this.compiler.loadFilesAsync(sourceFiles, tsFiles)
+              .then(({analyzedModules, analyzedInjectables}) => {
+                if (this._analyzedModules) {
+                  throw new Error('Angular structure loaded both synchronously and asynchronously');
+                }
+                this._updateProgramWithTypeCheckStubs(
+                    tmpProgram, analyzedModules, analyzedInjectables, rootNames);
+              });
         })
         .catch(e => this._createProgramOnError(e));
   }
@@ -304,8 +307,12 @@ class AngularCompilerProgram implements Program {
           }
           this.writeFile(outFileName, outData, writeByteOrderMark, onError, genFile, sourceFiles);
         };
-    const tsCustomTransformers = this.calculateTransforms(
-        genFileByFileName, /* partialModules */ undefined, customTransformers);
+
+    const modules = this._analyzedInjectables &&
+        this.compiler.emitAllPartialModules2(this._analyzedInjectables);
+
+    const tsCustomTransformers =
+        this.calculateTransforms(genFileByFileName, modules, customTransformers);
     const emitOnlyDtsFiles = (emitFlags & (EmitFlags.DTS | EmitFlags.JS)) == EmitFlags.DTS;
     // Restore the original references before we emit so TypeScript doesn't emit
     // a reference to the .d.ts file.
@@ -491,9 +498,11 @@ class AngularCompilerProgram implements Program {
       return;
     }
     try {
-      const {tmpProgram, sourceFiles, rootNames} = this._createProgramWithBasicStubs();
-      const analyzedModules = this.compiler.loadFilesSync(sourceFiles);
-      this._updateProgramWithTypeCheckStubs(tmpProgram, analyzedModules, rootNames);
+      const {tmpProgram, sourceFiles, tsFiles, rootNames} = this._createProgramWithBasicStubs();
+      const {analyzedModules, analyzedInjectables} =
+          this.compiler.loadFilesSync(sourceFiles, tsFiles);
+      this._updateProgramWithTypeCheckStubs(
+          tmpProgram, analyzedModules, analyzedInjectables, rootNames);
     } catch (e) {
       this._createProgramOnError(e);
     }
@@ -520,6 +529,7 @@ class AngularCompilerProgram implements Program {
     tmpProgram: ts.Program,
     rootNames: string[],
     sourceFiles: string[],
+    tsFiles: string[],
   } {
     if (this._analyzedModules) {
       throw new Error(`Internal Error: already initialized!`);
@@ -553,17 +563,23 @@ class AngularCompilerProgram implements Program {
 
     const tmpProgram = ts.createProgram(rootNames, this.options, this.hostAdapter, oldTsProgram);
     const sourceFiles: string[] = [];
+    const tsFiles: string[] = [];
     tmpProgram.getSourceFiles().forEach(sf => {
       if (this.hostAdapter.isSourceFile(sf.fileName)) {
         sourceFiles.push(sf.fileName);
       }
+      if (TS.test(sf.fileName) && !DTS.test(sf.fileName)) {
+        tsFiles.push(sf.fileName);
+      }
     });
-    return {tmpProgram, sourceFiles, rootNames};
+    return {tmpProgram, sourceFiles, tsFiles, rootNames};
   }
 
   private _updateProgramWithTypeCheckStubs(
-      tmpProgram: ts.Program, analyzedModules: NgAnalyzedModules, rootNames: string[]) {
+      tmpProgram: ts.Program, analyzedModules: NgAnalyzedModules,
+      analyzedInjectables: NgAnalyzedFileWithInjectables[], rootNames: string[]) {
     this._analyzedModules = analyzedModules;
+    this._analyzedInjectables = analyzedInjectables;
     tmpProgram.getSourceFiles().forEach(sf => {
       if (sf.fileName.endsWith('.ngfactory.ts')) {
         const {generate, baseFileName} = this.hostAdapter.shouldGenerateFile(sf.fileName);

packages/compiler-cli/src/transformers/r3_transform.ts

@@ -26,7 +26,7 @@ export function getAngularClassTransformerFactory(modules: PartialModule[]): Tra
   return function(context: ts.TransformationContext) {
     return function(sourceFile: ts.SourceFile): ts.SourceFile {
       const module = moduleMap.get(sourceFile.fileName);
-      if (module) {
+      if (module && module.statements.length > 0) {
         const [newSourceFile] = updateSourceFile(sourceFile, module, context);
         return newSourceFile;
       }

packages/compiler-cli/src/transformers/util.ts

@@ -14,6 +14,7 @@ import {CompilerOptions, DEFAULT_ERROR_CODE, Diagnostic, SOURCE} from './api';
 
 export const GENERATED_FILES = /(.*?)\.(ngfactory|shim\.ngstyle|ngstyle|ngsummary)\.(js|d\.ts|ts)$/;
 export const DTS = /\.d\.ts$/;
+export const TS = /^(?!.*\.d\.ts$).*\.ts$/;
 
 export const enum StructureIsReused {Not = 0, SafeModules = 1, Completely = 2}
 

packages/compiler-cli/test/ngc_spec.ts

@@ -1942,4 +1942,157 @@ describe('ngc transformer command-line', () => {
       expect(emittedFile('hello-world.js')).toContain('ngComponentDef');
     });
   });
+
+  describe('tree shakeable services', () => {
+
+    function compileService(source: string): string {
+      write('service.ts', source);
+
+      const exitCode = main(['-p', path.join(basePath, 'tsconfig.json')], errorSpy);
+      expect(exitCode).toEqual(0);
+
+      const servicePath = path.resolve(outDir, 'service.js');
+      return fs.readFileSync(servicePath, 'utf8');
+    }
+
+    beforeEach(() => {
+      writeConfig(`{
+        "extends": "./tsconfig-base.json",
+        "files": ["service.ts"]
+      }`);
+      write('module.ts', `
+        import {NgModule} from '@angular/core';
+
+        @NgModule({})
+        export class Module {}
+      `);
+    });
+
+    describe(`doesn't break existing injectables`, () => {
+      it('on simple services', () => {
+        const source = compileService(`
+        import {Injectable, NgModule} from '@angular/core';
+        
+        @Injectable()
+        export class Service {
+          constructor(public param: string) {}
+        }
+        
+        @NgModule({
+          providers: [{provide: Service, useValue: new Service('test')}],
+        })
+        export class ServiceModule {}
+        `);
+        expect(source).not.toMatch(/ngInjectableDef/);
+      });
+      it('on a service with a base class service', () => {
+        const source = compileService(`
+        import {Injectable, NgModule} from '@angular/core';
+        
+        @Injectable()
+        export class Dep {}
+
+        export class Base {
+          constructor(private dep: Dep) {}
+        }
+        @Injectable()
+        export class Service extends Base {}
+        
+        @NgModule({
+          providers: [Service],
+        })
+        export class ServiceModule {}
+        `);
+        expect(source).not.toMatch(/ngInjectableDef/);
+      });
+    });
+
+    it('compiles a basic InjectableDef', () => {
+      const source = compileService(`
+        import {Injectable} from '@angular/core';
+        import {Module} from './module';
+
+        @Injectable({
+          scope: Module,
+        })
+        export class Service {}
+      `);
+      expect(source).toMatch(/ngInjectableDef = .+\.defineInjectable\(/);
+      expect(source).toMatch(/ngInjectableDef.*token: Service/);
+      expect(source).toMatch(/ngInjectableDef.*scope: .+\.Module/);
+    });
+
+    it('compiles a useValue InjectableDef', () => {
+      const source = compileService(`
+        import {Injectable} from '@angular/core';
+        import {Module} from './module';
+
+        export const CONST_SERVICE: Service = null;
+
+        @Injectable({
+          scope: Module,
+          useValue: CONST_SERVICE
+        })
+        export class Service {}
+      `);
+      expect(source).toMatch(/ngInjectableDef.*return CONST_SERVICE/);
+    });
+
+    it('compiles a useExisting InjectableDef', () => {
+      const source = compileService(`
+        import {Injectable} from '@angular/core';
+        import {Module} from './module';
+
+        @Injectable()
+        export class Existing {}
+
+        @Injectable({
+          scope: Module,
+          useExisting: Existing,
+        })
+        export class Service {}
+      `);
+      expect(source).toMatch(/ngInjectableDef.*return ..\.inject\(Existing\)/);
+    });
+
+    it('compiles a useFactory InjectableDef with optional dep', () => {
+      const source = compileService(`
+        import {Injectable, Optional} from '@angular/core';
+        import {Module} from './module';
+
+        @Injectable()
+        export class Existing {}
+
+        @Injectable({
+          scope: Module,
+          useFactory: (existing: Existing|null) => new Service(existing),
+          deps: [[new Optional(), Existing]],
+        })
+        export class Service {
+          constructor(e: Existing|null) {}
+        }
+      `);
+      expect(source).toMatch(/ngInjectableDef.*return ..\(..\.inject\(Existing, null, 0\)/);
+    });
+
+    it('compiles a useFactory InjectableDef with skip-self dep', () => {
+      const source = compileService(`
+        import {Injectable, SkipSelf} from '@angular/core';
+        import {Module} from './module';
+
+        @Injectable()
+        export class Existing {}
+
+        @Injectable({
+          scope: Module,
+          useFactory: (existing: Existing) => new Service(existing),
+          deps: [[new SkipSelf(), Existing]],
+        })
+        export class Service {
+          constructor(e: Existing) {}
+        }
+      `);
+      expect(source).toMatch(/ngInjectableDef.*return ..\(..\.inject\(Existing, undefined, 1\)/);
+    });
+  });
 });