@angular/compiler-cli: Missing Property access check for ngtsc

[lukasholzer]

🐞 bug report

Affected Package

@angular/compiler-cli – ngtsc

Is this a regression?

No, I don't think so.

Description

In the typeToValue function of the ngtsc there is a missing property access check so that the typescript compile fails with an error that does not provide the right context. It is okay that it is failing but it should print something like "it cannot resolve the typeNode as the dependency could not be found" instead of:

bazel-out/host/bin/tools/bazel_rules/tsc_wrapped_with_angular.sh @@bazel-out/darwin-fastbuild/bin/libs/barista-components/drawer/compile_es5_tsconfig.json)
Execution platform: @local_config_platform//:host
Compilation failed TypeError: Cannot read property '0' of undefined
    at Object.typeToValue (/private/var/tmp/_bazel_lukas.holzer/14b203e5dd3ee3cb631c98babb73d5eb/execroot/dynatrace/bazel-out/host/bin/tools/bazel_rules/tsc_wrapped_with_angular.sh.runfiles/npm/node_modules/@angular/compiler-cli/src/ngtsc/reflection/src/type_to_value.js:57:66)
    at /private/var/tmp/_bazel_lukas.holzer/14b203e5dd3ee3cb631c98babb73d5eb/execroot/dynatrace/bazel-out/host/bin/tools/bazel_rules/tsc_wrapped_with_angular.sh.runfiles/npm/node_modules/@angular/compiler-cli/src/ngtsc/reflection/src/typescript.js:75:58

node_modules/@angular/compiler-cli/src/ngtsc/reflection/src/type_to_value.js on line 46

If I print the decl I can see that there is no property declarations

{
    "flags": 33554436,
    "escapedName": "unknown",
    "checkFlags": 0,
    "type": {
        "checker": {},
        "flags": 1,
        "id": 4,
        "intrinsicName": "error",
        "objectFlags": 0
    }
}

Instead of failing with the property access, it would be nice to have an error, that it could not resolve the package.

The error occurred because it could not find the BreakpointObserver in the constructor. But it should error earlier on it cannot resolve the import if the package cannot be found.

  constructor(
    private _elementRef: ElementRef,
    private _breakpointObserver: BreakpointObserver,
  ) {...}

🌍 Your Environment

@angular/compiler-cli

"version": "10.0.14"

[JoostK]

We're typically quite meticulous when it comes to checking for the existence of declarations, this one appears to have slipped (for the record, it was me a couple weeks ago 😄).

Anyway, the situation you experienced the issue with would not normally crash the compilation when using ngc, as ngc halts the compilation when there's TypeScript semantic errors. I noticed however that you're using Bazel which seems to request Angular semantic diagnostics regardless of semantic TS errors, therefore resulting in a hard crash at the point you identified. Fix in #38684.

[lukasholzer]

Hey awesome how fast this is being tackled! 👍 Yeah, using the wrapped tsc with bazel. I really love the strict dependency checks so that was the last point I thought that it is a missing dep that caused the problem. But was actual fun to find the bug :D

[s4m0r4m4]

I just ran into this same problem (in type_to_value.js), but am not using bazel. Let me dig up more details and see if I can reproduce

[s4m0r4m4]

The problem has sporadically appeared for me today. One thing I noticed is that if I rename a service file to an unorthodox extension (say, 'my.service.ts' --> 'my.messages.ts'), it sometimes throws this error. I'm also exporting the typeof MyService and using it as an interface for other types to inherit, not sure how legit that is. Sorry I couldn't provide more info!

[s4m0r4m4]

I'm hitting the error again, but I don't quite understand the cause. The value of decl right before the error is:

SymbolObject {
  flags: 33554436,
  escapedName: 'unknown',
  checkFlags: 0,
  type: TypeObject {
    checker: {
      getNodeCount: [Function: getNodeCount],
      getIdentifierCount: [Function: getIdentifierCount],
      getSymbolCount: [Function: getSymbolCount],
      getTypeCount: [Function: getTypeCount],
      getInstantiationCount: [Function: getInstantiationCount],
      getRelationCacheSizes: [Function: getRelationCacheSizes],
      isUndefinedSymbol: [Function: isUndefinedSymbol],
      isArgumentsSymbol: [Function: isArgumentsSymbol],
      isUnknownSymbol: [Function: isUnknownSymbol],
      getMergedSymbol: [Function: getMergedSymbol],
      getDiagnostics: [Function: getDiagnostics],
      getGlobalDiagnostics: [Function: getGlobalDiagnostics],
      getTypeOfSymbolAtLocation: [Function: getTypeOfSymbolAtLocation],
.... many more properties ....
      getTypeArgumentConstraint: [Function: getTypeArgumentConstraint],
      getSuggestionDiagnostics: [Function: getSuggestionDiagnostics],
      runWithCancellationToken: [Function: runWithCancellationToken],
      getLocalTypeParametersOfClassOrInterfaceOrTypeAlias: [Function: getLocalTypeParametersOfClassOrInterfaceOrTypeAlias],
      isDeclarationVisible: [Function: isDeclarationVisible]
    },
    flags: 1,
    id: 4,
    intrinsicName: 'error',
    objectFlags: 0
  }
}

and I just get the same error "ERROR in Cannot read property '0' of undefined". It sounds like there is something wrong with my code, specifically with an import statement. Is there any good way for me to further debug this?

[JoostK]

@s4m0r4m4 Can you update to 10.1.1, which was released yesterday?

[s4m0r4m4]

Hi @JoostK, I upgraded to 10.1.1 and did a rebuild. It spit out a lovely error message that described the issue (I was importing "path" in an angular application running in electron, and it was causing some issues). From there I was able to debug and fix the issue, thank you for your quick response!

[JoostK]

@s4m0r4m4 Excellent, I was hoping that would be the case.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}