La estructura de mi aplicación Angular (y partes relevantes) es la siguiente:
aplicación/aplicación.módulo.ts
import { DbService } from './db.service' const APP_CONTAINERS = [ DefaultLayoutComponent, DefaultHeaderComponent, ]; @NgModule({ declarations: [ ...APP_CONTAINERS ], providers: [ DbService ] }) export class AppModule {}app/containers/default-layout.component.ts
import { Component, HostBinding, Inject } from '@angular/core'; import { DbService } from '../../db.service'; import { navItems } from './_nav'; import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) @Component({ selector: 'app-dashboard', templateUrl: './default-layout.component.html' }) export class DefaultLayoutComponent { @HostBinding('class.c-app') cAppClass = true; constructor(private DbService: DbService) {} async ngOnInit() { console.log('working') } }Utilizo este mismo servicio con éxito en otras partes de mi sitio, pero todas tienen archivos module.ts específicos. Seguí el tutorial de Angular para llegar a donde estoy, pero sigo recibiendo errores sin importar cómo intente inyectar este servicio.
También intenté usar @Inject en mi constructor pero recibí el mismo error.
Actualmente recibo el siguiente error en mi consola:
ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(e)[e -> e -> e -> e]: NullInjectorError: No provider for e! NullInjectorError: R3InjectorError(e)[e -> e -> e -> e]: NullInjectorError: No provider for e!Utilizo este mismo servicio con éxito en otras partes de mi sitio, pero todas tienen archivos module.ts específicos.
Por lo tanto, no está claro cómo divide sus módulos. Desde el archivo del módulo, no parece que ese componente esté en el módulo que proporciona el servicio. El servicio tiene que estar en los proveedores del árbol de inyección donde reside el componente. Si ese archivo de módulo es para un módulo diferente, entonces el inyector tiene que saber lo que desea proporcionar para el servicio.
Una solución sería agregarlo en los proveedores de su componente. Sin embargo, eso obtendría una instancia diferente del servicio que en sus otros módulos:
@Component({ selector: 'app-dashboard', templateUrl: './default-layout.component.html', providers: [DbService] }) export class DefaultLayoutComponent {También podría agregarlo a los proveedores para el módulo en el que reside su componente, pero eso también obtendría una instancia diferente.
Creo que la mejor manera sería definir el servicio para que se proporcione en el módulo raíz. De esta manera, no tiene que agregarlo en los proveedores en ninguna parte, angular lo agregará automáticamente a los proveedores del módulo raíz cuando sea necesario. Eso lleva a lo que decía Octavian en su comentario. Creo que acaba de poner este código incorrectamente en el componente en lugar del servicio. Mueva esto al servicio y elimine el servicio de los arreglos de providers en su(s) módulo(s):
@Injectable({ providedIn: 'root' })