'@auth0/angular-jwt import failing

I want to replace angular2-jwt with @auth0/angular-jwt but I get this error: enter image description here

this is my package.json dependencies:

"dependencies": {
    "@angular/animations": "5.2.0",
    "@angular/common": "5.2.0",
    "@angular/core": "5.2.0",
    "@angular/forms": "5.2.0",
    "@angular/platform-browser": "5.2.0",
    "@angular/platform-browser-dynamic": "5.2.0",
    "@angular/platform-server": "5.2.0",
    "@angular/router": "5.2.0",
    "@auth0/angular-jwt": "^1.2.0",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "amazing-time-picker": "^1.5.3",
    "core-js": "^2.4.1",
    "ng2-dragula": "1.5.0",
    "ng2-img-cropper": "0.7.7",
    "ng2-validators": "2.2.0",
    "ngx-toastr": "6.4.0",
    "primeng": "5.2.7",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.5.12",
    "systemjs": "0.19.47",
    "zone.js": "^0.8.12"
  }

And this is how I import in app module:

 JwtModule.forRoot({
            config: {
                tokenGetter: tokenGetter,
                whitelistedDomains: ["localhost:53343"],
                skipWhenExpired: true
            }
        })

Also HttpClientModule is imported before. I am using angular 5 and auth0/angular-jwt 1.2.0 at the moment but same error with any 1.x.x version.

I think importing failing because uploadservice.js line 14 does the following: var angular_jwt_1 = require("@auth0/angular-jwt");

Notice project use systemjs and this is how it is configured:

(function(global) {
    System.config({
        transpiler: 'typescript',
        //typescript compiler options
        typescriptOptions: {
            emitDecoratorMetadata: true
        },
        defaultExtension: 'js',
        paths: {
            // paths serve as alias
            'npm:': 'libs/development/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
            // other libraries
            'google-libphonenumber': 'npm:google-libphonenumber/dist/libphonenumber.js',
            'ng2-validators': 'npm:ng2-validators/bundles/ng2-validators.umd.js',
            '@auth0/angular-jwt': 'npm:@auth0/angular-jwt',
            'primeng': 'npm:primeng',
            'models': 'app/models',
            'services': 'app/services',
            'rxjs': 'npm:rxjs',
            '@ngx-translate/core': 'npm:@ngx-translate/core/bundles/core.umd.js',
            '@ngx-translate/http-loader': 'npm:@ngx-translate/http-loader/bundles/http-loader.umd.js',
            'tslib': 'npm:tslib/tslib.js',
            'amazing-time-picker': 'npm:amazing-time-picker/bundles/amazing-time-picker.umd.js',
            'ng2-img-cropper': 'npm:ng2-img-cropper',
            'ngx-toastr': 'npm:ngx-toastr/toastr.umd.js',
            'ng2-dragula': 'npm:ng2-dragula/bundles/ng2-dragula.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            'services': { main: 'index.js', defaultExtension: 'js' },
            'models': { main: 'index.js', defaultExtension: 'js' },
            'rxjs': {
                defaultExtension: 'js'
            },
            "@auth0/angular-jwt": { main: './index.js', defaultExtension: 'js' },
            "primeng": { "defaultExtension": "js" },
            "@ngx-translate/core": { "defaultExtension": 'js' },
            "@ngx-translate/http-loader": { "defaultExtension": 'js' },
            'ng2-img-cropper': { main: 'index.js', defaultExtension: 'js' },
            "ng2-dragula": { "defaultExtension": 'js' },
        }
    });
})(this);


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source