Angular 2.0.0 Metadata_resolver 奇怪的行为

Posted 2023-03-13

【中文标题】Angular 2.0.0 Metadata_resolver 奇怪的行为

【英文标题】：Angular 2.0.0 Metadata_resolver weird behavior

【发布时间】：2017-01-27 14:09:42

【问题描述】：

我正在将我的应用程序从带有 angular-webpack 脚手架的 angular2 RC5 迁移到带有 angular cli beta 14 的 angular 2 2.0.0。

我正在与这些错误作斗争：

未捕获的错误：无法解析 PublicInfoDao 的所有参数：(?, ?).CompileMetadataResolver.getDependenciesMetadata @ metadata_resolver.js:508CompileMetadataResolver.getTypeMetadata @ metadata_resolver.js:405（匿名函数）@ 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（匿名函数）@ main.ts:13__webpack_require__ @ bootstrap db3609d…:52(匿名 函数）@.*$:7__webpack_require__@bootstrap db3609d…:52webpackJsonpCallback @ bootstrap db3609d…:23(匿名 函数）@main.bundle.js:1

和

metadata_resolver.js:278Uncaught 错误：意外值 由模块“AppModule”（匿名函数）声明的“AppComponent” @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（匿名函数）@ main.ts:13__webpack_require__ @ bootstrap db3609d…:52(匿名 函数）@.*$:7__webpack_require__@bootstrap db3609d…:52webpackJsonpCallback @ bootstrap db3609d…:23(匿名 函数）@main.bundle.js:1 1: https://github.com/preboot/angular2-webpack

如果我删除应用程序工作的几个组件，这是一个奇怪的行为。但是如果我添加一个简单的组件，例如：

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

  @Input()
  result:Result;

  constructor()

抛出第二个错误。如果我评论 @Input() 该应用程序有效。 如果我取消注释应用程序会引发相同的错误，并且如果我注释某些行，则错误会消失。

这些错误让我快疯了。我认为这应该是一个外部问题。

有什么想法吗？

更新：

第一个错误可能与https://github.com/AngularClass/angular2-webpack-starter#frequently-asked-questions有关（第二个问题） 我有几个问题要迁移到 angular 2.0.0 final。

更新2：

@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 

更新3： 另一个在 Angular cli 中失败的代码示例。

这段代码可以正常工作：

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

此代码失败：

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

上面解释的异常：

未捕获的错误：无法解析 PublicInfoDao 的所有参数：(?, ?)。

¿¿??

【问题讨论】：

你有重现这个问题的github repo吗？

否，但我可以验证问题与 angular-cli 有关。我正在使用旧的脚手架和 angular 2.0.0 工作正常。那么 angular-cli 会发生什么？

你能分享你的 app.module 文件吗？

你来了，你在想什么？我想知道你有什么想法。

我以为你在 app.module 中导入了错误的东西。但是一切都很清楚。也许你可以错误地导入提供程序。你可以创建调用环境文件来导入提供程序。github.com/AngularClass/angular2-webpack-starter/blob/master/…

【参考方案1】：

环境.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 

【讨论】：

没关系，添加环境很好，但这不是问题的答案。

【参考方案2】：

也许你正在使用这样的出口桶：

export * from 'some-file';
export * from 'another-file';

在这种情况下，您可能会遇到循环依赖，尽管您的源代码本身没有任何循环依赖。

有时是错误信息

无法解析所有参数（一些、事物、？）

表示你有循环依赖。

您可以尝试通过直接指定所需文件来导入组件，而不使用 index.ts-files 中捆绑的 export-barrels

你可能想看看这个问题：

Barrel Import Appears To Break Load Order

---

...您的问题实际上可能与此问题重复 :-)

Angular 2 DI Error - EXCEPTION: Can't resolve all parameters

【讨论】：

问题是......为什么我的代码在 angular-webpack 脚手架上运行 angular 2.0.0，如果我在 angular-cli 上运行它会失败？我一直在我的代码中搜索“export *”：0 个结果。无论如何，感谢您向我解释错误并给我信息。

[wild-guessing:on] 也许这两个过程对待出口和进口的方式不同？我自己已经完全忘记了关于这些新 WebDev-Tools [wild-guessing:off]

的编译时间和运行时间