Angular 6-无法解析AppComponent的所有参数

时间:2018-06-21 10:04:31

标签: angular typescript dependency-injection angular6 ngx-translate

我正在尝试使用Angular 6构建应用程序,但仍在设置所有内容。但是似乎我的应用程序中的依赖项注入有问题。

它无法解析任何构造函数参数。它们全都产生Uncaught Error: Can't resolve all parameters for AppComponent: (?).。即使是自定义服务也会导致相同的错误。

版本 (省略了对此没有任何影响的依赖项)

 "dependencies": {
    "@angular/common": "6.0.5",
    "@angular/compiler": "6.0.5",
    "@angular/core": "6.0.5",
    "@angular/forms": "6.0.5",
    "@angular/http": "6.0.5",
    "@angular/platform-browser": "6.0.5",
    "@angular/platform-browser-dynamic": "6.0.5",
    "@angular/router": "6.0.5",
    "core-js": "2.5.7",
    "reflect-metadata": "0.1.12",
    "rxjs": "6.2.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "6.0.5",
    "@ngtools/webpack": "6.0.8",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "5.1.0",
    "typescript": "2.7.2",
    "webpack": "4.12.0",
    "webpack-cli": "3.0.8",
    "webpack-dev-server": "3.1.4",
  }

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

TestService.ts

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

@Injectable({
  providedIn: 'root'
})
export class TestService {

  constructor() {
    console.warn("It works!");
  }

  public sayHello(): string {
    return "hello world!";
  }
}

App.component.ts

import {Component} from '@angular/core';
import {TestService} from "./TestService";

@Component({
  selector: 'sh-home',
  styleUrls: ['./home.scss'],
  templateUrl: './home.html'
})
export class HomeComponent {

  constructor(testService: TestService) {
    testService.sayHello();
  }
}

在这种情况下,注入TestService会导致错误


Main.ts

import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app/app.module';
import './assets/scss/styles.global.scss'; // Import the global scss files

// Polyfills
import './Polyfills';

if (process.env.NODE_ENV === 'production') {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Polyfills.ts

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

我没有使用CLI,而是一个自定义的启动程序。我包括了与Angular-CLI相同的所有polyfill,所以我没有任何遗漏。

有人看到我在做什么错吗?


更新

我简化了测试用例,并注意到它不是翻译模块。即使创建简单的服务,也无法使用依赖项注入。将服务添加到providers列表中也不起作用(也没有必要,因为我使用的是Angular 6'provideIn: root')。

10 个答案:

答案 0 :(得分:17)

确保在polyfill中进行以下导入
导入'core-js / es7 / reflect';

答案 1 :(得分:4)

我通过重新启动应用程序解决了此错误。再次构建并运行它,对我来说很好。请检查并告诉我。

谢谢:)

答案 2 :(得分:1)

@Inject帮了我大忙

import {Component, Inject} from '@angular/core';
import {TestService} from "./TestService";

@Component({
  selector: 'sh-home',
  styleUrls: ['./home.scss'],
  templateUrl: './home.html'
})
export class HomeComponent {

  constructor(@Inject(TestService) testService: TestService) {
    testService.sayHello();
  }
}

答案 3 :(得分:1)

GET /或编译器错误can't resolve all parameters for ApplicationModule: (?).

只需遵循以下简单步骤:

  1. 安装core-js模式。

npm i core-js

  1. polyfills.ts文件中,添加导入语句

import 'core-js/es7/reflect';

  1. main.ts文件中添加导入语句

import 'core-js/es6/reflect';

import 'core-js/es7/reflect';

答案 4 :(得分:0)

您可以尝试进行以下更改:

import {Component} from '@angular/core';
import {TestService} from "./TestService";

@Component({
  selector: 'sh-home',
  styleUrls: ['./home.scss'],
  templateUrl: './home.html',
  viewProviders: [TestService]
})
export class HomeComponent {
   constructor(private testService: TestService) {
     this.testService.sayHello();
   }
}

viewProviders 创建一个特殊的注入器,该注入器仅解决此组件的依赖关系。

答案 5 :(得分:0)

我在Angular 8应用中收到了相同的错误

  

无法解析AppComponent的所有参数:(?,?,?)

在builder()中更改1个参数类型后。

我通过停止并重新启动应用程序解决了该问题。

答案 6 :(得分:0)

我也遇到了这个问题,但是在tsconfig中设置 emitDecoratorMetadata“:true 解决了该问题。请记住重新启动服务器。

tsconfig.spec.json

“ compilerOptions”:{     “ emitDecoratorMetadata”:是的,      “ outDir”:“ ./out-tsc/spec”,

答案 7 :(得分:0)

我在Angular 8中遇到了与组件相同的问题。构造函数将多个服务作为参数。

例如

constructor(
  private router: Router,
  private fooService: FooService,
  private barService: BarService,
  private fubarService: FoobarService,
  private anotherService: AnotherService)
{}

使用@Inject()进行实验,某些参数可以使用它,而其他参数则不能。他们会抱怨参数类型。

FooService, BarService and FubarService的共同之处在于它们实际上位于同一目录中。我创建了一些子目录,并在每个子目录中放置了一项服务-编译器错误消失了。

A blog postforwardRef为他们工作。它对我没有用。但是,他们的文章提供了有关可能发生的情况的见解。

编辑后添加:

在另外两种情况下,上述方法无效。在一种情况下,将服务的导入从完整路径(src/app/...)更改为相对路径可以消除编译器投诉(参见图)。在第二种情况下,添加@Inject(ServiceName) public service: ServiceName解决了该问题。

在上述所有情况下,使用Angular的Ionic 5项目都没有编译投诉。 Ionic项目正在使用Angular 8.2.14。 Angular项目使用的是8.2.0(创建项目时各个CLI的默认设置)。

好像有些虫子潜伏在某处...

答案 8 :(得分:0)

我也遇到了Angular 8.2.13 + Typescript的相同问题。最后,诀窍是使用@Inject('RefOnlyUsedForTesting'),即使类型为string

export abstract class MyBaseClass {
  ....
  constructor(@Inject(ElementRef) elementRef: ElementRef,
          @Optional() @Inject('RefOnlyUsedForTesting') dep1: MyObject,
          @Optional() @Inject('RefOnlyUsedForTesting') dep2: string,
          @Optional() @Inject('RefOnlyUsedForTesting') dep3: string) {
  super();    
  ...
 }
}

答案 9 :(得分:0)

如果您正在使用webpack和babel构建Angular,则可能您缺少此babel插件: babel-plugin-transform-typescript-metadata