Injectable services are not injected by Dependency Injection

[rickgoemans]

I've recently started making a Word Office Add-in based on Angular.

I have 2 years of experience in Angular but I'm facing a problem with singleton injectable services. I'm trying to make a singleton service for configuration variables.

Error:

This is the error I keep getting: Error: Can't resolve all parameters for AppComponent: (?).

Service:

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

@Injectable()
export class ConfigurationService {
    constructor() {
        console.log('Configuration service created');
    }
}

AppModule:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import AppComponent from "./app.component";
import { ConfigurationService } from './configuration/configuration.service';

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

AppComponent:

import { Component } from "@angular/core";
import { ConfigurationService } from './configuration/configuration.service';

const template = require("./app.component.html");
/* global require, Word */

@Component({
  selector: "app-home",
  template,
})
export default class AppComponent {
  constructor(
      protected configurationService: ConfigurationService,
  ) {
    //
  }
}

Options I tried:

I tried adding it to AppComponent's providers (and therefore creating a new instance instead using the singleton for that class) but that also doesn't solve the problem.

Help:

Does anybody else have this problem? Is it possible to use injectables services at all in a angular office add-in?

[rickgoemans]

Configuration:

OS: Mac OS Catalina 10.15.2 Hardware: Macbook Pro Touchbar 2017 15" Office: 365 English

Project is created through yo office -> Office Add-in Task pane project using Angular framework -> Typescript -> <My Project name> -> Word

[cro13]

+1, it seems not even basic Angular services such as Http are injectable

[cro13]

I forgot to update this but you can use injectable services like this: constructor(@Inject(HttpClient) private http: HttpClient) { }

[rickgoemans]

I forgot to update this but you can use injectable services like this: constructor(@Inject(HttpClient) private http: HttpClient) { }

This is not the default for Angular as far as I know, does this still make the Injectable object a singleton?

[cro13]

It's kind of the old way of injecting services in Angular. This is caused by the babel plugin used by webpack as it doesn't emit the metadata decorator @Injectable

[Alex-Willenbrink]

@cro13 You're my hero!

[Anthony-Breneliere]

I forgot to update this but you can use injectable services like this: constructor(@Inject(HttpClient) private http: HttpClient) { }

This is not the default for Angular as far as I know, does this still make the Injectable object a singleton?

That issue should not have been closed on that solution.

Adding @Inject(...) in all constructors of all @Injectable() classes is not default Angular.

In my case it does not help because I use some Angular libraries that are shared with other apps and are not developped in the purpose of an Office add-in.