Angular 2.0.0 Metadata_resolver weird behavior

Question

I'm migrating my app from angular2 RC5 with angular-webpack scaffolding to angular 2 2.0.0 with angular cli beta 14.

I'm fighting with those errors:

Uncaught Error: Can't resolve all parameters for PublicInfoDao: (?, ?).CompileMetadataResolver.getDependenciesMetadata @ metadata_resolver.js:508CompileMetadataResolver.getTypeMetadata @ metadata_resolver.js:405(anonymous function) @ metadata_resolver.js:552CompileMetadataResolver.getProvidersMetadata @ metadata_resolver.js:532CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:285RuntimeCompiler._compileComponents @ runtime_compiler.js:126RuntimeCompiler._compileModuleAndComponents @ runtime_compiler.js:64RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:55PlatformRef_._bootstrapModuleWithZone @ application_ref.js:303PlatformRef_.bootstrapModule @ application_ref.js:285(anonymous function) @ main.ts:13__webpack_require__ @ bootstrap db3609d…:52(anonymous function) @ .*$:7__webpack_require__ @ bootstrap db3609d…:52webpackJsonpCallback @ bootstrap db3609d…:23(anonymous function) @ main.bundle.js:1

and

metadata_resolver.js:278Uncaught Error: Unexpected value 'AppComponent' declared by the module 'AppModule'(anonymous function) @ metadata_resolver.js:278CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:265RuntimeCompiler._compileComponents @ runtime_compiler.js:126RuntimeCompiler._compileModuleAndComponents @ runtime_compiler.js:64RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:55PlatformRef_._bootstrapModuleWithZone @ application_ref.js:303PlatformRef_.bootstrapModule @ application_ref.js:285(anonymous function) @ main.ts:13__webpack_require__ @ bootstrap db3609d…:52(anonymous function) @ .*$:7__webpack_require__ @ bootstrap db3609d…:52webpackJsonpCallback @ bootstrap db3609d…:23(anonymous function) @ main.bundle.js:1 1: https://github.com/preboot/angular2-webpack

It's a weird behavior cause if I remove several components the app works. But if I add a simplecomponent like:

@Component({
  selector: 'tl-result-item',
  templateUrl: "./resultitem.component.html",
  styleUrls: ["./resultitem.component.scss"]
})
export class ResultItemComponent {

  @Input()
  result:Result;

  constructor(){}
}

The second error is thrown. If I comment @Input() the app works. There are some services if I uncomment the app throws same error and If I comment some lines the error disapears.

I'm going crazy with those errors. I'm thinking it should be an external issue.

Any idea?

Update:

The first error could be related to https://github.com/AngularClass/angular2-webpack-starter#frequently-asked-questions (second question) I have several problem to migrate to angular 2.0.0 final.

Update2:

@NgModule({
  providers: [
    MetaService,
    Title,
    HttpInterceptor,
    {provide: ConnectionBackend, useClass: XHRBackend},
    {provide: Http, useExisting: HttpInterceptor},
    {provide: Configuration, useClass: ConfigurationDevelopment}
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    // APP_ROUTER_PROVIDERS
  ],
  declarations: [
    AppComponent,
    ResultItemComponent,

    TimestampToMomentPipe,
    TimestampToTimePipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Update3: Another example of code that fails in angular cli.

This code works properly:

this.publicService.all().subcribe(response => {
      console.log(response);
});

This code fails:

this.publicService.all().subcribe(response => {
      deserialize(response)
});

Exception explained above:

Uncaught Error: Can't resolve all parameters for PublicInfoDao: (?, ?).

¿¿??

No, but I can verify the problem is related with angular-cli. I'm using the old scaffold and angular 2.0.0 works fine. So what happens with angular-cli? — Serginho
Here you are, what do you think about? I want to know any idea you have. — Serginho
i thought that you import wrong something to app.module.But Everything is clear.Maybe you can import providers wrongly.You can create called environment file for importing providers.github.com/AngularClass/angular2-webpack-starter/blob/master/… — Yasemin çidem

Yasemin çidem Yasemin çidem · Accepted Answer · 2016-09-23T11:57:36

environment.ts

// Angular 2
// rc2 workaround
import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
import { enableProdMode, ApplicationRef } from '@angular/core';
// Environment Providers
let PROVIDERS: any[] = [
  // common env directives
];

// Angular debug tools in the dev console
// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
let _decorateModuleRef = function identity<T>(value: T): T { return value; };

if ('production' === ENV) {
  // Production
  disableDebugTools();
  enableProdMode();

  PROVIDERS = [
    ...PROVIDERS,
    // custom providers in production
  ];

} else {

  _decorateModuleRef = (modRef: any) => {
    const appRef = modRef.injector.get(ApplicationRef);
    const cmpRef = appRef.components[0];

    let _ng = (<any>window).ng;
    enableDebugTools(cmpRef);
    (<any>window).ng.probe = _ng.probe;
    (<any>window).ng.coreTokens = _ng.coreTokens;
    return modRef;
  };

  // Development
  PROVIDERS = [
    ...PROVIDERS,
    // custom providers in development
  ];

}

export const decorateModuleRef = _decorateModuleRef;

export const ENV_PROVIDERS = [
  ...PROVIDERS
];

app.module.ts

@NgModule({
  providers: [
 // expose our Services and Providers into Angular"s dependency injection
        ENV_PROVIDERS
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    // APP_ROUTER_PROVIDERS
  ],
  declarations: [
    AppComponent,
    ResultItemComponent,

    TimestampToMomentPipe,
    TimestampToTimePipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Angular 2.0.0 Metadata_resolver weird behavior

2 Answers