How manage routing in CEF browser ?

[C0b0ll]

Hello,

I'm working on the UI side of my server. I use Angular 5 and Bootstrap.

I'm able to display my Angular application in the game when I display the index.html in the CEF browser:

mp.events.add("Login_Show", () => {
    loginCef = mp.browsers.new("package://myComponent/dist/index.html");
});

My problem comes from the routing. When I want to display another page (e.g. login), I should use the Angular routing:

mp.events.add("Login_Show", () => {
    loginCef = mp.browsers.new("package://myComponent/dist/login");
});

When I use that, I have a 404 because the RageMP http server try to find the folder/index.html (e.g. /login/index.html).
So I tried with a .htaccess (according the Angular documentation) to rewrite the index.html rule, but it doesn't work...

My question is: How can I manage the routing to be able to display the login page of my Angular application ?

Thanks for your help :).

 

C0b0ll

[C0b0ll]

Hi back,

The solution was quite simple. The idea is to use the hash (#) in the Angular route.
Here is the Angular documentation about this topic.
Thanks @Pron 👑 for his help :).

app-routing.module.ts (Angular routing module):

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

cef.js:

mp.events.add("Login_Show", (defaultLogin) => {
    login_destroyCef();
    var url = `${baseUrl}login/${defaultLogin}`;
    loginCef = mp.browsers.new(url);
});

Server side (C#):

[Command("show")]
public void OnShowCommand(Client client, string command)
{
  NAPI.ClientEvent.TriggerClientEvent(client, "Login_Show", "DefaultLoginFromServer");
}

Note that it is a temporary ugly debugging code, but it can give a good idea about how do it correctly.

 

C0b0ll