angular: AoT error with interface in type of @Component's constructor parameters

Iā€™m submitting a ā€¦ (check one with ā€œxā€)

[x] bug report

Current behavior

Compiling with --prod of the example below gives me something like this:

$ ng serve --prod
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION USE!
****************************************************************************************
** NG Live Development Server is running on http://localhost:4200 **
 10% building modules 3/3 modules 0 activeFailed on type {"filePath":"/home/vnoel/Linagora/Petals/dev/git/bug/src/app/app.component.ts","name":"BugComponent","members":[]} with error Error: Error encountered resolving symbol values statically. Expression form not supported (position 20:18 in the original .ts file), resolving symbol BugComponent in /home/vnoel/Linagora/Petals/dev/git/bug/src/app/app.component.ts
Hash: 0963bfd57394d0f63877                                                               
Time: 8008ms
chunk    {0} polyfills.3378afd5b9dc00772216.bundle.js (polyfills) 157 kB {4} [initial] [rendered]
chunk    {1} main.c888f1991d9ebf9e24f9.bundle.js (main) 680 bytes {3} [initial] [rendered]
chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.6b1b7c43943b5a5fe6d7.bundle.js (vendor) 1.12 MB [initial] [rendered]
chunk    {4} inline.f5af5e469e05aa49837b.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Expression form not supported (position 20:18 in the original .ts file), resolving symbol BugComponent in /home/vnoel/Linagora/Petals/dev/git/bug/src/app/app.component.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/vnoel/Linagora/Petals/dev/git/bug/src'
 @ ./src/main.ts 4:0-74
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

Expected behavior

No error šŸ˜ƒ

Minimal reproduction of the problem with instructions To reproduce:

$ mkdir bug
$ cd bug
$ ng new
$ cat << EOF | git apply
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ff63e05..ddbf7a1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';

 @Component({
   selector: 'app-root',
@@ -8,3 +8,15 @@ import { Component } from '@angular/core';
 export class AppComponent {
   title = 'app works!';
 }
+
+export interface IInterface { }
+
+@Component({
+  selector: 'app-component',
+  template: '<div></div>'
+})
+export class BugComponent {
+  constructor(
+    public data: { prop: IInterface }
+    ) { }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 67ae491..d43010b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,11 +3,12 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';

-import { AppComponent } from './app.component';
+import { AppComponent, BugComponent } from './app.component';

 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    BugComponent
   ],
   imports: [
     BrowserModule,
EOF
$ ng serve --prod
  • Angular version: 4.0.0-rc.6 / cli 1.0.0-rc.4

  • Language: TypeScript

  • Node (for AoT issues): node --version = v6.10.0

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 17 (14 by maintainers)

Commits related to this issue

Most upvoted comments

I have an same issue with firebase injection

import {AngularFire, FirebaseApp} from 'angularfire2';
@Injectable()
export class LoggerService {
  constructor(@Inject(FirebaseApp) firebaseApp: firebase.app.App) {
    this.storage_ref = firebaseApp.storage().ref();

This code is used for firebase function which is not suported by Angularfire2. ie: FirebaseStorage. Is there also work around way for it?