neroniaky / angular-token Goto Github PK

I get a long list of errors as shown at the end. I am not exactly sure what is wrong since all the files it says it cannot find exists inside the "node_modules" folder.

All I have done is ,

npm install

and then add Angular2TokenService provider in app.module.ts as per the instruction page.

No other changes were made to the project.

I am using,
angular2-token: 0.2.0-beta.4
angular-cli: 1.0.0-beta.22-1
node: 6.9.1
os: linux x64

ERROR in ./~/angular2-token/src/a2t-ui/a2t-sign-in/a2t-sign-in.component.ts
Module not found: Error: Can't resolve 'a2t-sign-in.component.html' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-sign-in'
 @ ./~/angular2-token/src/a2t-ui/a2t-sign-in/a2t-sign-in.component.ts 36:22-59
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-sign-up/a2t-sign-up.component.ts
Module not found: Error: Can't resolve 'a2t-sign-up.component.html' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-sign-up'
 @ ./~/angular2-token/src/a2t-ui/a2t-sign-up/a2t-sign-up.component.ts 36:22-59
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-reset-password/a2t-reset-password.component.ts
Module not found: Error: Can't resolve 'a2t-reset-password.component.html' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-reset-password'
 @ ./~/angular2-token/src/a2t-ui/a2t-reset-password/a2t-reset-password.component.ts 32:22-66
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-reset-password/a2t-reset-password.component.ts
Module not found: Error: Can't resolve 'a2t-reset-password.component.css' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-reset-password'
 @ ./~/angular2-token/src/a2t-ui/a2t-reset-password/a2t-reset-password.component.ts 33:21-64
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-update-password/a2t-update-password.component.ts
Module not found: Error: Can't resolve 'a2t-update-password.component.html' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-update-password'
 @ ./~/angular2-token/src/a2t-ui/a2t-update-password/a2t-update-password.component.ts 34:22-67
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-ui.routes.ts
Module build failed: Error: /home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-ui.routes.ts (25,14): Exported variable 'a2tRoutes' has or is using name 'ModuleWithProviders' from external module "/home/niloy/workspace/booksquare-web/node_modules/@angular/core/src/metadata/ng_module" but cannot be named.)
    at _checkDiagnostics (/home/niloy/workspace/booksquare-web/node_modules/@ngtools/webpack/src/loader.js:115:15)
    at /home/niloy/workspace/booksquare-web/node_modules/@ngtools/webpack/src/loader.js:140:17
 @ ./~/angular2-token/src/a2t-ui/index.ts 4:0-32
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-ui.component.ts
Module not found: Error: Can't resolve 'a2t-ui.component.html' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui'
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.component.ts 17:22-54
 @ ./~/angular2-token/src/a2t-ui/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-ui.component.ts
Module not found: Error: Can't resolve 'a2t-ui.component.css' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui'
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.component.ts 18:21-52
 @ ./~/angular2-token/src/a2t-ui/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-links/a2t-links.component.ts
Module not found: Error: Can't resolve 'a2t-links.component.html' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-shared/a2t-links'
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-links/a2t-links.component.ts 21:22-57
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-shared.module.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/index.ts
 @ ./~/angular2-token/src/a2t-ui/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-links/a2t-links.component.ts
Module not found: Error: Can't resolve 'a2t-links.component.css' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-shared/a2t-links'
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-links/a2t-links.component.ts 22:21-55
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-shared.module.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/index.ts
 @ ./~/angular2-token/src/a2t-ui/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-error/a2t-error.component.ts
Module not found: Error: Can't resolve 'a2t-error.component.css' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-shared/a2t-error'
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-error/a2t-error.component.ts 22:21-55
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-shared.module.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/index.ts
 @ ./~/angular2-token/src/a2t-ui/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-headline/a2t-headline.component.ts
Module not found: Error: Can't resolve 'a2t-headline.component.css' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-shared/a2t-headline'
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-headline/a2t-headline.component.ts 18:21-58
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-shared.module.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/index.ts
 @ ./~/angular2-token/src/a2t-ui/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-form/a2t-form.component.ts
