Getting Error: StaticInjectorError[InjectionToken DocumentToken] | NullInjectorError: No provider for InjectionToken DocumentToken

0
votes

I am upgrading my app from angular 2.1.2 to angular 5.0.0. and getting this error.

Error: StaticInjectorError[InjectionToken DocumentToken]: \n StaticInjectorError[InjectionToken DocumentToken]: \n
NullInjectorError: No provider for InjectionToken DocumentToken!\n
NullInjectorError: No provider for InjectionToken DocumentToken!\n
at _NullInjector.get (/Users/temp/Documents/GitHub/sample-app/node_modules/@angular/core/bundles/core.umd.js:962:19)\n at resolveToken (/Users/temp/Documents/GitHub/sample-app/node_modules/@angular/core/bundles/core.umd.js:1250:24)\n at tryResolveToken (/Users/temp/Documents/GitHub/sample-app/node_modules/@angular/core/bundles/core.umd.js:1192:16)\n at StaticInjector.get (/Users/temp/Documents/GitHub/sample-app/node_modules/@angular/core/bundles/core.umd.js:1063:20)\n at resolveToken (/Users/temp/Documents/GitHub/sample-app/node_modules/@angular/core/bundles/core.umd.js:1250:24)\n at tryResolveToken (/Users/temp/Documents/GitHub/sample-app/node_modules/@angular/core/bundles/core.umd.js:1192:16)\n at StaticInjector.get (/Users/temp/Documents/GitHub/sample-app/node_modules/@angular/core/bundles/core.umd.js:1063:20)\n at resolveNgModuleDep (/Users/temp/Documents/GitHub/sample-app/node_modules/@angular/core/bundles/core.umd.js:10623:25)\n at _callFactory (/Users/temp/Documents/GitHub/sample-app/node_modules/@angular/core/bundles/core.umd.js:10693:32)\n at _createProviderInstance$1 (/Users/temp/Documents/GitHub/sample-app/node_modules/@angular/core/bundles/core.umd.js:10637:26)",

This is not a Angular CLI app so I have created a repo on git for minimal reproduction of the issue. Please refer the following link

Refer README.md for build and serve the app.

Using webpack:3.11.0 For build this app. Not able to understand the issue.

2
angulartypescriptwebpack
check this github issue. - Fateme Fazli
@fatemefazli github.com/angular/angular/issues/23737 Same as issue #20101 , which is closed now, but not able to find the solution. - yurzui
you need to import HttpModule(deprecated) as well as HttpClientModule, because some dependency still relies on HttpModule. - Fateme Fazli
or import {HttpClientModule, HttpClient} from '@angular/common/http'; then: imports:[ HttpClientModule] . - Fateme Fazli
@fatemefazli Already tried this one. It doesn't work with my app. And I already tried the solutions for this issue but nothing worked. - Amit Kumar

2 Answers

1
votes

The issue here is that your server index.js bundle contains @angular/core code. It means that when you run code you have two different functions InjectionToken that create two different instances of DocumentToken.

Possible fix is to change externals option in

webpack.config.json

export var serverConfig = {
  ...
  externals: includeClientPackages(
    /@angularclass|@angular|angular2-|.....
  ), 
  externals: angularExternals(),

  ...
}
...
export function angularExternals() {
  return function (context, request, callback) {
    if (request.startsWith('@angular/')) {
      return callback(null, {
        root: ['ng', request.replace(/^@angular//, '')],
        commonjs: request,
        commonjs2: request,
        amd: request
      });
    }
    callback();
  };
}

After that index.js bundle won't contain duplicate code from @angular/core so that angular will be able resolve dependency successfully.

0
votes

import {HttpClientModule, HttpClient} from '@angular/common/http';

then: imports:[ HttpClientModule]

it will work