пытаясь создать компонент 'settings', который можно использовать глобально для конфигурации var

Question

Я пытаюсь создать компонент «Настройки» для моего приложения, в котором будут храниться глобальные настройки конфигурации.У меня есть компонент, который является контейнером для внесения изменений в них, я смог создать набор значений по умолчанию, и теперь я пытаюсь инициализировать их с помощью службы, которая будет вызываться для заполнения объекта настроек среды выполнения.,Мне здесь не хватает чего-то, что я думаю об этом.Когда я пытаюсь инициализировать объект в сервисе, я получаю сообщение об ошибке, не знаю, что делать.Вот код службы:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { AppSettings } from '../shared/app-settings';
import { APPSETTINGS } from "../shared/defaultSettings";

@Injectable()
export class AppSettingsService {
  getSettings(): Observable<AppSettings> {
    let settings =  APPSETTINGS;
    return Observable.of<AppSettings>(settings);
  }
}

А вот где я пытаюсь использовать их в компоненте настройки контейнера:

export class SettingsContainerComponent implements OnInit {

  @Input()
  defaultSettings: APPSETTINGS;

  themes = [
    { value: 'DEFAULT-THEME', label: 'blue' },
    { value: 'LIGHT-THEME', label: 'light' },
    { value: 'NATURE-THEME', label: 'nature' },
    { value: 'BLACK-THEME', label: 'dark' }
  ];

  @Input()
  title: string;

  constructor(private appSettingsService: AppSettingsService) { }

  ngOnInit() {  
    console.log('settings title, ', this.title);
    console.log('settings: ', this.defaultSettings)
    //this.appSettingsService.getSettings()
      //.subscribe(console.log(defaultSettings),
        //() => null,
        //() => {
          //console.log('settings: ', this.settings);
        //});
    console.log('settings, stickyHeader: ', this.settings.stickyHeader);  
  }

Даже если я закомментировал код подпискиЯ все еще получаю следующую ошибку во время выполнения:

vendor.js:76623 ERROR Error: Uncaught (in promise): Error:     StaticInjectorError(AppModule)[SettingsContainerComponent -> AppSettingsService]: 
  StaticInjectorError(Platform: core)[SettingsContainerComponent ->     AppSettingsService]: 
    NullInjectorError: No provider for AppSettingsService!
Error: StaticInjectorError(AppModule)[SettingsContainerComponent ->     AppSettingsService]: 
  StaticInjectorError(Platform: core)[SettingsContainerComponent ->     AppSettingsService]: 
    NullInjectorError: No provider for AppSettingsService!
    at     NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get     (vendor.js:69804)

Полный проект можно найти по адресу https://github.com/cpeddie/TRACS3.git

Может кто-нибудь указать мне правильный способ сделать это?

Спасибо ....

Answer 1

Чтобы сделать ваш сервис глобально доступным в приложении Angular, либо добавьте providedIn: 'root' к метаданным вашего сервиса:

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

или добавьте этот сервис в массив providers вашего AppModule:

@NgModule({
  providers: [AppSettingsService ]
  ...
})
export class AppModule {}