Angular JS 2 route with sails js

Question

I'm trying to set up a sails js app with Angularjs 2 in front. I Want to use the angularJS system routing and no sails js system.

How can I disable the sails route and let angular control them ? This is my app.component.ts where I declare the route /account

import {View, Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {AccountComponent}   from './account.component';

@Component({
    selector: 'my-app',
    template: `<router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig ([
    {path: '/account', name: 'Account', component: AccountComponent}
])


export class AppComponent {

}

If I remove the route in config/routes.js, this doesn't work. I try to disable some options in config.blueprint.js but nothing good.

I want to use Angular route to have an SPA and don't reload pages.

Thanks.

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

In fact, it's normal that you have an error when trying to access route directly without having a configuration on the server. In fact the actual address of a route is updating (and without # / hashbang approach) by Angular2 without any interaction with the server when using a route. The path doesn't exist on the server. If you load the HTML entry point file, everything will work fine. The only problem is when you try to access directly a route from its path...

By default, HTML5 history is used by Angular2. If you want not having this problem, 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 or access directly the page, it will be displayed again (but you will have a # in your address).

This link could help you as well:

Angular 2 : 404 error occur when i refresh through Browser

Hope it helps you, Thierry

score 1 · Answer 2 · answered Feb 24 '16 at 18:09

1

I have to return "/" for all routes in config/routes.js and let angular to display others view.

answered Feb 24 '16 at 18:09

altyx

31
3

I faced a similar situation and I managed to serve an Angular 12 app from SailsJS as a static resource by overriding all front end routes with a GET to the app bundle. Thank you for the hint. – Numant Santz Jun 29 '21 at 22:01

Angular JS 2 route with sails js

2 Answers2