Angular2-jwt: It does not work with angular 8.0.0 and ivy enabled

[fernandogomesdf]

Description

error when i compile the code:

ERROR in ./src/app/guards/login.guard.ts 39:37-53
"export 'JwtHelperService' was not found in '@auth0/angular-jwt'
ERROR in ./node_modules/@auth0/angular-jwt/__ivy_ngcc__/index.js
Module not found: Error: Can't resolve './src/jwt.interceptor' in '/mnt/d/desenvolvimento/rennova-web/node_modules/@auth0/angular-jwt/__ivy_ngcc__'
ERROR in ./node_modules/@auth0/angular-jwt/__ivy_ngcc__/index.js
Module not found: Error: Can't resolve './src/jwthelper.service' in '/mnt/d/desenvolvimento/rennova-web/node_modules/@auth0/angular-jwt/__ivy_ngcc__'
ERROR in ./node_modules/@auth0/angular-jwt/__ivy_ngcc__/index.js
Module not found: Error: Can't resolve './src/jwtoptions.token' in '/mnt/d/desenvolvimento/rennova-web/node_modules/@auth0/angular-jwt/__ivy_ngcc__'

Environment

windows 10 -> bash wsl
node v12.3.1
npm 6.9.0

Reproduction

try to compile https://github.com/fernandogomesdf/rennova-web.git with ivy enabled

update tsconfig.app.json with:

"angularCompilerOptions": {
"enableIvy": true
}

[sysmat]

Maybe it's just import

