Refresh error: "Error: ENOENT"

[patricknee]

The sample project available at https://github.com/stormpath/stormpath-angular2-express-example.git works fine. Restructuring the app to something more realistic introduces a few problems. Restructured project is available at the following repository, with read me explaining the changes (in short: routing, three components routing, dedicated login page).

https://github.com/patricknee/stormpath-angular2-testbed

On the referenced projects "Login" page, refreshing the page with the Chrome refresh button results in the following error:

Error: ENOENT: no such file or directory, stat '/Users/patrick/dev/repos/stormpath-angular2-express-example/index.html'
at Error (native)

[mraible]

This seems to be a missing feature of angular-cli. When using webpack-dev-server (which angular-cli wraps), you can use --history-api-fallback true to enable the behavior you're looking for. The following comment/issue seems to confirm this issue.

angular/angular-cli#889 (comment)

[mraible]

A workaround for this is to change your Angular frontend to talk to the Express backend on separate ports. To do this, modify app.module.ts to configure the endpoint prefix and configure the modified configuration as a provider.

let config: StormpathConfiguration = new StormpathConfiguration();
config.endpointPrefix = 'http://localhost:3000';

@NgModule({
  ...
  providers: [{
    provide: StormpathConfiguration, useValue: config
  }],
  ...
})
export class AppModule { }

After making this change, you'll also need to enable CORS in express-stormpath.

1. npm install --save-dev cors
2. Modify server.js to enable cors:

var cors = require('cors');
...
var app = express();

app.use(cors({
  origin: 'http://localhost:4200',
  credentials: true
}));

3. Change package.json to remove the proxy configuration:

"start": "concurrently --raw \"ng serve\" \"node server/server.js stormpath-api\"",

[mraible]

Closing because workaround provided.

[Loona61]

I have the same issue with my project https://github.com/ZeMovie/ZeMovie_app and cant apply your fix :
"ERROR in Error encountered resolving symbol values statically. Calling function 'StormpathConfiguration', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function"
I'm a beginner with all of this , and need help.

[mraible]

@Loona61 Instead of this:

let config: StormpathConfiguration = new StormpathConfiguration();
config.endpointPrefix = 'http://localhost:3000';

Use something like this:

export function stormpathConfig(): StormpathConfiguration {
 let spConfig: StormpathConfiguration = new StormpathConfiguration();
 spConfig.endpointPrefix = 'http://api.mycompany.com';
 spConfig.meUri = '/account';
 return spConfig;
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, StormpathModule],
  bootstrap: [AppComponent],
  providers: [{
    provide: StormpathConfiguration, useFactory: stormpathConfig
  }]
})
export class DemoModule {
}

[Loona61]

already try with :

export function stormpathConfig(): StormpathConfiguration {
 let spConfig: StormpathConfiguration = new StormpathConfiguration();
 spConfig.endpointPrefix = 'http://localhost:3000';
 return spConfig;
}

but still doesnt work. No error, but all page redirect to homepage and I can't logout
POST http://localhost:3000/oauth/revoke 404 (Not Found)

[mraible]

If you're using Client API, this should work. If you're using a server integration, the only one that supports /oauth/revoke (AFAIK) is the Java SDK.

[Loona61]

look at my project : https://github.com/ZeMovie/ZeMovie_app
I committed the change
It's word for word this tutorial: https://stormpath.com/blog/angular-2-user-authentication

[mraible]

@Loona61 You need to add the proxy configuration to the startup in order for the requests to be proxied to express. See https://github.com/stormpath/stormpath-angular2-express-example/blob/master/package.json#L7

You'll also need to change your app.module.ts to something like the following:

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

import { AppComponent } from './app.component';
import { StormpathModule } from 'angular-stormpath';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    StormpathModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[Loona61]

??
If I do that I comeback to the initial error of this post:
Error: ENOENT: no such file or directory, when I try to go on /login for exemple.

That why I use your fix form #23 (comment) (using cors and removing proxy configuration)

but, thank you so much for your time.

[mraible]

@Loona61 I'm afraid you'll have to wait for /oauth/revoke support in Express then. You can track it at stormpath/express-stormpath#591.

[Loona61]

@mraible Strange, I'm the only who tried the tutorial on Angular2 ? ^^
And the /oauth/revoke support will fix the logout problem , but I still dont have access to other pages ..

Anyway , thx again for your time.

[mraible]

@Loona61 Yes, it's possible you're the only one that's tried it. 😉

You could use Angular CLI's eject feature. I had to trim scripts in package.json to make this work, then it spit out the following output:

=========================================================================
Ejection was successful.

To run your builds, you now need to do the following commands:
   - "npm run build" to build.
   - "npm run test" to run unit tests.
   - "npm start" to serve the app using webpack-dev-server.
   - "npm run e2e" to run protractor.

Running the equivalent CLI commands will result in an error.

=========================================================================
Some packages were added. Please run "npm install".

Then you should be able to modify webpack-dev-server to have --history-api-fallback true.

You could also use our Spring Boot support that supports /oauth/revoke.

[Loona61]

@mraible Between you and me, has your example ever worked once? When you wrote the tutorial? Because even the example Git does not work with me. 😉

I will try eject feature.

[mraible]

No, I don't believe it worked if you refreshed the page. However, you're not supposed to do that in a single page app, especially a tutorial! 😉

When you ship to production, you're not going to use webpack's dev server to serve things up, are you?

In my ng-demo project, I use http-server-spa to serve up the app.

"start": "http-server-spa public index.html 8080",

It also builds on every install:

"preinstall": "npm install -g http-server-spa",
"postinstall": "ng build -prod --aot && cp -r dist/* public/."

This automates things when deploying to Heroku.

[Loona61]

@mraible :/ I think I missunderstand something. I'm so newbie for now with all of this and too bad in english for speak clearly ^^

I just play with all of this in dev mode, never thinking about production for now.

I stop spamming you :) thank you again for your help and fast response.
Time to bed, tommorrow should be a better day ahah