Angular: 未捕获的错误:无法解析...的所有参数

创建于 2017-09-26  ·  46评论  ·  资料来源: angular/angular

我要提交...


[x] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->

当前行为

在浏览器控制台中出现错误:“未捕获的错误:无法解析 ApiService 的所有参数”
注意:我猜 ApiService 是我的 Service 的名称。

预期行为

应该在我的服务中,在开发模式和生产模式中注入 HttpClient

使用说明最小化问题的重现

大家好..我已经完成了一个小型的 angular-cli 项目。 我创建了 3 个可以获取数据的服务。 一个服务称为“FakeService”,因为它将提供硬编码数据...另一个服务称为“TestService”,它在其构造函数中注入了另一个服务(ApiService)。 ApiService 将使用 HttpClient 从服务器获取数据。

但是当我使用 FakeService(在开发模式下)时,我收到了描述的错误消息

这是我的 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { environment } from './../environments/environment';

import { AppComponent } from './app.component';
import { ApiService } from './services/api.service';
import { TestService } from './services/test.service';
import { FakeService } from './services/fake.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    ApiService,
    {
      provide: TestService,
      useClass: environment.production ? TestService : FakeService
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的 api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export class ApiService {
  constructor(private httpClient: HttpClient) {

  }
  get(path: string): Array<any> {
    switch (path) {
      case '/tests':
        // this.httpClient.get(`https://localhost/poneyRacerApi/races`)
        //   .subscribe((response: Array<IRaceModel>) => {
        //     return response;
        //   } );
        return [{name: 'London'}, {name: 'Montréal'}];
    }
    return [];
  }
}

这是我的 fake.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class FakeService {
  constructor() {

  }

  list(): Array<any> {
    return [{name: 'London'}, {name: 'Lyon'}, {name: 'Paris'}, {name: 'Montréal'}];
  }
}

最后,这是我的 test.service.ts

import { Injectable } from '@angular/core';
import { ApiService } from './api.service';

@Injectable()
export class TestService {
  constructor(private apiService: ApiService) {

  }

  list() {
    console.log('Listing races');
    return this.apiService.get('/tests');
  }
}

正如你在 test.service.ts 中看到的,我在构造函数中注入了我的另一个 ApiService。
正如您在 app.module.ts 中看到的那样,我在生产中使用 TestService(例如,在调用ng serve --prod ),而在不生产时使用 FakeService( ng serve )

调用ng serve --prod时没有错误消息。 但是在开发模式下服务时,也就是使用 FakeService 而不是 TestService ( ng serve ) 时,我有以下错误消息

Uncaught Error: Can't resolve all parameters for ApiService: (?).
    at syntaxError (compiler.es5.js:1694)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:15925)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getTypeMetadata (compiler.es5.js:15793)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getInjectableMetadata (compiler.es5.js:15779)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getProviderMetadata (compiler.es5.js:16070)
    at compiler.es5.js:15999
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getProvidersMetadata (compiler.es5.js:15959)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15614)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26958)

如果我在我的 ApiService 中删除构造函数的参数(私有 httpClient:HttpClient),我在开发模式下运行时没有错误问题(所以当它使用 FakeService 时)但我不能使用 httpClient 发出 Http 请求..我已经遵循Angular HttpClient 文档中描述的使用 HttpClient 的说明。

我不知道这是一个真正的角度问题还是我做错了什么..你能帮我解决这个问题吗?

非常感谢您的帮助。

环境


Angular version:4.4.3

Browser:
- [X] Chrome (desktop) version 60.0.3112.113

For Tooling issues:
- Node version: 8.4.0
- Platform:  Windows

Others:
Visual Studio Code 1.16.1
Angular-Cli: 1.4.3

最有用的评论

您的ApiService上缺少@Injectable()注释。 像这样的支持请求应该存在于 StackOverflow 而不是 GitHub 上。

所有46条评论

以防万一您需要查看我的 app.component.ts 的外观

import { Component, OnInit } from '@angular/core';
import { TestService } from './services/test.service';