Module not found: Error: Can't resolve 'a2t-form.component.html' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-shared/a2t-form'
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-form/a2t-form.component.ts 19:22-56
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-form/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-shared.module.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/index.ts
 @ ./~/angular2-token/src/a2t-ui/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-form/a2t-form.component.ts
Module not found: Error: Can't resolve 'a2t-form.component.css' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-shared/a2t-form'
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-form/a2t-form.component.ts 20:21-54
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-form/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-shared.module.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/index.ts
 @ ./~/angular2-token/src/a2t-ui/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-form/a2t-form-field/a2t-form-field.component.ts
Module not found: Error: Can't resolve 'a2t-form-field.component.html' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-shared/a2t-form/a2t-form-field'
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-form/a2t-form-field/a2t-form-field.component.ts 37:22-62
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-form/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-shared.module.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/index.ts
 @ ./~/angular2-token/src/a2t-ui/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-form/a2t-form-field/a2t-form-field.component.ts
Module not found: Error: Can't resolve 'a2t-form-field.component.css' in '/home/niloy/workspace/booksquare-web/node_modules/angular2-token/src/a2t-ui/a2t-shared/a2t-form/a2t-form-field'
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-form/a2t-form-field/a2t-form-field.component.ts 38:21-60
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-form/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/a2t-shared.module.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-shared/index.ts
 @ ./~/angular2-token/src/a2t-ui/index.ts
 @ ./~/angular2-token/src/a2t-ui/a2t-ui.module.ts
 @ ./~/angular2-token/angular2-token.js
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

How can I send additional sign up parameters like name, age etc. to devise using registerAccount() ? Can it be customized for sending additional parameters or do I have to use the http post method separately?

I don't see anything in the docs about oauth, but I do see some configuration for OAuth with Github in the file angular2-token.service.ts:125
:D
Is OAuth support a work in progress?

Getting this error: (Angular2 RC5)

/node_modules/angular2-token/src/angular2-token.service.ts:288:38 
    Property 'queryParams' does not exist on type 'RouterState'.

Hi Just want to ask
How can i restrict user to sign-in again if the user is successfully signed-in?

For instance i signed-in and it was successful and redirect to home-page but if i navigate to sign-in url i can singed-in again.

Im new in angular2 and im using Rails5 for API
Thanks in advance

After a successful call to _tokenService.signIn, the local storage is left untouched, so the following calls to get/post/etc. never send the authentication headers.

It seems the signIn method is just missing a call to _setAuthData.

If put this (for example) query:

?client_id=random_id&config=default&expiry=1485717125&reset_password=true&token=random_token&uid=some%40email.com

to any url, property currentUserData and method userSignedIn() will be returned positively, but user not logged in.

Is it a bug, or I miss something?

This "bug" appears on password resetting, when go to the url from email.

Hi,

is there a possibility to do a redirect to sign-in before a user hasn't signed in?
And also to forbid a user to get to sign-in/sign-up pages, if he has already logged in?

So I've been using this package together with devise_token_auth and when initially i try to login with unauthorized credentials, it throws this error in the console. Is there any way to suppress it or in any ways can i deal with it? I've not understood the behavior of this error.

I've been getting this issue while i try to re-register a user. i.e. email id already used. I'm using devise_token_auth with angular2-token.

Hi guys. Can you create callback path after token validate error.
For example: User was deleted by admin and i have just error 401 (Unauthorized)

Windows 8.1 x64
node v4.5.0
npm 3.10.8

+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
`-- [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.0.14: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"
})
npm WARN @angular/[email protected] requires a peer of @angular/[email protected]
but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but
none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] b
ut none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected]
 but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected]
.1 but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/platform-bro
[email protected] but none was installed.

Hi !
I want to use your component but I use Angular-Cli.

My Code:
system-config.ts
`const map: any = {
'@angular2-material': 'vendor/@angular2-material',
'angular2-token': 'vendor/angular2-token'
};

/** User packages configuration. */
const packages: any = {};

// put the names of any of your Material components here
const materialPkgs:string[] = [
'button',
'card',
'core',
'checkbox',
'grid-list',
'icon',
'input',
'list',
'menu',
'progress-bar',
'progress-circle',
'radio',
'sidenav',
'slider',
'slide-toggle',
'button-toggle',
'tabs',
'toolbar',
'tooltip'
];

