title: Angular can't use HttpClient in external library
body: <p>When I try to instantiate the <code>HttpClient</code> service in an external library, then consume that library in an Angular application, I'm getting <code>StaticInjectorError</code> errors:</p>
  
  <p>With <strong>Angular 5.0.0</strong>:</p>
  
  <pre><code>AppComponent_Host.ngfactory.js? [sm]:1 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>With <strong>Angular 5.2.0-rc.0</strong>:</p>
  
  <pre><code>ERROR Error: StaticInjectorError(AppModule)[HttpXsrfTokenExtractor -&gt;
  InjectionToken DocumentToken]:    StaticInjectorError(Platform:
  core)[HttpXsrfTokenExtractor -&gt; InjectionToken DocumentToken]: 
      NullInjectorError: No provider for InjectionToken DocumentToken!
      at _NullInjector.get (core.js:994)
      at resolveToken (core.js:1292)
      at tryResolveToken (core.js:1234)
      at StaticInjector.get (core.js:1102)
      at resolveToken (core.js:1292)
      at tryResolveToken (core.js:1234)
      at StaticInjector.get (core.js:1102)
      at resolveNgModuleDep (core.js:10836)
      at _createClass (core.js:10877)
      at _createProviderInstance$1 (core.js:10847)
  </code></pre>
  
  <p>I reproduced this with a blank <code>@angular/cli</code> application importing a blank library seed from <a href="https://github.com/robisim74/angular-library-starter" rel="noreferrer">angular-library-starter</a> which just imports and tries to use HttpClient:</p>
  
  <p>(import lines truncated for brevity)</p>
  
  <p>Application: <code>app.module.ts</code>:</p>
  
  <pre><code>@NgModule({
    declarations: [ AppComponent ],
    imports: [ ..., ArithmeticModule.forRoot() ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Application: <code>app.component.ts</code>:</p>
  
  <pre><code>@Component({
    ...
  })
  export class AppComponent {
    constructor(private sum: SumService) {}
  }
  </code></pre>
  
  <p>For the library, all I did was import <code>HttpClientModule</code> in the library module, and then try to inject it in <code>SumService</code>:</p>
  
  <p>Library: <code>arithmetic.module.ts</code>:</p>
  
  <pre><code>@NgModule({
      imports: [ HttpClientModule ]
  })
  export class ArithmeticModule {
      public static forRoot(): ModuleWithProviders {
          return {
              ngModule: ArithmeticModule,
              providers: [ SumService ]
          };
      }
  }
  </code></pre>
  
  <p>Library: <code>sum.service.ts</code>:</p>
  
  <pre><code>@Injectable()
  export class SumService {
    constructor(private http: HttpClient) {}
    ....
  }
  </code></pre>
  
  <p>This setup causes the <code>StaticInjectorError</code> errors mentioned at the top of the post.</p>
  
  <ul>
  <li>In the rollup config, I've added <code>@angular/common/http</code>/<code>ng.common.http</code> as external/global.</li>
  <li>I've tried this with many different setups, library seeds, with rollup, and with webpack.  It all results in the same issue.</li>
  </ul>
  
  <p>Any ideas?</p>