Using AlarmService Throws different Errors in angular 6 TypeScript

Question

I'm having some problem in resolving this error. When i add the Alarmservice i always get this error.

When i checked this error in google, every one say, i have to add this in provider, If i add in provider also it is not working and i get a different error

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)

If i add Alarmservice at the app.module.ts I get a different error, as said above

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 { }

ERROR

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)

Could any one please help us out, We are struck with this issue — PCA, Aug 28 '18 at 07:10

score 1 · Answer 1 · answered Aug 28 '18 at 12:07

Have you seen the stackblitz example? I guess you have because it looks like the code from there.

At the moment you cannot inject the services into angular directly. You can just write a wrapper around the client (like done in the example)

So to make your code working:

remove the AlarmService import
Request a alarm via this.client.alarm.detail(alarmId); instead of the AlarmService.

The this.client.alarm is of type AlarmService and uses the login you set via new Client(new BasicAuth([...]));.

In future, you can use @c8y/ngx-data to do proper dependency injection, but it is not released as stable and therefore I would not suggest to use it.

@ Jan Hommes, Thanks for your detailed reply. Today morning i deeply understanding your stakblitz, then i noticed that you have created a service as wrapper, which is only working. And the imported AlarmService is not working. Once again thanks for your time. — PCA, Aug 28 '18 at 12:57

Using AlarmService Throws different Errors in angular 6 TypeScript

1 Answers1