error TS2722: Cannot invoke an object which is possibly 'undefined'.

[kumaresan-subramani]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

yes.

Description

IN angular 10, below is my ts-config.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictTemplates": true
  }
}

when i try to serve my application i am facing below issue:

    ERROR in src/app/app.component.ts:8:14 - error TS2722: Cannot invoke an object which is possibly 'undefined'.

    8      <button (created)="oncreate($event)" ejs-button>Button</button>

But when i set strict:false it works fine.

🔬 Minimal Reproduction

1. download sample from below link
   strict mode sample.zip
2. Give npm i then ng serve

🔥 Exception or Error

D:\incidents\strict mode sample>ng serve
'wmic.exe' is not recognized as an internal or external command,
operable program or batch file.
(node:17616) ExperimentalWarning: The fs.promises API is experimental
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Compiling @syncfusion/ej2-angular-buttons : es2015 as esm2015
Compiling @syncfusion/ej2-angular-grids : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 2 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 677 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 341 kB [initial] [rendered]
Date: 2020-08-04T10:45:29.294Z - Hash: d04b0cca85382beb066d - Time: 29909ms

ERROR in src/app/app.component.ts:8:14 - error TS2722: Cannot invoke an object which is possibly 'undefined'.

8      <button (created)="oncreate($event)" ejs-button>Button</button>

🌍 Your Environment

"@angular/animations": "~10.0.6",
    "@angular/common": "~10.0.6",
    "@angular/compiler": "~10.0.6",
    "@angular/core": "~10.0.6",
    "@angular/forms": "~10.0.6",
    "@angular/platform-browser": "~10.0.6",
    "@angular/platform-browser-dynamic": "~10.0.6",
"@angular-devkit/build-angular": "~0.1000.5",
    "@angular/cli": "~10.0.5",
    "@angular/compiler-cli": "~10.0.6",

Anything else relevant?

[kumaresan-subramani]

@alan-agius4 , can you suggest on this?

[alan-agius4]

In strict mode stricter type-checking rules are enabled. That being said the error here is not as clear as it should be, even though the error itself if emitted by TypeScript.

In /node_modules/@syncfusion/ej2-base/src/base.d.ts

export interface AngularEventEmitter {
    subscribe?: (generatorOrNext?: any, error?: any, complete?: any) => any;
}

The subscribe is optional and hence it is possibly undefined, as such the error is genuine.

Transferring it to the framework repo.

[kumaresan-subramani]

@alan-agius4 , Thanks for your fast reply.

Can you please tag someone who will check this?

Thanks in advance

[alan-agius4]

@JoostK, maybe knows if we can do something around this.

[alxhub]

Hello @kumaresan-subramani!

I'm going to close this issue as unfortunately this is working as intended.

This error occurs because @syncfusion/ej2-buttons declares the type of its created output as a custom type EmitType<Event> (line 82 here). This EmitType eventually leads, as @alan-agius4 pointed out, to a type with an optional subscribe method.

Angular expects @Outputs to be instances of our EventEmitter type from @angular/core (see docs here). Because the type from @syncfusion/ej2-buttons is not compatible with Angular's type, this error arises. The error is "correct" in principle, although it's a bit vague - when designing the template type-checking functionality, we didn't really consider the case where an @Outputs might have an incorrect type.

I suggest raising this issue with @syncfusion/ej2-buttons, as they need to correct their type. In the meantime, you can likely work around this problem by setting strictOutputEventTypes: false for Angular, which will tell the compiler not to try and infer the type of $event. This should have a follow-on effect of not generating the call to .subscribe() which is failing.

[kumaresan-subramani]

In strict mode stricter type-checking rules are enabled. That being said the error here is not as clear as it should be, even though the error itself if emitted by TypeScript.

In /node_modules/@syncfusion/ej2-base/src/base.d.ts

export interface AngularEventEmitter {
    subscribe?: (generatorOrNext?: any, error?: any, complete?: any) => any;
}

The subscribe is optional and hence it is possibly undefined, as such the error is genuine.

Transferring it to the framework repo.

@alxhub , even after i removed @alan-agius4 mentioned [AngularEventEmitter] from my source still i am facing same issue

In /node_modules/@syncfusion/ej2-base/src/base.d.ts

export interface AngularEventEmitter {
    subscribe?: (generatorOrNext?: any, error?: any, complete?: any) => any;
}
export declare type EmitType<T> = ((arg?: T, ...rest: any[]) => void);

[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.}