@Component({
  selector: 'tst-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'tst';
  races: Array<any>;

  constructor(private testService: TestService ) {}

  ngOnInit() {
    this.races = this.testService.list();
  }
}

您的ApiService上缺少@Injectable()注释。 像这样的支持请求应该存在于 StackOverflow 而不是 GitHub 上。

@benelliott谢谢你的提示。 我很抱歉,但我认为这是角度问题。 我在 StackOverflow 和互联网上做了很多研究,但没有找到解决方案。,..所以我认为这是一个角度问题......关闭它。 再次感谢和抱歉

错误:无法解析路由器的所有参数:(?, ?, ?, ?, ?, ?, ?, ?)。

我的 angular4 应用程序测试中出现此错误

我遇到了同样的问题并解决了
就我而言,我错过了 server.service.ts 文件中的@Injectable装饰器

我错过了 Injectable() 前面的 @。
如果您在一个极其简单的场景中遇到错误,而您在网上找不到任何相关信息,那么很可能它太简单/愚蠢而无法记录。 现在自己发现太多次了。

一天后,我意识到我已经删除了一些我认为不需要的
这就是我所缺少的:

 import 'core-js/es7/reflect';

出现此问题的另一种情况似乎是,如果您运行“ng build --watch”,然后执行“ng build --prod=env”,这将导致构建的 DIST 文件损坏并出现错误,例如我的实例是我的数据服务中关于@Injectable 的错误。

所以可能想要停止“ng build --watch”,然后一旦它完全停止,运行“ng build --prod=env”。

对于遇到此问题的人,仅供参考。

在为此挣扎了 1 个小时之后,最后,感谢@odolha ,看来我也删除了 core-js/es7/reflect
再次添加即可解决问题!

非常感谢你们……我刚刚遇到了同样的问题:删除了 core-js/es7/reflect ……所以它对我有很大帮助@odolha , @tanou73

关于添加实际有用的错误消息来检测像 Vue 那样的常见 Angular 陷阱有什么想法吗?

我也有这个错误消息......对我来说解决它的是使用相对路径而不是使用桶从同一个模块导入服务。

@kabb5这不是 Angular 可以帮助的,Angular 可以得到的只是一个undefined值,无法猜测你做了什么。

将应用程序从 angular2 升级到 angular5 时出现此错误。 除了升级 CLI 以及package.json的依赖项和 devDependencies 之外,我还必须将旧的/tsconfig.json/angular-cli.json为新的/tsconfig.jsonsrc/tsconfig.app.jsontsconfig.spec.json/.angular-cli.json ,然后调用

rm -rf node_modules/
npm i 

@odolha这也是我的问题。 很高兴你度过了这一天而不是我(只花了大约 20 分钟才找到你的帖子)

我删除了 polyfill 的原因是因为在polyfill.ts关于该 polyfill 的注释说:
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.

所以,我正在为我的 aot 部署做一些优化并摆脱它......完全忘记了本地开发(使用 ng-serve)仍在使用 JIT :(

那么,谢谢楼主...

甚至我在服务时也遇到了这个问题。 对我来说,在 polyfill.ts 中添加回 ES7/reflect polyfill 解决了这个问题。 我错误地删除了它们。

为了记录,我刚刚在这个错误上损失了一整天......😭

main.tspolyfills _必须绝对_首先加载。 查看

import './polyfills.ts';

是你的第一行。

好的,所以我终于解码了错误。
请注意,如果任何组件中存在任何未知的 import 语句,整个 angular 应用程序都会崩溃,因此请记下它。
经过深思熟虑,我解决了这个错误。
希望能帮助到你
卡耶坦·罗德里格斯

循环依赖(文件之间导出的辅助结构)也可能发生。

谢谢大家,我遇到了同样的问题:我在添加它后删除了 core-js/es7/reflect 再次工作:)

我终于也发现了我的案例出了什么问题。
鉴于错误: Can't resolve all parameters for PageApiService in .../services/pageService.ts: ([object Object], ?)

看起来它实际上是在告诉我问号所在的地方有问题。 就我而言,我在 url 中有 HttpClient 和一个字符串。 希望最终在提供者中使用它并提供该字符串。 但看起来这不再被允许了?

我的服务是:

@Injectable()
export class PageApiService<T> {
    private baseUrl: string;

    constructor(private http: HttpClient, private url: string) {
        this.baseUrl = window.location.protocol + '//' + window.location.host + "/api/";
    }

在像这样的模块内部使用:

    providers: [{
        provide: 'ContactPlanPageService', useFactory: http => new PageApiService<ContactPlanModel>(http, 'contactplan/page'),
        deps: [HttpClient]
    }],

虽然它确实有效......但它现在确实给了我一个警告,它会在以后的版本中出现错误......

我在polyfill.ts 中导入了

Uncaught Error: Can't resolve all parameters for ApplicationModule: (?).
    at syntaxError (main.bundle.js:7977)
    at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (main.bundle.js:17878)
    at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (main.bundle.js:17771)
    at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (main.bundle.js:17639)
    at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (main.bundle.js:17449)
    at main.bundle.js:17563
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (main.bundle.js:17551)
    at CompileMetadataResolver../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (main.bundle.js:17449)
    at main.bundle.js:17536

@dongdongmao我在以下情况下多次遇到此问题:
1.) 忘记在服务中使用@Injectable() 并且
2.) 当我的一些角度服务、模块等导出为export default const foo = 123而不是export const foo = 123 。 这里的关键点不是使用default作为导出。

