Angular2-jwt after rc0 broken

Just put my code here

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule, XSRFStrategy, CookieXSRFStrategy } from '@angular/http';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { TabsPage } from '../pages/tabs/tabs';
import { ProfilePage } from '../pages/profile/profile';
import { RoomListPage } from '../pages/room-list/room-list';
import { PeoplePage } from '../pages/people/people';
import { PeopleFilterPage } from '../pages/people-filter/people-filter';
import { ProfileDetailPage } from '../pages/profile-detail/profile-detail';
import { ContactsPage } from '../pages/contacts/contacts';
import { RoomPage } from '../pages/room/room';
import { AuthConfig, AuthHttp  } from 'angular2-jwt';
import { AuthService } from '../providers/auth-service';

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp),
    HttpModule
/*    FormsModule,
    ReactiveFormsModule,*/
  ],
  providers: [
    AuthService,
  ],
  declarations: [
    MyApp,
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ]
})

export class AppModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: AppModule,
      providers: [
        { provide: AuthConfig, useValue: new AuthConfig({
          noJwtError: true,
          headerPrefix: 'JWT',
          globalHeaders: [{'Accept': 'application/json'}],
        })},
        {provide:XSRFStrategy, useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')}
      ]
    };
  }
}

with ionic serve getting error in console:

error_handler.js:45EXCEPTION: Error in ./TabsPage class TabsPage_Host - inline template:0:0 caused by: No provider for AuthHttp!ErrorHandler.handleError @ error_handler.js:45(anonymous function) @ application_ref.js:210t.invoke @ polyfills.js:3onInvoke @ ng_zone_impl.js:43t.invoke @ polyfills.js:3e.run @ polyfills.js:3(anonymous function) @ polyfills.js:3t.invokeTask @ polyfills.js:3onInvokeTask @ ng_zone_impl.js:34t.invokeTask @ polyfills.js:3e.runTask @ polyfills.js:3i @ polyfills.js:3
error_handler.js:47ORIGINAL EXCEPTION: No provider for AuthHttp!

angular2-jwt deveopers have same discussion


but it doesnā€™t work

can somebody help me with that?

1 Like

I am experiencing a similar issue so would also love some help with this.

// app/app.module.ts

import { NgModule }            from '@angular/core';
import { BrowserModule  }      from '@angular/platform-browser';
import { AUTH_PROVIDERS }      from 'angular2-jwt';

