title: Angular - How to share a service provided in component with the component's resolver?
body: <p>I have a messenger component, with a messages service provided in the component itself (as it needs to be component specific) as such:</p>
  <pre><code>@Component({
    selector: &quot;app-messenger&quot;,
    templateUrl: &quot;./messenger.page.html&quot;,
    styleUrls: [&quot;./messenger.page.scss&quot;],
    providers: [MessagesService],
  })
  </code></pre>
  <p>I need to load my messages (done in the messages service) before I transition to the messenger component, and am therefore using a resolver (<code>messagesResolver</code>). The <code>messagesService</code> contains the messages, so the resolver needs access to a same instance of the <code>messagesService</code> as the <code>messengerComponent</code>.</p>
  <p>How do I do that?</p>
  <p>I am currently getting the error from the resolver:</p>
  <pre><code>NullInjectorError: R3InjectorError(MainPageModule)[MessagesResolver -&gt; MessagesResolver -&gt; MessagesService -&gt; MessagesService -&gt; MessagesService]: 
    NullInjectorError: No provider for MessagesService!
  </code></pre>
  <p>I understood from other Stack Overflow questions that I could Angular's Injector? However I don't know how I would go about this.</p>
  <p>Notes on resolver:</p>
  <ul>
  <li>It is provided in root using <code>@Injectable({ providedIn: &quot;root&quot;, })</code></li>
  <li>It is used in the routing of the module containing the messenger component as such:</li>
  </ul>
  <pre><code>{
      path: &quot;messenger/:chatID&quot;,
      loadChildren: () =&gt;
        import(&quot;./chats/messenger/messenger.module&quot;).then((m) =&gt; m.MessengerPageModule),
      resolve: {
        messages: MessagesResolver,
      },
    },
  </code></pre>