使用 AlarmService 在 Angular 6 TypeScript 中引发不同的错误

Question

我在解决此错误时遇到了一些问题。当我添加警报服务时，我总是收到此错误。

当我在谷歌检查这个错误时，每个人都说，我必须在提供程序中添加这个，如果我添加提供程序也不起作用，我得到一个不同的错误

import { Component, Input } from '@angular/core';
import { Client, BasicAuth, AlarmService } from '@c8y/client';
import { CumulocityService } from './c8y.service';
import {
  Router
} from '@angular/router';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  @Input() name: string;
  model = {
    user: '',
    password: '',
    tenant: ''
  };
  error = {
    shown: false,
    msg: ''
  };
  disabled = false;
  basicAuth: string = 'https://tempar.adamos.com'
  currentUser: object = {};
  constructor(
    private cumulocity: CumulocityService,
    private alarmService: AlarmService,
    private route: Router
  ) { }

  async login() {
    this.disabled = true;
    const client = new Client(new BasicAuth(
      {
        user: this.model.user,
        password: this.model.password,
        tenant: this.model.tenant
      }),
      this.basicAuth
    );

    sessionStorage.setItem("client", JSON.stringify(client));

    client.inventory.list$().subscribe((data) => {
      // request all inventory data via fetch and adds realtime if data changes
      console.log(data);
    });
    try {
      let user = await client.user.current();
      debugger;
      this.cumulocity.client = client;
      console.log(user.data);
      const alarmId: number = 63704;
      const { data, res } = await this.alarmService.detail(alarmId);

      console.log(data, res);

      //  this.route.navigate(['/dashboard']);
    } catch (ex) {
      this.cumulocity.client = null;
      this.error.shown = true;
      this.error.msg = ex.message;
    } finally {
      this.disabled = false;
    }
  }
}



core.js:1673 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[LoginComponent -> AlarmService]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AlarmService]: 
    NullInjectorError: No provider for AlarmService!
Error: StaticInjectorError(AppModule)[LoginComponent -> AlarmService]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AlarmService]: 
    NullInjectorError: No provider for AlarmService!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveNgModuleDep (core.js:8376)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9064)
    at resolveDep (core.js:9429)
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveNgModuleDep (core.js:8376)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9064)
    at resolveDep (core.js:9429)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3815)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

如果我在 app.module.ts 中添加 Alarmservice，我会得到一个不同的错误，如上所述

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule }     from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CumulocityService } from './login/c8y.service';
import {  AlarmService } from '@c8y/client';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [ AlarmService, CumulocityService],
  bootstrap: [AppComponent]
})
export class AppModule { }

错误

Uncaught Error: Can't resolve all parameters for AlarmService: (?, ?).
        at syntaxError (compiler.js:1016)
        at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:10917)
        at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:10810)
        at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:11032)
        at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata (compiler.js:11041)
        at compiler.js:10979
        at Array.forEach (<anonymous>)
        at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (compiler.js:10939)
        at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10658)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23858)

Answer 1

你见过stackblitz 的例子吗？我猜你有，因为它看起来像那里的代码。

目前您无法将服务直接注入 Angular。您可以在客户端周围编写一个包装器（就像在示例中所做的那样）

所以要让你的代码正常工作：

1. 删除 AlarmService 导入
2. 通过this.client.alarm.detail(alarmId); 而不是AlarmService 请求警报。

this.client.alarm 的类型为 AlarmService，并使用您通过 new Client(new BasicAuth([...])); 设置的登录名。

以后你可以使用@c8y/ngx-data进行适当的依赖注入，但它并没有稳定发布，因此我不建议使用它。