materialPkgs.forEach((pkg) => {
packages[@angular2-material/${pkg}] = {main: ${pkg}.js};
});

packages['angular2-token'] = {
main: 'angular2-token.js'
};`

angular-cli-build.ts:
`// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist//*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata//.+(ts|js|js.map)',
'rxjs/__/.+(js|js.map)',
'@angular//*.+(js|js.map)',
'@angular2-material//',
'angular2-token/__/.+(js|js.map)',
]
});
};
`
The problem is system js doesn't load all files in my dist folders, so my browser can't load the content of src..
Any idea ?
Thanks.

Not all Angular2-Token methods are covered by tests. This Issue is used to track the progress:

Http-Wapper

• .options()
• .head()
• .sendHttpRequest()

Service Methods

• .signIn() for multi user
• .signOut() for multi user
• .registerAccount() for multi user
• .deleteAccount() for multi user
• .validateToken() for multi user
• .updatePassword() for multi user
• .resetPassword() for multi user

Hi!
Do we have a possibility to send a query with _tokenService to subdomain?

I have this repository with the Angular Tour of Heroes project. Include Rails to be the Angular web API and now I would like to add the angular2-token to test authentications. However, when I include the angular2-token in the project it does not compile.

The error message is:

Dashboard: 30 Error: (SystemJS) Unexpected token <

How do I proceed to configure correctly?

main.ts

"use strict";
var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic');
var app_module_1 = require('./app.module');
var platform = platform_browser_dynamic_1.platformBrowserDynamic();
platform.bootstrapModule(app_module_1.AppModule);
//# sourceMappingURL=main.js.map

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }  from '@angular/forms';
import { HttpModule }    from '@angular/http';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { DashboardComponent } from './dashboard.component';
import { HeroSearchComponent } from './hero-search.component';
import { HeroService } from './hero.service';

import './rxjs-extensions';

import { Angular2TokenService } from 'angular2-token';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    HeroDetailComponent,
    HeroesComponent,
    DashboardComponent,
    HeroSearchComponent
  ],
  providers: [ HeroService, Angular2TokenService ],
  bootstrap: [ AppComponent ]
})

export class AppModule {

  constructor(private _tokenService: Angular2TokenService) {
    this._tokenService.init();
  }

}

When compiling with rootDir option, the module does not compile.
Error message is:
error TS6059: File '/tsc/node_modules/angular2-token/src/a2t-ui/a2t-reset-password/a2t-reset-password.component.ts' is not under 'rootDir' '/tsc/script'. 'rootDir' is expected to contain all source files.

My package.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "rootDir": "script",
    "outDir": "webroot/script",
    "watch": true
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}

After some research, I ended up here: valor-software/ng2-select#161.
There seems to be some problem with containing .ts-Files?

When using the OAuth button both in my local app as well as the demo site on angular2-token.herokuapp.com once you get to the callback, the second tab does not close nor is anything seemingly sent back to the original window. Was there some recent change that broke this functionality?

I am building an app with Angular 2 and Angular-cli. When the app attempts to compile, it is throwing an error for every HTML / CSS file within the a2t-ui folder of this angular2-token, saying they cannot be resolved. Commenting the exports for that module, Angular-cli complains about Angular2TokenService not having a provider.

I ran into a similar problem with another library I was using recently, and it was because of a change in Angular-cli's AOT compiling. I'm not very knowledgeable about how Angular-cli works unfortunately, so this is all I know!

My setup:
Angular-cli: 1.0.0-beta.22-1
Angular: 2.2.3
Angular2-token: 0.2.0-beta.4

Not sure whether there's an easy way to fix this, but here it goes. I have a user system that has all users in a single table, but they still can have specific roles. Like "admin" or "regular". Since I simply have this as a field in the database, I cannot use the built in Multiple User Types. I can however just let the backend return this field to the frontend.

So when I have a page guarded by canActivate, I could have something like this:

canActivate() {
    return this._tokenService && this._tokenService.currentUserData && this._tokenService.currentUserData['role'] === 'admin';
}

and call this in the routing.

Now here's the problem. When you sign in and click to the guarded page, it works fine. However, when you directly go to the guarded page's URL (or refresh), the canActivate checks the currentUserData before the validate_token succeeds. So when canActivate() is called, currentUserData is undefined.

Steps to reproduce:

1. Sign in
2. Go to authorized canActivate page using code above
3. Refresh

Any idea on if or how to properly solve this?

Hi!

I have question.
I use angular2-token.

I try implements canActivate with angular2-token but have problem.
On first page load (or if click reload button in browser) currentUserData is undefined.

What could be the problem?

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { Angular2TokenService } from 'angular2-token';

@Injectable()
export class CanActivateViaAuthGuard implements CanActivate {

  constructor(private authService: Angular2TokenService, private router: Router) {}

  private _canActivate: boolean = true;
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
    // this undefined
    if (this.authService.currentUserData) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

how do we save the access-token sent in a response header from a backend server so that the access token together with other credentials can be used later to consume the api? i looked into this._tokenService.init(globalOptions:{}) but then i needed to store the token after the service is initialized. How can we do it?

Any planned support for refresh token management?

My situation:

I host my frontend client at one URL.
I host my API at a different URL.

When I try to use oAuthPaths to configure the API path for oAuth, the window's root URL (not the apiPath) is prepended to the path I provide.

See angular2-token.service.ts line 519:
https://github.com/neroniaky/angular2-token/blob/master/src/angular2-token.service.ts#L519

Unless I'm missing something, as things stand I can't use Angular2-token to oauth at all. Am I doing something wrong, or at least foolish?

I'd request that either I be allowed to provide a full URL for oAuthPaths:

this._tokenService.init({
  apiPath: 'http://api.example.com/api/v1',
  oAuthPaths: {
    google: 'http://oauth.another-example.com/auth/google'
   },
})

or that oAuthPaths uses the apiPath as its route:

url = `${this._options.apiBase}/${oAuthPath}`;  // angular2-token.service.ts#L519

...if not all the time, at least optionally.

Thanks so much; it's great to see the token-auth torch passed on to angular 2!

I added :session to the permissable params, but it doesn't seem to have any effect. I still get a "Unpermitted parameter: session" message:

Started POST "/auth/sign_in" for 127.0.0.1 at 2016-09-28 01:01:41 -0400
Processing by DeviseTokenAuth::SessionsController#create as JSON
  Parameters: {"email"=>"[email protected]", "password"=>"[FILTERED]", "session"=>{"email"=>"[email protected]", "password"=>"[FILTERED]"}}
Unpermitted parameter: session

My controller:

class ProfilesController < ApplicationController
  before_action :set_profile, only: [:show, :update]

  # GET /profiles/1
  def show
    render json: @profile
  end

  # POST /profiles
  def create
    @profile = Profile.new(profile_params)

    if @profile.save
      render json: @profile, status: :created, location: @profile
    else
      render json: @profile.errors, status: :unprocessable_entity
    end
  end

  # PATCH/PUT /profiles/1
  def update
    if @profile.update(profile_params)
      render json: @profile
    else
      render json: @profile.errors, status: :unprocessable_entity
    end
  end


  private
    # Use callbacks to share common setup or constraints between actions.
    def set_profile
      if current_user
        @profile = Profile.find_by_user_id(current_user.id)
      else
        @profile = {}
      end
    end

    # Only allow a trusted parameter "white list" through.
    def profile_params
      params.require(:profile).permit(:session, :first_name, :last_name, :phone, :summary, :industry, :location)
    end
end

Hello, I'm trying to use the canActivate as below:

import { Angular2TokenService } from 'angular2-token';

const routes: Routes = [
  {
    path: 'login',
    loadChildren: () => System.import('./login/login.module')
  },
  {
    path: 'register',
    loadChildren: () => System.import('./register/register.module')
  },
  {
    path: 'pages',
    component: PagesComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: () => System.import('./dashboard/dashboard.module') },
      ... // Some other paths
    ],
    canActivate: [Angular2TokenService]
  }
];

Actually it works to not activate the routes, but even after call signIn() method, the routes can't be accessed. It always show me blanks page. So as a test I decided to check what's the response after call signIn() method and it always return false. I also tried to use the validateToken() to check something and it always return the following:

http://localhost:4200/auth/validate_token 401 (Unauthorized)

Example:

this.tokenService.init({
  apiPath: 'http://localhost:4200'
});

this.tokenService.signIn({
  email:    '[email protected]',
  password: 'secretPassword'
}).subscribe(data => {
  console.log(data); // It works. The log says that the token is updated and all is fine. Why does it still says false to canActivate?
});

console.log(this.tokenService.userSignedIn()); // false
console.log(this.tokenService.validateToken()); // 401

How can I fix it? Or is it a known issue?

Hi,
I'm getting the following error.

Property 'request' does not exist on type 'Angular2TokenService'.

Am I doing something wrong ?

import { Component  }                      from '@angular/core';
import { Router  }                              from '@angular/router';
import { RequestMethod                  from '@angular/http';
import { Angular2TokenService }      from 'angular2-token';

@Component({
    selector: 'videos',
    templateUrl: 'videos.html'
})

export class VideosComponent {

  constructor( 
    private _tokenService: Angular2TokenService, 
    private _router:Router ) {}
    
  getUserVideos() {
    this._tokenService.request({     //<========
      method: RequestMethod.Get,
      url:    'videos',
      data:   { id: 3 }
    });
   }
   
}

I'm having an issue configuring system.js to correctly find and include the a2t-ui module. It isn't having any problem with the angular2-token.js file or any of the files it requires other than the a2t-ui ones. Here's the errors I'm getting:

Navigated to http://localhost:3000/
GET http://localhost:3000/node_modules/angular2-token/src/a2t-ui/ 404 (Not Found)
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/angular2-token/src/a2t-ui/(…)
GET http://localhost:3000/node_modules/angular2-token/src/a2t-ui/a2t-shared.js 404 (Not Found)
GET http://localhost:3000/node_modules/angular2-token/src/a2t-ui/ 404 (Not Found

And here's my system.js file:

systemjs.config.txt

`(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app/client/',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.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/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'angular2-token': 'npm:angular2-token',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-token': {
main: './angular2-token.js', defaultExtension: 'js'
}
}
});
})(this);

