NullInjectorError: No provider for InjectionToken DocumentToken

Question

I'm settings up a common library for all my Angular 5 projects. Library is a clone of GitHub repository angular-library-starter-kit.

Everything works fine until I try to use HttpClientModule (successor to HttpModule).

Here are contents of my library.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { MyService } from './my-service';

export * from './my-service';

@NgModule({
  imports: [
    CommonModule,
    HttpModule,
    HttpClientModule
  ],
  exports: [
  ],
  declarations: [
  ],
  providers: [
      MyService
  ],
})
export class LibraryModule { }

And here are contents of my-service.ts (which is THE ONLY FILE in the library):

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs/Observable";

@Injectable()
export class MyService {

    constructor(private httpClient: HttpClient) {
        //
    }

    getData(): Observable<any> {
        return this.httpClient.get<any>('test.json');
    }

}

The library builds without any errors but when I try to use it in fresh Angular 5 app (ng new myApp) it gives an error:

AppComponent_Host.ngfactory.js? [sm]:1 ERROR Error: StaticInjectorError(AppModule)[HttpXsrfTokenExtractor -> InjectionToken DocumentToken]: 
  StaticInjectorError(Platform: core)[HttpXsrfTokenExtractor -> 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:10847)
    at _createClass (core.js:10888)
    at _createProviderInstance$1 (core.js:10858)

I've even tried importing modules HttpModule and HttpClientModule in the Angular 5 app but I got the same error.

I've also tried removing HttpModule from both the app and library but still the same error.

The reason I'm using both HttpModule and HttpClientModule is because apparently HttpClientModule still depends on HttpModule to work. I learned that this is not true.

How can I resolve this?

Note: The fresh app works just fine with ng serve until I add LibraryModule to its imports.

Answer 1

I poorly read the GitHub Issue. Apparently when working with local libraries you have to add --preserve-symlinks argument to ng serve.

ng serve --preserve-symlinks

Also there is no need to import HttpModule anywhere and no need to import HttpClientModule inside the app if only the library depends on it.

Answer 2

Update to Eric's answer:

Since Angular/Cli v6 --preserve-symlinks argument has been removed. To add it, edit angular.json file accordingly:

[...]  
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "progress": true,
        "extractCss": false,
        "outputPath": "dist/xcs-web-ui",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "preserveSymlinks": true,
[...]