Console error "providers is not defined" when built in production mode

[bbarry]

🐞 bug report

Affected Package

I suspect this is an issue in the angular compiler, not 100% sure though, could be the `NgModule` attribute in @angular/core?

Is this a regression?

I don't know, my internet is too slow to try and make a full reproduction against an older version.

Description

In my application I have a file `app.providers.ts` which has:

import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { ApiInterceptor } from './api-interceptor';
import { SpinnerService } from './ui-util/spinner.service';

export const providers = [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: ApiInterceptor,
    multi: true,
  },
  SpinnerService,
];

my app.module.ts (lines removed):

import { imports } from './app.imports';
import { providers } from './app.providers';

@NgModule({
  declarations: [
    AppComponent,
   //...
  ],
  imports,
  providers,
  bootstrap: [AppComponent],
})
export class AppModule {}

Using ng serve the site runs fine in development. Using ng build --aot --prod --subresource-integrity the error providers is not defined appears in my dev console when browsing the site.

I am able to work around the issue by changing the imports, and providers, lines above to:

  imports: [...imports],
  providers: [...providers],

🔥 Exception or Error

ReferenceError: providers is not defined
    Vw app.module.ts:105
    zUnb app.module.ts:105
    Webpack 8

(after modifying production config to enable source map)

ReferenceError: imports is not defined
    w app.module.ts:101
    zUnb app.module.ts:105
    Webpack 8

after fixing only the providers line

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.0
Node: 12.16.1
OS: win32 x64

Angular: 9.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.0
@angular-devkit/build-angular     0.901.0
@angular-devkit/build-optimizer   0.901.0
@angular-devkit/build-webpack     0.901.0
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@angular/cdk                      9.2.0
@angular/material                 9.2.0
@ngtools/webpack                  9.1.0
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.4
typescript                        3.8.3
webpack                           4.42.0

[alxhub]

Hi @bbarry,

Thanks for the report! I'm sorry to have to ask for this, but I wasn't able to reproduce this problem locally and so I need you to provide a small reproduction with instructions that demonstrates the problem, either in the form of a StackBlitz project or a Github repo.

[JoostK]

I was able to reproduce and investigation leads to a limitation in the CLI's ability to detect which imports can be elided.

The issue here is that the Angular compiler emits the providers identifier node in the shorthand assignment into an actual assignment, i.e. providers: providers. The CLI collects all imports that are actually used based on symbol information, so it attempts to resolve the symbol for the providers identifier but this ends up resolving the symbol of the property assignment, not the shorthand assignment's value symbol corresponding with the import statement.

This change allows it to work correctly:

      switch (node.kind) {
        case ts.SyntaxKind.Identifier:
          symbol = typeChecker.getSymbolAtLocation(node);
          const parent = node.parent;
+         if (parent && ts.isShorthandPropertyAssignment(parent)) {
+           const shorthandSymbol = typeChecker.getShorthandAssignmentValueSymbol(parent);
+           if (shorthandSymbol) {
+             usedSymbols.add(shorthandSymbol);
+           }
+         }
          break;
        case ts.SyntaxKind.ExportSpecifier:
          symbol = typeChecker.getExportSpecifierLocalTargetSymbol(node as ts.ExportSpecifier);
          break;
        case ts.SyntaxKind.ShorthandPropertyAssignment:
          symbol = typeChecker.getShorthandAssignmentValueSymbol(node);
          break;
      }

Note that the case it has for ts.SyntaxKind.ShorthandPropertyAssignment is never hit, as the shorthand property assignment no longer exists in the code that ngtsc emits, given that ngtsc elides the whole decorator node. However, the shorthand property assignment is still the parent node of the emitted identifier, even though it is no longer present in the source file.