@SerkanSipahi实际上我在每个服务中都使用@Injectable()并且从不在任何服务或模块中export default ......

如果我使用ng serve我的项目可以工作,但如果我使用webpack-dev-server和我的webpack.config ,这个错误无法解析 ApplicationModule 的所有参数:(?)。 会发生

当您的组件扩展另一个组件而您忘记在构造函数中调用super() ,也会发生这种情况。

当您的组件扩展另一个组件而您忘记在构造函数中调用super() ,也会发生这种情况。

对我来说就是这种情况,扩展了一个类并且根本没有定义constructor 。 谢谢!

通过构造函数提供错误数据发生在我身上。
constructor(private actions$: Actions, private store: MyStore) {}
代替
constructor(private actions$: Actions) {}

我遇到了同样的错误,我可以通过重新排列 app.module.ts 来解决它,以便依赖项按照它们的导入顺序排列。 一个服务导入了另一个在 app.module.ts 中定义的服务,显然这就是问题所在。 神奇地解决了!

一天后,我意识到我已经删除了一些我认为不需要的
这就是我所缺少的:

 import 'core-js/es7/reflect';

我们在自定义 Webpack 配置中运行 Angular 2,没有 CLI。 在仔细升级到 Babel 7 后,我们发现了这个问题,它让我们难住了。 几天后,问题通过导入 polyfill 解决了😄

我认为错误消息应该尝试更具体地针对未解析的参数

我今天也得到了这个,因为我忘记为派生类添加构造函数。 对 AOT 很满意,但不能即时编译。

我本来希望 AOT 编译器能够捕捉到这一点。

如果您有一个 index.ts 来导出您的服务,请检查导出的顺序。 这对我有帮助。

我在浏览器控制台中收到此错误:“_Can't resolve all parameters for OrdineComponent: (?)._”
然后在 Vs 代码终端中打开:“检测到循环依赖项中的 _WARNING:
src\app\ordini\ordini.component.ts -> src\app\shared\ordini.service.ts -> src\app\ordini\ordini.component.ts_"

谁能帮我? 我在这个存储库上拥有一切
https://github.com/SDGItalySrl/Burger2Trip

src\app\ordini\ordini.component.ts -> src\app\shared\ordini.service.ts -> src\app\ordini\ordini.component.t

很明显,您正在尝试在服务中的 ordine 组件和 ordine 组件中注入 ordine 服务。 这是不可能的。 实例化您需要该服务的组件并实例化您需要该组件的服务。 请阅读依赖注入模式。

我在尝试注入接口时遇到了这个问题,认为它是一个类 -> 确保您的组件级变量是在构造函数注入之外声明的。

在我的情况下,这个问题只出现在
ng build --prod

它在以下代码中:

import RestDataSource from './rest.datasource';
反而 -
import {RestDataSource} from './rest.datasource';

也许它可以帮助某人

这条消息似乎有很多原因。 就我而言,这是因为我试图从库中注入服务类,但这些类没有@Injectable()注释,因为它们旨在扩展(即使不添加任何行为)并且不是要么抽象​​。

就我而言,我只是在构造函数中注入 Router 服务而不使用它。 删除后,一切正常。

在我的情况下,这个问题只出现
ng build --prod

它在以下代码中:

import RestDataSource from './rest.datasource';
相反 -
import {RestDataSource} from './rest.datasource';

也许它可以帮助一些人

Hahaha.I also encountered this situation.

当您有循环依赖(例如,因为您以错误的方式使用桶导入)时,也可能发生此错误。

这可能特别令人困惑,因为依赖注入可以在其他类中工作,但不能在具有循环依赖的类中工作。

通过向组件中的服务添加注入指令解决了问题
构造函数(@Inject(AppService)服务:AppService)

我有一个稍微不同的问题,所以我会把它放在这里以防其他人遇到它。

我最近启动了一个 v8 项目,在为 prod https://github.com/angular/angular-cli/issues/13734编译时遇到了高内存问题

TL;DR:如果您从 NG8 项目恢复到 NG7。

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

在我的情况下,当组件文件导出多个对象类型时,问题已经发生,例如:

'my-test.component.ts

导出枚举 MyTestEnum {
...
}

@组件(...)
公开类 MyTestComponent {
...
}

对我来说,我是默认导出的。

image

由于不活动,此问题已被自动锁定。
如果您遇到类似或相关的问题,请提交新问题。

阅读有关我们的自动对话锁定政策的更多信息。

_此操作已由机器人自动执行。_

此页面是否有帮助?
0 / 5 - 0 等级