Skip to content

Commit 8b5822f

Browse files
docs: add partial graph support
1 parent 00e58a8 commit 8b5822f

File tree

4 files changed

+42
-0
lines changed

4 files changed

+42
-0
lines changed

content/devtools/overview.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,46 @@ Using the form controls located in the sidebar (on the left), you can control ed
6060

6161
<figure><img src="/assets/devtools/subtree-view.png" /></figure>
6262

63+
#### Investigating the "Cannot resolve dependency" error
64+
65+
> info **Note** This feature is supported for `@nestjs/core` >= `v9.3.10`.
66+
67+
Probably the most common error message you might have seen is about Nest not being able to resolve dependencies of a provider. Using Nest Devtools, you can effortlessly identify the issue and learn how to resolve it.
68+
69+
First, open up the `main.ts` file and update the `bootstrap()` call, as follows:
70+
71+
```typescript
72+
bootstrap().catch((err) => {
73+
writeFileSync('graph.json', PartialGraphHost.toString() ?? '');
74+
process.exit(1);
75+
});
76+
```
77+
78+
Also, make sure to set the `abortOnError` to `false`:
79+
80+
```typescript
81+
const app = await NestFactory.create(AppModule, {
82+
snapshot: true,
83+
abortOnError: false, // <--- THIS
84+
});
85+
```
86+
87+
Now every time your application fails to bootstrap due to the **"Cannot resolve dependency"** error, you'll find the `graph.json` (that represents a partial graph) file in the root directory. You can then drag & drop this file into Devtools (make sure to switch the current mode from "Interactive" to "Preview"):
88+
89+
<figure><img src="/assets/devtools/drag-and-drop.png" /></figure>
90+
91+
Upon successful upload, you should see the following graph & dialog window:
92+
93+
<figure><img src="/assets/devtools/partial-graph-modules-view.png" /></figure>
94+
95+
As you can see, the highlighted `TasksModule` is the one we should look into. Also, in the dialog window you can already see some instructions on how to use fix this issue.
96+
97+
If we switch to the "Classes" view instead, that's what we'll see:
98+
99+
<figure><img src="/assets/devtools/partial-graph-classes-view.png" /></figure>
100+
101+
This graph illustrates that the `DiagnosticsService` which we want to inject into the `TasksService` was not found in the context of the `TasksModule` module, and we should likely just import the `DiagnosticsModule` into the `TasksModule` module to fix this up!
102+
63103
#### Routes explorer
64104

65105
When you navigate to the **Routes explorer** page, you should see all of the registered entrypoints:

content/faq/errors.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ Potential solutions:
2020
2121
The most common culprit of the error, is not having the `<provider>` in the module's `providers` array. Please make sure that the provider is indeed in the `providers` array and following [standard NestJS provider practices](/fundamentals/custom-providers#di-fundamentals).
2222

23+
<app-banner-devtools></app-banner-devtools>
24+
2325
There are a few gotchas, that are common. One is putting a provider in an `imports` array. If this is the case, the error will have the provider's name where `<module>` should be.
2426
2527
If you run across this error while developing, take a look at the module mentioned in the error message and look at its `providers`. For each provider in the `providers` array, make sure the module has access to all of the dependencies. Often times, `providers` are duplicated in a "Feature Module" and a "Root Module" which means Nest will try to instantiate the provider twice. More than likely, the module containing the `<provider>` being duplicated should be added in the "Root Module"'s `imports` array instead.
335 KB
Loading
317 KB
Loading

0 commit comments

Comments
 (0)