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

🐞 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?

[alan-agius4]

@JoostK, maybe knows if we can do something around 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.