Typing Injected Dialog Data causes compile error with aot

What is the expected behavior?

Compiles successfully

What is the current behavior?

Metadata collected contains an error that will be reported at runtime: Expression form not supported.

What are the steps to reproduce?

Create a dialog component that receives data from the caller. Typing the data will result in an error.

@Inject(MAT_DIALOG_DATA) public data: {user: User};

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/common": "^7.0.0", "@angular/core": "^7.0.0", "@angular/material": "^7.3.7", "@angular/cdk": "^7.3.7",

Is there anything else we should know?

Workaround is to remove the typing or add a // @dynamic about the component decorator.

[VororRich]

Skip the injection and set your data manually via the reference component instance (before subscribing). You could even wrap the whole thing with a static helper.

export class EditUserComponent implements OnInit {
  static open(dialog: MatDialog, data: DialogData) {
    let dialogRef = dialog.open(EditUserComponent, {disableClose: true});
    dialogRef.componentInstance.data = data;
    return dialogRef.afterClosed();
  }

  data: DialogData;

  constructor(
    private matDialogRef: MatDialogRef<EditUserComponent>,
    private matDialog: MatDialog
  ) {
  }
}

then call from your component…

  EditUserComponent.open(this.dialog, <dialog data>).subscribe(
    (result) => <do something>,
    (error) => <do something else>
  );

[puku0x]

I’m facing a similar issue not only AOT but also JIT.

Angular CLI: 8.0.4
Node: 10.15.1
OS: darwin x64
Angular: 8.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.4
@angular-devkit/build-angular     0.800.4
@angular-devkit/build-optimizer   0.800.4
@angular-devkit/build-webpack     0.800.4
@angular-devkit/core              8.0.4
@angular-devkit/schematics        8.0.4
@angular/cdk                      8.0.1
@angular/cli                      8.0.4
@angular/material                 8.0.1
@ngtools/webpack                  8.0.4
@schematics/angular               8.0.4
@schematics/update                0.800.4
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

interface DialogData {
  id: string;
}

@Component({
  selector: 'app-todo-delete-dialog',
  templateUrl: './todo-delete-dialog.component.html',
  styleUrls: ['./todo-delete-dialog.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TodoDeleteDialogComponent {
  constructor(
    @Inject(MAT_DIALOG_DATA) private data: DialogData
  ) {}
}

core.js:7187 ERROR Error: Uncaught (in promise): ReferenceError: DialogData is not defined
ReferenceError: DialogData is not defined
    at push../src/app/todo/containers/todo-delete-dialog/todo-delete-dialog.component.ts.TodoDeleteDialogComponent.ctorParameters (todo-delete-dialog.component.ts:22)
    at ReflectionCapabilities._ownParameters (core.js:757)
    at ReflectionCapabilities.parameters (core.js:782)
    at JitReflector.parameters (platform-browser-dynamic.js:48)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:19929)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:19882)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:19511)
    at CompileMetadataResolver._getEntryComponentMetadata (compiler.js:20081)
    at compiler.js:19738
    at Array.map (<anonymous>)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:30885)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)