No provider for InjectionToken DocumentToken!

[Sleeper9]

When trying to use the library, it gives me the following message right when I hit a page that uses a HAL-enabled service:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[HttpXsrfTokenExtractor -> InjectionToken DocumentToken]: 
  StaticInjectorError(Platform: core)[HttpXsrfTokenExtractor -> InjectionToken DocumentToken]: 
    NullInjectorError: No provider for InjectionToken DocumentToken!
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:10836)
    at _createClass (core.js:10877)
    at _createProviderInstance$1 (core.js:10847)
    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)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4724)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1517)

[Sleeper9]

Sorry, I think this issue still persists in 1.8.6. Can you look at it? This SO question and this github issue seem to related, maybe it's a problem with the library packaging?

UPDATE

I deleted the node_modules folder from the lib folder (node_modules/angular4-hal/node_modules), and it seemed to help. Can you elaborate lib packaging a bit?

[sante85]

if you want get http client simply

@Injectable() export class AuthService extends RestService {

constructor(private externalService: ExternalService, injector: Injector) { super(Auth, "", injector); }

..................

this.externalService.getHttp()

[sante85]

what is your question?

[Sleeper9]

Thanks, I am able to access httpClient this way, so I removed the HttpClient injection from constructors and removed HttpClient from app.module providers and imports as well, but the problem still exists. I did everything as it's written in README.md, I just can't see what I am missing...

[sante85]

please post your code entirely or post a plunker

[Sleeper9]

Please see this comment, this is exactly what I had to do to get it working (that's not a real solution though, because it redownloads node_modules directory again on an npm install)

[Sleeper9]

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {AppRoutingModule} from './app-routing.module';

import {AngularHalModule, PROXY_URI, API_URI} from 'angular4-hal';

import {environment} from '../environments/environment';

import {AppComponent} from './app.component';
import {ProjectListComponent} from './projects/project-list.component';

import {DateService} from './services/date.service';
import {ProjectService} from './services/project.service';

@NgModule({
  declarations: [
    AppComponent,
    ProjectListComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AngularHalModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule
  ],
  providers: [
    { provide: API_URI, useValue: environment.api_url },
    { provide: PROXY_URI, useValue: '' },
    DateService,
    ProjectService
   ],
  bootstrap: [AppComponent]
})
export class AppModule {}

project.service.ts

import {Injectable, Injector} from '@angular/core';
import Project from '../models/project.model';
import {RestService, ExternalService} from 'angular4-hal';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class ProjectService extends RestService<Project> {

  constructor(private externalService: ExternalService, injector: Injector) {
    super(Project, 'projects', injector);
  }

  getAll(): Observable<Project[]>  {
    return super.getAll();
  }

  save(data) {
    return this.externalService.getHttp().post(`api/projects`, data);
  }
}

project.model.ts

import {Resource} from 'angular4-hal';
import {DateService} from '../services/date.service';

export default class Project extends Resource {
  interval: {
    beginDate: any;
    endDate: any;
  };
  name: string;

  constructor() {
    super();

    this.interval = {
      beginDate: null,
      endDate: null
    };
  }
}

project-list.component.ts

import {Component, OnInit} from '@angular/core';
import Project from '../models/project.model';
import {ProjectService} from "../services/project.service";
import {Router, NavigationExtras} from "@angular/router";

@Component({
  selector: 'dossier-project-list',
  templateUrl: './project-list.component.html',
  styleUrls: ['./project-list.component.scss']
})
export class ProjectListComponent implements OnInit {

  projects = [];

  constructor(private projectService: ProjectService,
              private router: Router) {

  }

  ngOnInit() {

    this.projectService.getAll()
      .subscribe((response: any) => {
        this.projects = response;
      });

  }
}

[sante85]

my angular version is 5.1.2

[sante85]

please zip a complete project for test

[Sleeper9]

Sorry, I can not post the original project, but I generated a fresh new project with Angular-CLI, added a simple service and model entity. You can run it with ng serve. It compiles without any problem, but when you open localhost:4200, the console shows the problem.

ng:///AppModule/AppComponent_Host.ngfactory.js:5 ERROR Error: StaticInjectorError(AppModule)[HttpXsrfTokenExtractor -> InjectionToken DocumentToken]: 
  StaticInjectorError(Platform: core)[HttpXsrfTokenExtractor -> InjectionToken DocumentToken]: 
    NullInjectorError: No provider for InjectionToken DocumentToken!

hal-test.zip

[sante85]

simply angular version is 5.1.2 and not ^.... and typescript version is 2.4.2

and all is right

[Sleeper9]

I modified my package.json according to that, but did not help. The error message changed a bit, but still the same:

ERROR Error: StaticInjectorError[InjectionToken DocumentToken]: 
  StaticInjectorError[InjectionToken DocumentToken]: 
    NullInjectorError: No provider for InjectionToken DocumentToken!

package.json:

 "dependencies": {
    "@angular/animations": "5.1.2",
    "@angular/common": "5.1.2",
    "@angular/compiler": "5.1.2",
    "@angular/core": "5.1.2",
    "@angular/forms": "5.1.2",
    "@angular/http": "5.1.2",
    "@angular/platform-browser": "5.1.2",
    "@angular/platform-browser-dynamic": "5.1.2",
    "@angular/router": "5.1.2",
    "angular4-hal": "1.8.6",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.4",
    "@angular/compiler-cli": "5.1.2",
    "@angular/language-service": "5.1.2",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.9.1",
    "typescript": "2.4.2"
  }

My node version is v8.9.4

[sante85]

my node version is 6.11.4

[sante85]

please fork and create a pull request to support node 8

[Sleeper9]

No, it has nothing to do with node version. I tried running with v6.11.4 as you wrote, but still gives the error. I still think that you need to fix the library packaging. Have at look at this library starter project, I'd say you'd need to include @angular/common and @angular/core only under "devDependencies" section in your package.json file, and upload it this way to npm. Because when I delete the node_modules folder from your lib, the app starts working.

[sante85]

my package package.zip

[Sleeper9]

Hmm, so you are using ionic... I replaced my package.json with the one you provided, and it still does not work with plain ng serve command. I'll install ionic and test if it works with that.

UPDATE

OK, so I got it working by creating a new ionic project and applying the sample code I provided previously. So I assume it has to do with ng. Can you create a project with Angular-CLI, and test it? There seems to be some problem with plain ng commands.

[Sleeper9]

Any news about this?

[felixfiskare]

Using angular 6 and npm I get the same error while trying to follow the Readme

message:"Uncaught (in promise): Error: StaticInjectorError(AppModule)[RequestEditorComponent -> TeamsService]: \n StaticInjectorError(Platform: core)[RequestEditorComponent -> TeamsService]: \n NullInjectorError: No provider for TeamsService!