[Debugging] NullInjectorError: No provider for {Class}!

Aug 15, 2023

[Debugging] NullInjectorError: No provider for {Class}!

In this video, you’ll learn what the error “NullInjectorError: No provider for {Class}!” means, how to debug it, and prevent it from happening in the future.

Content

0.719 -> null injector error no provider for the

3.439 -> injectable class

4.48 -> you'll encounter this error when you

5.839 -> attempt to inject a service without

7.68 -> declaring the corresponding provider

9.76 -> in other words your code is attempting

11.519 -> to use a dependency

13.04 -> but angular has no way to find or inject

15.519 -> that dependency

16.56 -> because there is currently no provider

18.4 -> pointing to it but what is a provider

20.64 -> exactly

21.52 -> think of it like a prescription for a

23.279 -> medication where the prescription is a

25.439 -> provider

26.16 -> and the medication is an injectable

28.16 -> service what the error is telling

30 -> us is that we're trying to use a

31.519 -> medication that has not been prescribed

34.399 -> there are two places we can address the

36.079 -> issue the injectable decorator

38.079 -> or the provider's array in an ng module

40.64 -> in either case

41.44 -> a provider is composed of three main

43.6 -> pieces of information

44.8 -> first it needs to know where to make the

46.559 -> class available like the root of the

48.239 -> application or a feature module

50.48 -> and second it needs a token for locating

53.12 -> that class within the dependency

54.48 -> injection system

55.68 -> the token is the class type that has

57.6 -> been decorated in most cases

59.6 -> the token will be the same as the class

61.6 -> that you want to provide

62.719 -> however it's possible to provide a third

64.879 -> piece of information

66.08 -> like use class to provide an entirely

68.08 -> different class or use value

70 -> to provide a raw value let's start by

72.72 -> taking a look at a couple of common

74.32 -> examples

74.96 -> and quick fixes then we'll take a more

76.96 -> detailed look at injectorism providers

79.119 -> to understand why this error happens at

81.119 -> a more fundamental level

82.4 -> in our code base we have a service

84.4 -> decorated with injectable

86.08 -> but currently the service has not been

88.08 -> provided to any ng module within the

90.4 -> application when we attempt to inject it

92.479 -> in the constructor of the app component

94.479 -> the result is the null injector error

96.72 -> the error message itself

98.079 -> points to the offending class now there

100.32 -> are two main ways we might address the

101.84 -> issue

102.479 -> if we want to provide the class

103.92 -> throughout the entire application

105.52 -> we can use the provided and root option

108 -> that'll provide a global singleton

109.759 -> that can be used anywhere in the

110.96 -> application and clears the error

113.04 -> however that may not always be the

115.04 -> optimal solution

116.24 -> in some cases it may be more efficient

118.32 -> to scope a service to a feature module

120.799 -> and that can be achieved by providing an

122.64 -> ng module class

123.84 -> as the provided in option that makes it

126.159 -> possible to exclude this code from the

128 -> app's main javascript bundle

129.759 -> and lazy load it when it becomes needed

131.84 -> to improve load time performance

133.599 -> that's ideal when you have a service

135.28 -> that's used by an individual module

137.52 -> but what if a service is required by

139.36 -> multiple lazy loaded modules

141.28 -> in that case you may want each module to

143.44 -> create its own instance of the service

145.599 -> that can be achieved with the provided

147.52 -> and any option

148.8 -> instead of a singleton this option will

151.12 -> instantiate a new service

152.8 -> for each module that injects it and one

155.12 -> other option to also be aware of

156.8 -> is provided in platform which is

158.64 -> relevant to projects that use multiple

160.56 -> angular applications on a single page

162.879 -> such as web components with angular

164.879 -> elements for example

166.16 -> provided in platform will make the

167.84 -> service available to all applications

170 -> on that page in total that's four

172.319 -> different ways to provide a service

174.239 -> root instantiates a singleton for an

176.319 -> entire angular app

177.44 -> a module class provides a singleton for

179.76 -> just that module

180.879 -> any provides an instance for each module

183.04 -> that injects it

184 -> and platform provides a singleton for

186.239 -> multiple angular applications

188.319 -> now it's also worth noting that you can

190 -> provide a service directly in the ng

192.319 -> module decorator

193.599 -> import the service you want to provide

195.44 -> then add it to the provider's array

197.12 -> within the ng

198 -> module decorator this pattern also

200.08 -> creates a provider

201.04 -> however it's generally not the preferred

202.879 -> approach because it makes the code more

204.56 -> difficult to tree shake when a service

206.48 -> has not been injected anywhere

208.319 -> now in many cases you may encounter the

210.48 -> null injector error from a third-party

212.319 -> dependency

212.959 -> or one of angular's built-in modules for

215.28 -> example

216 -> imagine we import the http client into

218.64 -> our app component

219.599 -> then inject it as a dependency in the

221.36 -> constructor that also throws an error

223.68 -> but you might be wondering why something

225.44 -> built into angular would not have a

227.04 -> provider

227.84 -> there are only a handful of minimal

229.519 -> services built into angular core

231.36 -> almost everything else is isolated in

233.36 -> its own module

234.56 -> what that means is that in order to use

236.64 -> the http client

238.08 -> we need to import its corresponding ng

240.4 -> module

241.12 -> in the module that depends on it which

242.799 -> in our case is the app module and we do

245.04 -> that by adding it to its imports array

247.439 -> now that we know how to fix the issue

249.04 -> let's talk about injectors

250.48 -> when angular is bootstrapped it creates

252.4 -> an application-wide injector

254 -> its job is to create and manage

255.92 -> dependencies and it does that by

257.759 -> maintaining a collection of providers

260.32 -> each provider contains a token or class

262.72 -> type that tells angular where to find

264.88 -> the injectable value

266.32 -> in most cases a provider is created with

268.639 -> the injectable decorator

270.08 -> when that class is then referenced in

271.68 -> the constructor of a component for

273.36 -> example

274 -> the injector will use the provider to

276.08 -> find the existing

277.04 -> instance of that class or instantiate a

279.199 -> new one if required

280.4 -> every dependency needs to have at least

282.24 -> one provider and that brings us to the

284.24 -> root of the null injector error

286 -> if there's no provider it just doesn't

287.759 -> work let's go ahead and recap

289.52 -> when you encounter the null injector

291.199 -> error it means a service was injected

293.28 -> without the necessary provider

294.96 -> the first step is to find the offending

297.04 -> class if it's one of your own injectable

299.04 -> classes

299.68 -> you can provide it in the root of the

301.199 -> application or provide it in an ng

303.12 -> module

303.84 -> if it's related to a third party

305.28 -> dependency you're likely missing an ng

307.52 -> module

308.08 -> import determine where that service is

309.759 -> provided then import the corresponding

312 -> ng module

313.039 -> for additional details and examples

314.96 -> check out the dependency injection guide

316.72 -> in the official angular documentation

Source: https://www.youtube.com/watch?v=lAlOryf1-WU