Angular2-jwt after rc0 broken

theromis · 2016-09-29 17:51:43 UTC

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?

niallr · 2016-09-29 23:58:26 UTC

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

ecureuill · 2016-09-30 00:22:52 UTC

// 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

cyberbobjr · 2016-09-30 11:20:57 UTC

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’.

unfg · 2016-09-30 15:17:35 UTC

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

ecureuill · 2016-09-30 18:36:16 UTC

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

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

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

mhartington · 2016-09-30 18:44:01 UTC

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.

lagear · 2016-09-30 18:46:39 UTC

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]
},
]

cyberbobjr · 2016-09-30 18:54:22 UTC

It’s works with ionic serve, but it doesn’t works with ionic run android or ios

ecureuill · 2016-09-30 19:21:17 UTC

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

cyberbobjr · 2016-09-30 20:08:02 UTC

Hi everybody,
finally i find a trick and it’s work with ionic run android

> 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 {
> }

rapropos · 2016-09-30 20:13:43 UTC

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

cescoferraro · 2016-10-01 16:20:56 UTC

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

lagear · 2016-10-02 14:52:52 UTC

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 { }

lagear · 2016-10-02 15:01:49 UTC

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 { }

theromis · 2016-10-02 19:24:45 UTC

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')}
      ]
    };
  }
}

Hughred22 · 2016-10-03 01:39:01 UTC

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…

ecureuill · 2016-10-03 02:29:35 UTC

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).

cyberbobjr · 2016-10-03 05:28:50 UTC

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

Hughred22 · 2016-10-03 16:56:48 UTC

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)

Angular2-jwt after rc0 broken

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

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

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

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