title: Angular StaticInjectorError Error
body: <p>I'm writing a library which need to wrap <a href="https://github.com/manfredsteyer/angular-oauth2-oidc/" rel="noreferrer" title="angular-oauth2-oidc">angular-oauth2-oidc</a>.</p>
  
  <p>Everything (the library and the consumer application) compiles fine, but on runtime in the browser I get the following error:</p>
  
  <pre><code>ERROR Error: StaticInjectorError[InjectionToken DocumentToken]: 
    StaticInjectorError[InjectionToken DocumentToken]: 
      NullInjectorError: No provider for InjectionToken DocumentToken!
      at _NullInjector.get (core.js:993)
      at resolveToken (core.js:1281)
      at tryResolveToken (core.js:1223)
      at StaticInjector.get (core.js:1094)
      at resolveToken (core.js:1281)
      at tryResolveToken (core.js:1223)
      at StaticInjector.get (core.js:1094)
      at resolveNgModuleDep (core.js:10878)
      at _createClass (core.js:10919)
      at _createProviderInstance$1 (core.js:10889)
  </code></pre>
  
  <p><strong><em>Abbreviated code:</em></strong></p>
  
  <p><strong>Library module:</strong>  Defines the <code>NgModule</code> for my library, imports the <code>OAuthModule</code> and the <code>HttpClientModule</code> which it requires.  Defines my <code>SomeService</code> service.</p>
  
  <pre><code>@NgModule({
      imports: [ HttpClientModule, OAuthModule.forRoot() ],
      providers: [ SomeService ]
  })
  export class SomeModule {}
  </code></pre>
  
  <p><strong>Library service:</strong> Minimum example, does nothing but instantiate the OAuthService.</p>
  
  <pre><code>@Injectable()
  export class SomeService {
      constructor(private oauth: OAuthService) {}
  }
  </code></pre>
  
  <p><strong>Consumer app module:</strong>  Just imports my library as <code>SomeModule</code>.</p>
  
  <pre><code>@NgModule({
      ...
      imports: [ SomeModule ],
      bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>Consumer component:</strong> Tries to call the <code>SomeService</code> service in my library, <em>which spawns the error.</em></p>
  
  <pre><code>@Component({ ... })
  export class AppComponent {
      constructor(
          private someService: SomeService
      ) {}
  }
  </code></pre>
  
  <ul>
  <li>The library and application both compile without error</li>
  <li>When I go to the app in the browser, I get the error mentioned above</li>
  <li>If I remove <code>HttpClientModule</code> from the library imports, it says I'm missing <code>HttpClient</code> instead of the error above</li>
  <li>Library is built with <a href="https://github.com/trekhleb/angular-library-seed" rel="noreferrer">angular-library-seed</a></li>
  <li>Application is built with <code>@angular/cli</code></li>
  </ul>
  
  <p>I've tried many things, such as...</p>
  
  <ul>
  <li>Having the application also import <code>OAuthModule</code></li>
  <li>Removing the <code>.forRoot()</code> on <code>OAuthModule.forRoot()</code> in the library means the library can't get to the services inside <code>OAuthModule</code></li>
  <li>Changing the library to also use <code>.forRoot()</code>, with just about every combination of services in the <code>providers</code> array (between itself, OAuthService, and HttpClientService).</li>
  <li>Changing the webpack config to not list @angular/* as externals</li>
  <li>Changing the webpack config to list the OAuth library as an external</li>
  <li>Using rollup instead of webpack, with configs from two separate seed projects</li>
  <li>More things that boiled down to just grasping at straws</li>
  </ul>
  
  <p>Googling around, it seems this error can happen when they are missing something obvious in the providers array on their NgModule; that doesn't seem to apply to me.  I don't use "<em>DocumentToken</em>" anywhere.</p>
  
  <p>I've also seen a common fix is to import <code>HttpClientModule</code>, which I've already done to no avail.</p>
  
  <p>I found exactly one instance of someone else getting this error with "DocumentToken".  They fixed their library in <a href="https://github.com/material-extended/mde/commit/e557e72a64766ad3e9970d1958fec8ddce0d3fa9" rel="noreferrer">this commit</a>, which seemed to just add more externals to their rollup config.  While my library uses webpack, it uses <a href="https://www.npmjs.com/package/webpack-angular-externals" rel="noreferrer">webpack-angular-externals</a> to make sure all @angular/* packages are listed as external.</p>
  
  <p>Any help or ideas would be extremely, extremely appreciated.</p>
  
  <p>(Angular 5, TypeScript 2.6.2)</p>