Angular2 + Laravel5 - how to correct organize routing between them?

Question

I play with L5 and A2.

I have 2 routes for L5: '/' (base) and '/edit'. I have 2 routes for A2: '/' (base) and '/edit' (name: 'Edit');

When i will load blablabla.com page, doing some stuff - Angular2 will redirecting me by '/edit' Angular2 route on blablabla.com/edit url. At this A2 route - some A2 component will loaded.

But, when i stay on blablabla.com/edit url, if i reload page - on url blablabla.com/edit running Laravel5 route '/edit' with 404 error.

At this situation how i can connect L5 route '/edit' with A2 route '/edit'?

score 3 · Accepted Answer · edited May 23 '17 at 12:02

In fact, it's normal that you have a 404 error when refreshing your application since the actual address within the browser is updating (and without # / hashbang approach). By default, HTML5 history is used for reusing in Angular2.

If you want not having a 404 error, you need to update your server to serve the index.html file for each route path you defined.

If you want to switch to the HashBang approach, you need to use this configuration:

import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, Location, HashLocationStrategy } from 'angular2/router'; 

import {MyApp} from './myapp';

bootstrap(MyApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy}
]);

In this case, when you refresh the page, it will be displayed again (but you will have a # in your address).

This link could help you as well: When I refresh my website I get a 404. This is with Angular2 and firebase.

Regarding Lavarel, you need to configure redirects: Redirect::to($route) for each elements of your Angular2 routes.

These links could help you:

Hope it helps you, Thierry

Angular2 + Laravel5 - how to correct organize routing between them?

1 Answers1