【问题标题】:Angular service injection error for no provider没有提供者的角度服务注入错误
【发布时间】:2021-05-19 21:30:53
【问题描述】:

我有一个使用路由的 Angular 应用 (v10.1)。

简而言之,我正在使用模块来利用延迟加载 基本的目录结构是这样的

ROOT
    /modules
        /myMod
            myMod.component.ts

myMod 组件需要使用一些服务,所以我试图包含服务(location.service)并在构造函数中声明它。

我收到一个错误

core.js:4352 ERROR Error: Uncaught (in promise): 
    NullInjectorError: R3InjectorError(myModModule)[LocationService -> LocationService -> LocationService -> LocationService -> LocationService]: 
    NullInjectorError: No provider for LocationService!

我已尝试将此服务添加到 @NgModule 中的提供程序数组 但是我有 3 个模块需要考虑 ROOT、Resource、myMod

我已尝试将服务分别添加到每个服务,但无济于事 - 仍然出现错误

这是应用程序的更详细的图表 请不要告诉我我需要将服务添加到每个模块中,如果我误用了模块,有人可以解释一下。谢谢

ROOT
-app.module
-app-routing.module
-app.component.html (has link routerLink="/resources/myMod" )

-- modules/resources
----resources-routing.module.ts
        const routes: Routes = [{
                path: 'myMod', loadChildren: () => import('../myMod/myMod.module').then((m) => m.myModModule),
            }]

-- modules/myMod
----myMod.module.ts
        import { myModRoutingModule } from './myMod-routing.module';
        import { myModComponent } from './myMod.component';
        @NgModule({
            declarations: [myModComponent],
            imports: [CommonModule, myModRoutingModule]
        })
        export class myModModule {}

----myMod.component.ts
        import { LocationService } from '../../common/services/location.service';
        @Component({
            selector: 'app-myMod',
            templateUrl: './myMod.component.html'
        })
        export class myModComponent implements OnInit {
            constructor( private locationService: LocationService )

https://stackblitz.com/edit/angular-injection-error1

【问题讨论】:

  • 请同时包含服务类,以及您正在构建的 Angular 版本。最可能的罪魁祸首是您的 @Injectable 注释丢失或缺少 providedIn 属性。
  • @El-Mo - v10.1 - 以上服务

标签: angular dependency-injection angular-module


【解决方案1】:

您的 @Injectable 注释似乎缺少 providedIn 属性。

添加它应该可以解决问题:

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

【讨论】:

  • El-mo - 有效 - 直到我添加 import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';现在这甚至不起作用
  • 与导入相关的控制台是否有错误?
  • 未捕获(承诺):NullInjectorError:R3InjectorError(CollegesModule)[CollegeService -> CollegeService -> CollegeService -> HttpClient -> HttpClient -> HttpClient]:NullInjectorError:没有 HttpClient 的提供者! - 这是一个大学服务,在定位服务之后加载,使用 httpClient 调用 API。
  • 请使用可重现该问题的堆栈闪电更新您的帖子。
  • 好吧,我什至无法让路由器工作 - stackblitz.com/edit/angular-qzdrng
猜你喜欢
  • 2018-08-08
  • 2018-04-24
  • 2018-03-04
  • 2019-08-12
  • 2017-08-22
  • 1970-01-01
  • 2017-10-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多