import { AppComponent }        from './app.component';
import { HomeComponent }       from './home.component';
import { routing,
         appRoutingProviders } from './app.routes';

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent
    ],
    providers: [
        appRoutingProviders,
        AUTH_PROVIDERS
    ],
    imports: [
        BrowserModule,
        routing
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

From Auth0 documentation for Angular2

No, it doesnā€™t work.
This is my output console log:

ngc error: Error: Error at /Users/xxx/yyyy/gse_mobile/.tmp/app/app.module.ngfactory.ts:175:32: Module ā€˜ā€œ/Users/xxx/yyyy/gse_mobile/node_modules/angular2-jwt/angular2-jwtā€ā€™ has no exported member ā€˜AUTH_PROVIDERSā€™.

1 Like

Hi everybody. I have the same issue.
It works when i lanch app with ā€œionic serveā€. But when i try to build app it throw exception:

ngc error: Error: Error at /var/www/desk-mobile/.tmp/app/app.module.ngfactory.ts:174:32: Module 'ā€œ/var/www//node_modules/angular2-jwt/angular2-jwt"ā€™ has no exported member ā€˜AUTH_PROVIDERSā€™.
Error at /var/www/
/.tmp/app/app.module.ngfactory.ts:404:37: Module 'ā€/var/www//node_modules/angular2-jwt/angular2-jwt"ā€™ has no exported member ā€˜AUTH_PROVIDERSā€™.
Error at /var/www/
/.tmp/app/app.module.ngfactory.ts:405:84: Cannot use ā€˜newā€™ with an expression whose type lacks a call or construct signature.
at check (/var/www//node_modules/@angular/tsc-wrapped/src/tsc.js:31:15)
at Tsc.typeCheck (/var/www/
/node_modules/@angular/tsc-wrapped/src/tsc.js:86:9)
at /var/www/***/node_modules/@angular/tsc-wrapped/src/main.js:33:23
at process._tickCallback (internal/process/next_tick.js:103:7)
at Module.runMain (module.js:592:11)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3

When I test it, I follow the steps bellow, thatā€™s why I didnā€™t notice the bug

  1. ionic build
  2. ionic serve
  3. import AUTH_PROVIDERS to app.module.ts (SAVE)
  4. add AUTH_PROVIDERS at provider array in app.module.ts (SAVE)
  5. import tokenNotExpired to my service class (empty class, just with a console.log in constructor) (SAVE)
  6. import and inect my service to my component (SAVE)

No error was presented by ionic serve (terminal)
So, I presumed that it was working.

The main issue here is that angular2-jwt is not exported out as a es2015 module, but rather commonJs.

This has been mentioned a few times for a few different packages out there. Please follow the github issue tracker to track their status.

1 Like

This config work for me:

in app.modile.ts

///JWT Config
import { AuthHttp, AuthConfig, AUTH_PROVIDERS } from ā€˜angular2-jwtā€™;
import { provideAuth } from ā€˜angular2-jwtā€™;
import { Http } from ā€˜@angular/httpā€™;
ā€¦

inside @NgModule

providers: [
Storage,
FormBuilder,
{
provide: AuthHttp,
useFactory: (http) => {
return new AuthHttp(new AuthConfig({
noJwtError: true
}), http);
},
deps: [Http]
},
]

1 Like

Itā€™s works with ionic serve, but it doesnā€™t works with ionic run android or ios

This avoid the jwt problem, but now Iā€™m facing another.
Iā€™m not sure if this new error is a consequence of the latterā€¦

I write a post in Auth0 forum, if you guys want to follow here is the link
https://auth0.com/forum/t/ionic2-rc0-angular2-jwt-module-auth0-not-defined/3858

Hi everybody,
finally i find a trick and itā€™s work with ionic run android :slight_smile:

> import {NgModule} from "@angular/core";
> import {IonicApp, IonicModule, MenuController} from "ionic-angular";
> import {AuthHttp, AUTH_PROVIDERS, AuthConfig} from "angular2-jwt";
> import {MyApp} from "./app.component";
> import {Auth} from "../providers/auth/auth";
> import {Produits} from "../providers/produits/produits";
> import {ConstsDev} from "../providers/consts/constsdev";
> import {ProduitsPage} from "../pages/produits/produits";
> import {ProduitsdetailsPage} from "../pages/produitsdetails/produitsdetails";
> import {LoginPage} from "../pages/login/login";
> import {Http} from "@angular/Http";

> export function getAuthHttp(http) {
>     return new AuthHttp(new AuthConfig({
>       noJwtError: true
>     }), http);
> }

> @NgModule({
>   declarations: [
>     MyApp,
>     ProduitsPage,
>     ProduitsdetailsPage,
>     LoginPage
>   ],
>   imports: [
>     IonicModule.forRoot(MyApp)
>   ],
>   bootstrap: [IonicApp],
>   entryComponents: [
>     MyApp,
>     ProduitsPage,
>     ProduitsdetailsPage,
>     LoginPage
>   ],
>   providers: [Auth, MenuController, Produits, ConstsDev, AuthHttp,
>     {
>       provide: AuthHttp,
>       useFactory: getAuthHttp,
>       deps: [Http]
>     }]
> })
> export class AppModule {
> }
4 Likes

Maybe the namedExports feature documented here can help you work around this.

I have had problems integrating jwt-decode into my RC0 app.

Here it is what worked for me

npm install --save-dev jwt-decode @types/jwt-decode

/// <reference path="../../node_modules/@types/jwt-decode/index.d.ts" />
import JwtDecode from "jwt-decode"

As @mhartington said this is due to the fact that those are commonjs modules

I tried your config, but I have error when build for ios:

Module ā€˜"/Users/marcosmarcelo/Documents/Lagear/ionic/leslie/node_modules/angular2-jwt/angular2-jwt"ā€™ has no exported member ā€˜AUTH_PROVIDERSā€™.
Error at /Users/marcosmarcelo/Documents/Lagear/ionic/leslie/.tmp/app/app.module.ngfactory.ts:403:37: Module ā€˜"/Users/marcosmarcelo/Documents/Lagear/ionic/leslie/node_modules/angular2-jwt/angular2-jwt"ā€™ has no exported member ā€˜AUTH_PROVIDERSā€™.

So, /www/build/main.jsā€™ doesnā€™t create.

No errors if run ionic serve.

My app.component.ts is:


import { NgModule } from ā€˜@angular/coreā€™;
import { IonicApp, IonicModule } from ā€˜ionic-angularā€™;
import { MyApp } from ā€˜./app.componentā€™;
import { AboutPage } from ā€˜ā€¦/pages/about/aboutā€™;
import { ContactPage } from ā€˜ā€¦/pages/contact/contactā€™;
import { HomePage } from ā€˜ā€¦/pages/home/homeā€™;
import { TabsPage } from ā€˜ā€¦/pages/tabs/tabsā€™;

///JWT Config
import { AuthHttp, AuthConfig, AUTH_PROVIDERS } from ā€˜angular2-jwtā€™;
//// import { provideAuth } from ā€˜angular2-jwtā€™;
import { Http } from ā€˜@angular/httpā€™;
import { AuthService } from ā€˜ā€¦/providers/authā€™;

export function getAuthHttp(http) {
return new AuthHttp(new AuthConfig({
noJwtError: true
}), http);
}

@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,

],
providers: [
AuthService,
AUTH_PROVIDERS,
AuthHttp,
{
provide: AuthHttp,
useFactory: getAuthHttp,
deps: [Http]
}]
})
export class AppModule { }

