Angular on SCP - Routed apps must fallback to index.html

[christoffer_fuss]

Hello,

I am trying to host an Angular6 application on SCP and it works fine.

What is not working so far is to start the application with dynamic routes, for example:

https://launchpad-<account>.dispatcher.hana.ondemand.com/start

Here I get the error: "404 - Not found"

If a call my application without the "/start" it works fine because I am redirected to index.html first and afterwards to "/start".

How can I force the server to send every dynmaic route first to index.html?

As described here there is no solution which works on every server and the server has do be configured for that.

But I dont know which kind of server SCP is using for HTML5 applications?

In my "neo-app.json" I configured :

  "welcomeFile": "index.html",
  "sendWelcomeFileRedirect": true

But this not working for dynamic routes. Anybody an idea how to fix this?

Best Regards,

Chris

[gregorw]

Hi Chris,
I think that issue can't be solved with HTML5 apps. I would try to deploy the Angular app as a node.js app in the Cloud Foundry environment.
Best regards
Gregor

[christoffer_fuss]

Is this really not possible in Neo enviroment? We dont have access to Cloud Foundry....

[Ivan-Mirisola]

Hi Christoffer,

In a Neo application you cannot specify the error pages for Angular. In SAPUI5 you could catch the error pages on a application as there is a standard feature implemented that you specify the pages to be displayed when one has bypassed the navigation routes in the manifest.json of your application. But that is specific to SAPUI5 applications.

Angular applications in Neo use only neo-app.json and you don't have access to the http server to create your own logic when invalid paths are entered - so there is no other way around it.

The only way around it by serving the application in a more controlled way in Neo - such as a Java Application.

There is the CF option where you can serve the application in any way you want, including NodeJS.

You could try to avoid the 404 errors by implementing the Hash Location Strategy on Angular in order to avoid the path suffixes, so your app will never allow paths anyway. Instead, the routeLink will open something like '#!/start' instead. Which is the same way SAPUI5 handles routing and is a bit more "elegant" than simply entering the relative paths in the URL.

However, you would still have the 404 error when entering an invalid path on the url such as "/start" instead of "#!/start".

If you are using the app-routing.module.ts, here is how you configure your app to do it:

...
import {APP_BASE_HREF, HashLocationStrategy, LocationStrategy} from '@angular/common';
...

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    { provide: APP_BASE_HREF, useValue: '!' },
    { provide: LocationStrategy, useClass: HashLocationStrategy },
  ]  
})

Regards,
Ivan

[christoffer_fuss]

Hi Ivan,

thanks again for your help. But I dont have this option to move to CF right now. Maybe your answer is helping me later.

Best regards,

Chris