So after I implemented angular2-token in my project I came up with something like this as architecture:

@Injectable()
export class SecurityService {
  constructor(private tokenService: Angular2TokenService) {
    tokenService.init();
  }

  signIn(email:string, password:string) {
    return this.tokenService.signIn(email, password);
  }
}

@Injectable()
export class ProductService {
  constructor(private tokenService: Angular2TokenService) { }

  getAllProducts() {
    // Angular2TokenService wrapping a HTTP GET request
    return return this.tokenService.get('http://my-server/products');
  }
}

I realized that Angular2TokenService is not only responsible for interacting with the backend in term of authentication concerns, it is also responsable to perform any authenticated HTTP requests (GET, POST, PUT, DELETE) to any endpoint after that. The way it gets this done is through wrapping the methods provided by the Http class (under the angular2 API). I think this wrapping approach might have some potentials drawbacks (actually lack of flexibility):

1. No params can be manually added to the HTTP HEADER params. (I have gone through circumstances where I needed to add some custom HTTP HEADER params, so in order to be more flexible the library should not block this possibility).
2. The wrapper HTTP requests are being done against the same serverUrl is defined for the authentication server. So you are forcing adopters to use the same server to do both things (authentication and consume resources). In some architectures the authentication server is not the same one from where you will consume resources, so bring a way to avoid this restriction it would be a nice to have.
3. You are forced to use RxJs Observables (don't make me wrong I love them and I would always use them). Anyway I would not force anyone to adopt this way of working and I'm not sure it is a concern of this library to define how adopters have to interact with the backend.

Based on the points above, I would suggest avoiding HTTP methods wrapping and provide a method like getSecureHeaders() on the Angular2TokenService, so once the user has been authenticated against backend, they can get the secure HEADERs and use them in the more convenient way to them.

@Injectable()
export class SecurityService {
  // This doesn't change
}

@Injectable()
export class ProductService {
  constructor(
    private http: Http,
    private tokenService: Angular2TokenService) { }

  getAllProducts() {
    // Angular2TokenService.getSecureHeaders() providing the headers with the required params for performing authenticated HTTP requests.
    let headers = tokenService.getSecureHeaders();

    private urls:Urls,
    // IMPORTANT: Here you I'm using angular HTTP, but any other library can be used in order to perform an Ajax HTTP request. At the same time a custom header can be added just doing `headers.set('my-custom-header', 'some value');`
    return return this.http.get('http://my-server/products', headers);
  }
}

This last approach might look like a lot of repetitive boilerplate code,
but you can easily improve the situations doing something like:

// We actually don't need this anymore
export class SecurityService { }

@Injectable()
export class ApiClient {

  constructor(
    private http:Http,
    private tokenService: Angular2TokenService) {

    this.tokenService.init();
  }

  signIn (email:string, password:string) {
    return this.tokenService.signIn(email, password);
  }

  get(url:string, customHeaders?: Header) {
    let secureHeaders = this.tokenService.getSecureHeaders();
    let headers = customeHeaders.merge(secureHeaders);
    return this.http.get(url, { headers: headers });
  }

// Most of the services will look like this one.
@Injectable()
export class ProductService {
  let url = 'http://my-server/products';

  constructor(private apiClient:ApiClient) { }

  getAllProducts() {
    return return this.apiClient
                      .get(url, {"my-custom-header":"what ever value"})
                      .map((response:Response) => response.json() as Product)
                      .catch(this.handleError);
  }

  createProduct(product:Product) {
    return this.apiClient
               .post(url, product)
               .map((response:Response) => response.json() as Product)
               .catch(this.handleError);
  }
}

IMPORTANT: this is just a suggestion and it's very likely that the code here can be improved. My main point here is try to bring a concern about flexibility and just an idea of how this can be improved. 😊

Hi,

Trying to setup my first project using angular2-token and oauth, I've reached to a strange dead-end.
Whenever I try to login (with google for instance) I get this URL built (at the method _buildOAuthUrl)
${window.location.origin}/${oAuthPath}?omniauth_window_type=${windowType}&auth_origin_url=${encodeURIComponent(callbackUrl)}

When the window.open method fires it shows:
Cannot GET /$%7Bwindow.location.origin%7D/$%7BoAuthPath%7D?omniauth_window_type=${windowType}&auth_origin_url=${encodeURIComponent(callbackUrl)}

It feels like a stupid tweak would solve everything, but I can't seem to find it.
Can you help?

I'm using version angular2-token 0.2.0-beta.6
My API runs at: http://localhost:3000/api/v1
My Angular2 runas at: http://localhost:8000

Here is my setup:

this._tokenService.init({
            apiPath: "http://localhost:3000/api/v1",
            oAuthPaths: {
                facebook: '/auth/facebook',
                google:   '/auth/google'
            }
        });

For example, I have this code snippet:

this._tokenService
      .put(`${environment.API}/auth/invitation`, form.value)
      .subscribe(res => {
       //Trow error
        this._tokenService.currentUserData = res.json().data;
      });

Or for example, I am using _tokenService.currentUserData?.username in header and I can update the current user username, but the value in header won't change.

How can I update currentUserData?

Thanks for your advance :)

For example, we use the form as FormGroup for SignIn. Then we have incorrect data gets to BackEnd.
For example we have SignIn form, it contains the next object -

{
  email:"[email protected]"
  password:"123456789"
}

And when sending to RailsApp, we get such parameters -

Parameters: {"email"=>{"email"=>"[email protected]", "password"=>"[FILTERED]"}, 
"session"=>{"email"=>{"email"=>"[email protected]", "password"=>"[FILTERED]"}}}

I think should overwrite signIn/signUp methods such way, so that they can pass form.value method.
What do you think about it?

Example signIn.component.ts (code such similar with article about FormValidataion

import { Component OnInit} from '@angular/core';
import {Router} from '@angular/router';
import { Angular2TokenService } from 'angular2-token';
import { AuthData } from '../shared/auth/auth';
import {FormBuilder, Validators, FormGroup} from '@angular/forms';

@Component({
  moduleId: module.id,
  selector: 'sign-in',
  templateUrl: 'sign-in.component.html'
})
export class SignInComponent implements OnInit{
  signInForm: FormGroup;
  formErrors = {
    'email': '',
    'password': ''
  };

  validationMessages = {
    'email': {
      'required': 'Name is required'
    },
    'password': {
      'required': 'Password is required'
    }
  };
  private errors: string[];

  constructor(private _tokenService: Angular2TokenService,
              private router: Router,
              private fb: FormBuilder) { }

  ngOnInit(): void {
    this.buildForm();
  }

  buildForm(): void {
   this.signInForm = this.fb.group({
     'email': [this._authData.email,[
       Validators.required
      ]
     ],
     'password': [this._authData.password]
   });
    this.signInForm.valueChanges
      .subscribe(data => this.onValueChanged(data));
    this.onValueChanged();
  }

  onValueChanged(data?:any) {
    if (!this.signInForm) {return;}
    const form = this.signInForm;

    for (const field in this.formErrors) {
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }

  // Submit Data to Backend
  onSubmit() {
    this._tokenService.signIn(
      this.signInForm.value
    ).subscribe( res => this.router.navigate(['/']),
                 err => this.errors = err.json().errors);
  }

Example signIn.component.html

<h2>Sign in</h2>
    <form class="ui form" id="new_user" (ngSubmit)="onSubmit()" [formGroup]="signInForm">
    <div class="field">
      <input placeholder="username" autofocus="autofocus"  type="text" formControlName="email" required>
    </div>

    <div class="field">
      <input placeholder="password" autocomplete="off"  type="password" formControlName="password" required>
    </div>

    <div class="actions field">
      <button [disabled]="!signInForm.valid" type="submit" class="ui primary button large fluid">Sign In</button>
    </div>
  </form>

Hi,

I installed angular2-token based as the installation guide, somehow I get this error on the console.

I can see that the package is installed under node_modules.

I would very much appreciate any help or guidance you are able to give me.

FIXED: by adding
'angular2-token' :'npm:angular2-token/src/angular2-token.service.js',
to "systemjs.config.js"

There is a bug here:
https://github.com/neroniaky/angular2-token/blob/master/src/angular2-token.service.ts#L333
First of all, when a password reset redirect url comes from the API, it sends the new headers in the URL, so queryParams should be used here.

Also, queryParams is an Observable, so here params would be undefined.

I'm trying to run the tests but I can't successfully install the npm packages. It fails when running npm run build. I only downloaded the repository and tried to install the packages. Am I missing something?

I have been developing my own implementation of an Angular2 application that works with devise token auth for Rails. Recently I have come across a bug where my token invalidates when I am using either Safari or an iOS web view. I wanted to see if this problem persists in this project and it does. To replicate simply open the demo (https://angular2-token.herokuapp.com) in Safari, login, and keep requesting to access private resource (or validate token) with an average timed pause between each request. If you wait at least 15s between a request I can almost guarantee the token will become invalidated and throw a 401.

I am wondering if anyone has seen this and whether or not the error is the fault of devise/rails, angular2, or the project itself.

After I followed all the steps in the README.md file I was still getting 404 GET /angular2-token right after I run npm start. Since I'm using system.js config instead of webpack (as the example in github) I added these lines on my systemjs.config.js file.

diff --git a/systemjs.config.js b/systemjs.config.js
index 1921a43..c6f118e 100644
--- a/systemjs.config.js
+++ b/systemjs.config.js
@@ -9,15 +9,15 @@
     'app':                        'app', // 'dist',

     '@angular':                   'node_modules/@angular',
+    'angular2-token':             'node_modules/',
   };

   // packages tells the System loader how to load when no filename and/or no extension
   var packages = {
     'app':                        { main: 'main.js',  defaultExtension: 'js' },
     'rxjs':                       { defaultExtension: 'js' },
+    'angular2-token':             { main: 'angular2-token/angular2-token', defaultExtension: 'js' }
   };

and It passed, but I got this issue

(SystemJS) Unexpected token

So I found that inside node_modules/angular2-token/angular2-token.js there was this line

__export(require('./lib/angular2-token-ui/angular2-token-ui.module'));

Once I removed it, it started working fine 😊

IMPORTANT:

1. I didn't find when that line was set (I got the project source code)
2. I installed the library through npm install angular2-token --save

When I try to use _tokenService.currentUser, I get:

Property 'currentUser' does not exist on type 'Angular2TokenService'.

Any ideas?

The current implementation of a get request is like that:

get(path: string): Observable<Response>

The implementation of the @angular/http class is, that you can also pass parameters and things with the get request:

get(url: string, options?: RequestOptionsArgs): Observable<Response>;

This could be used, if you want to add parameters as an object like this:

this.http.get('my/url/path', { search: params }

I would suggest to extend the get request with an optional options-parameter, since this class could be a simple wrapper which just decorates the standard-requests with the headers.

maybe there is a reason why it is not done like that and before i start coding something i wanted to open the discussion. What do you think?

After 0.2.0 version installation error message
a2t-ui.forms.ts:8 Uncaught TypeError: WEBPACK_IMPORTED_MODULE_1__.f is not a constructor(…)
is appear.

Thanks and best,
Chris

I have two models, User and Profile, and I want my Profile Service to be able to call the API using the current logged-in users' ID. I can't figure out how to do this. Any advice is appreciated. Here is my service:

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';

@Injectable()
export class ProfileService {

  constructor(private http: Http) {}

  find() {
    return this.http.get('/api/user/22/profile.json');
  }

}

Basically, I need

'api/user/22/profile.json'

to behave like

'api/user/' +  user.id + '/profile.json

The package.json main field points to the angular2-token.js, that loads files from the src folder. So despite the fact that there're compiled .js files in the lib folder, when webpack in a project that uses the package loads it, it actually loads .ts files (compiling them with use configured ts loader, if any). Which means that if a project doesn't use TypeScript (and doesn't have a TS loader configured for webpack), the package won't work.

Dependencies should be updated to Angular2 RC5.

I've followed the installation procedures from the documentation. However, right after I import Angular2TokenService into my main module, i have the aforementioned error in my browser console (both chrome and firefox). This stops the angular2 application from loading. What could be its reason?

I tried quckstart and received this error:
metadata_resolver.js:499Uncaught Error: Can't resolve all parameters for A2tFormComponent: (?).
at CompileMetadataResolver.getDependenciesMetadata (http://localhost:4200/main.bundle.js:24402:19)
at CompileMetadataResolver.getTypeMetadata (http://localhost:4200/main.bundle.js:24303:26)
at CompileMetadataResolver.getDirectiveMetadata (http://localhost:4200/main.bundle.js:24078:28)
at http://localhost:4200/main.bundle.js:24147:49
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/main.bundle.js:24140:44)
at http://localhost:4200/main.bundle.js:24128:50
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/main.bundle.js:24115:44)
at http://localhost:4200/main.bundle.js:24128:50CompileMetadataResolver.getDependenciesMetadata @ metadata_resolver.js:499CompileMetadataResolver.getTypeMetadata @ metadata_resolver.js:400CompileMetadataResolver.getDirectiveMetadata @ metadata_resolver.js:175(anonymous function) @ metadata_resolver.js:244CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:237(anonymous function) @ metadata_resolver.js:225CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:212(anonymous function) @ metadata_resolver.js:225CompileMetadataResolver.getNgModuleMetadata @ metadata_resolver.js:212RuntimeCompiler.compileComponents @ runtime_compiler.js:133RuntimeCompiler.compileModuleAndComponents @ runtime_compiler.js:71RuntimeCompiler.compileModuleAsync @ runtime_compiler.js:62PlatformRef.bootstrapModuleWithZone @ application_ref.js:302PlatformRef.bootstrapModule @ application_ref.js:284(anonymous function) @ main.ts:12__webpack_require_ @ bootstrap 5760104…:52(anonymous function) @ zone.js:1426__webpack_require__ @ bootstrap 5760104…:52webpackJsonpCallback @ bootstrap 5760104…:23(anonymous function) @ main.bundle.js:1

I'm writing a somewhat in-depth tutorial on Angular2-Token with devise_token_auth for my book Angular for Rails Developers.

I'm kind of stuck on a certain step. After I use Angular2-Token to sign in, if I refresh the page, _tokenService.currentUserData is no longer present.

How do I get the user to stay logged in?

I`m having a hard time to make it work with https://github.com/mgechev/angular-seed
Anyone did it successfully already?

How initialize for use Bearer token?
I don't understand how use it.