WARNING in Entry point '@auth0/angular-jwt' contains deep imports into 'rxjs/internal/observable/from'. This is probably not a problem, but may cause the compilation of entry points to be out of order.[0m

ERROR in ./node_modules/aris-jwt/__ivy_ngcc__/fesm5/aris-jwt.js 27:29-45
"export 'JwtHelperService' was not found in '@auth0/angular-jwt'
ERROR in ./node_modules/@auth0/angular-jwt/__ivy_ngcc__/index.js
Module not found: Error: Can't resolve './src/jwt.interceptor' in 'C:\Users\tomaz\Documents\NetBeansProjects\GitLab_Arnes\portal-hub\arnes-guest-account\upis-wc\frontend\node_modules\@auth0\angular-jwt\__i
ERROR in ./node_modules/@auth0/angular-jwt/__ivy_ngcc__/index.js
Module not found: Error: Can't resolve './src/jwthelper.service' in 'C:\Users\tomaz\Documents\NetBeansProjects\GitLab_Arnes\portal-hub\arnes-guest-account\upis-wc\frontend\node_modules\@auth0\angular-jwt\_

[fernandogomesdf]

Same code, same imports in my code...

ivy disabled -> works
ivy enabled -> fail

Maybe these imports inside node_modules/@auth0/angular-jwt/__ivy_ngcc__/index.js:

export * from './src/jwt.interceptor';
export * from './src/jwthelper.service';
export * from './src/jwtoptions.token';

Maybe it's just import

WARNING in Entry point '@auth0/angular-jwt' contains deep imports into 'rxjs/internal/observable/from'. This is probably not a problem, but may cause the compilation of entry points to be out of order.[0m

ERROR in ./node_modules/aris-jwt/__ivy_ngcc__/fesm5/aris-jwt.js 27:29-45
"export 'JwtHelperService' was not found in '@auth0/angular-jwt'
ERROR in ./node_modules/@auth0/angular-jwt/__ivy_ngcc__/index.js
Module not found: Error: Can't resolve './src/jwt.interceptor' in 'C:\Users\tomaz\Documents\NetBeansProjects\GitLab_Arnes\portal-hub\arnes-guest-account\upis-wc\frontend\node_modules\@auth0\angular-jwt\__i
ERROR in ./node_modules/@auth0/angular-jwt/__ivy_ngcc__/index.js
Module not found: Error: Can't resolve './src/jwthelper.service' in 'C:\Users\tomaz\Documents\NetBeansProjects\GitLab_Arnes\portal-hub\arnes-guest-account\upis-wc\frontend\node_modules\@auth0\angular-jwt\_

[jonrimmer]

There is already a PR waiting to fix the RxJS imports: #600

Can this be prioritised to be merged? Right now this the only thing blocking up from enabling Ivy.

[sysmat]

Any progress?

[papci]

Could you consider merging #542 ? AOT does not work at all without this fix. Thanks.

[sysmat]

Is this project dead

[vzsolt1981]

The lack of communication is really annoying, as we all are waiting to switch our projects to ivy.

[stevehobbsdev]

@vzsolt1981 @sysmat Apologies for the radio silence. I am making a concerted effort to get the changes you requested merged and released.

However, the fixes in #542 don't seem to fix the issue with Ivy by themselves. It looks like there's an additional pathing issue after compilation. @auth0/angular-jwt/__ivy_ngcc__/index.js is trying to import ./src/jwt.interceptor but it doesn't exist on that path.

I'm not hugely familiar with the Ivy compiler or the best way to resolve this; is there anyone on the thread who can work with me to bust through this problem and get it out?

[sysmat]

I thinking the best way to creatue angular lib is with angular cli

1. Create ng projcet with out init application
2. With ng add library angular-jwt
3. From there add sources
4. Build lib with ng and publish

In 3 other angular libs projcet this resolves all the problem's I think ng is havely dependent on thiers schematics
Regards Tomaž

[sysmat]

with ng generate library it workss

[stevehobbsdev]

@sysmat Great - let me look into refactoring the library to do that. Thanks for the input!

[sysmat]

compiler doesn't complain, but I get run time error:

R3InjectorError(AppModule)[InjectionToken HTTP_INTERCEPTORS -> [object Object] -> InjectionToken JWT_OPTIONS]: 
  StaticInjectorError(AppModule)[InjectionToken JWT_OPTIONS]: 
    StaticInjectorError(Platform: core)[InjectionToken JWT_OPTIONS]: 
      NullInjectorError: No provider for InjectionToken JWT_OPTIONS!

Uncaught Error: Cannot instantiate cyclic dependency! InjectionToken HTTP_INTERCEPTORS
    at R3Injector.hydrate (core.js:18869)
    at R3Injector.get (core.js:18673)
    at HttpInterceptingHandler.handle (http.js:2258)
    at MergeMapSubscriber.project (http.js:1241)
    at MergeMapSubscriber._tryNext (mergeMap.js:46)
    at MergeMapSubscriber._next (mergeMap.js:36)
    at MergeMapSubscriber.next (Subscriber.js:49)
    at Observable._subscribe (subscribeToArray.js:3)
    at Observable._trySubscribe (Observable.js:42)
    at Observable.subscribe (Observable.js:28)
ng-validate.js:1 Uncaught TypeError: ng.probe is not a function
    at Object.e.isDebugMode (ng-validate.js:1)
    at l (ng-validate.js:24)
    at Object.602 (ng-validate.js:24)
    at r (ng-validate.js:1)
    at Object.603 (ng-validate.js:24)
    at r (ng-validate.js:1)
    at ng-validate.js:1
    at ng-validate.js:1

[sysmat]

I forgot to import Module.forRoot(...)

[sysmat]

@stevehobbsdev Any progress?

[adessilly]

For IVY, I fixed this issues by changing my import from :
import { JwtHelperService } from '@auth0/angular-jwt';
to
import { JwtHelperService } from '@auth0/angular-jwt/src/jwthelper.service';

[stevehobbsdev]

@sysmat Sorry no, I haven't looked at this yet. But, looks like there is a usable workaround for now, thanks @adessilly.

[sysmat]

Solution of @adessilly but when compiling wit IVY there are WARNINGS:

contains deep imports into 'C:/Users/tomaz/Documents/NetBeansProjects/GitLab_Arnes/portal-hub/upravljanje-domen/domain-reg-wc/frontend/node_modules/@auth0/angular-jwt/src/jwthelper.service'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

[huynhquangminh]

Has anyone had a solution?

[huynhquangminh]

import { JwtInterceptor } from './../src/jwt.interceptor';
import { JwtHelperService } from './../src/jwthelper.service';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { JWT_OPTIONS } from './../src/jwtoptions.token';
import * as ɵngcc0 from '@angular/core';
export * from './../src/jwt.interceptor';
export * from './../src/jwthelper.service';
export * from './../src/jwtoptions.token';

i am build no err with this solution

[ltomes]

@stevehobbsdev ~Why was this issue closed if there is only a work around?~

~Do you have a work around for newer versions of angular-jwt?
It does not seem that the src directory ships with the package anymore?~

Edit: I believe @auth0\angular-jwt is working as expected, at version 4.0.0 and later. Another module in my application is failing to properly aot build.

Sorry for the noise!