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)