My mistake, removing AUTH_PROVIDERS, does the trick.


@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,

],
providers: [
AuthService,
AuthHttp,
{
provide: AuthHttp,
useFactory: getAuthHttp,
deps: [Http]
}]
})
export class AppModule { }

Non of the above examples not setting angular2-jwt config.

I need to do this:

export class AppModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: AppModule,
      providers: [
        { provide: AuthConfig, useValue: new AuthConfig({
          noJwtError: true,
          headerPrefix: 'JWT',
          globalHeaders: [{'Accept': 'application/json'}],
        })},
        {provide:XSRFStrategy, useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')}
      ]
    };
  }
}

What about the localStorage issue. As now we need to import { Storage } from ā€˜@ionic/storageā€™;

This line error: local: Storage = new Storage(LocalStorage); for my appā€¦

Iā€™m using @cyberbobjr config and it made possible to use jwt.
For now, I just test in browser version.

Instead local: Storage = new Storage(LocalStorage), use constructor(local: Storage) {}
There is no need to initiate the variable (at least is working for me).

1 Like

Hi, i think you should open a new topic, maybe it will be easer for the community to find your q/a ?

1 Like

Sorry but his is not solving the problem for me. I still have error:

Error: Module /Users/hughred22/nodeapp/probook/Ionic2/Mybuild/youtubebbw-rc-testing/bbwworkbook/node_modules/angular2-jwt/angular2-jwt.js does not export AuthHttp (imported by /Users/hughred22/nodeapp/probook/Ionic2/Mybuild/youtubebbw-rc-testing/bbwworkbook/.tmp/app/app.module.js)