Angular 2 for non-SPA (static pages)

Question

All the samples I come across on the web are SPAs, I'm wondering if Angular 2 has a build-in way to handle static pages. Specifically, let's say I use Angular 2 to build a blog site, and I wish users could go directly to a particular post without going through the default home component, (which also incidentally, loads a lot of server side config). I mean, how do I enable user to go to http://server/posts/:id directly, without 404 showing up or configure a ** page for unreachables.

Just need some directions, thanks.

Let's say my folder structure goes like this

/posts
/shared
/users

and my main router goes like this

@RouteConfig([
    { path: './shared/...', name: 'Shared', component: SharedComponent },
    { path: './users/...', name: 'Users', component: UserComponent },
    { path: './posts/...', name: 'Posts', component: PostComponent }
])

and post router goes like this

@RouteConfig([
    { path: '/', name: 'List', component: ListComponent, useAsDefault: true },
    { path: '/:id', name: 'Post', component: PostComponent },
    { path: '/:id/gallery', name: 'Gallery', component: GalleryComponent },
    { path: '/:id/comments', name: 'Comments', component: CommentListComponent },
])

It's quite unclear to me what the question is about. A guess is http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser. You might want to set `HashLocationStrategy` (see answer of SimonHawesome) — Günter Zöchbauer, Mar 30 '16 at 05:46
This might help - http://stackoverflow.com/questions/35863819/non-spa-with-angular2 — micronyks, Mar 30 '16 at 06:02
I'm okay with normal Angular 2 routing, what I need is typing into the address bar http://server/post/123 without error 404 showing up. — Stone, Mar 30 '16 at 06:34
HashLocationStrategy does not solve this problem, because when I copy the address http://server/post/123 to another browser tab, I'd get an empty page, I think because this bypasses some modules loaded at boot.ts or app.component. I'm just wondering if there's some default build-in methods that can help me get around this problem. — Stone, Mar 30 '16 at 06:45
Then you need to configure your server to support HTML5 pushState. — Günter Zöchbauer, Mar 30 '16 at 06:47
I thought about pushState, but isn't that just default unreachable urls to index.html? that's not what I want. I mean, if when someone type http://server/post/123 into the address bar and enter, the routing information in app.component, which is under the root directory, is skipped, when I configure pushState, doesn't that just tell the browser to default to index.html, and doesn't show the actual post itself? Still kinda confused on how Angular 2 handles mixed spa and non-spa projects. — Stone, Mar 31 '16 at 02:00

score 1 · Answer 1 · answered Apr 21 '17 at 13:47

I think I understand your problem. You need to configure your web server software (e.g., Apache) a certain way, this is not an Angular2 configuration issue. You need to configure your web server so that whenever it receives url requests like / or /posts or /posts/123 that it serves your main index.html file. Then Angular will automatically show the right content when it starts up.

score 0 · Answer 2 · answered Mar 30 '16 at 06:07

0

Seems like you are looking for routers. Have a look at the docs: Off. Guide and Router Tutorial. It's used like this:

@Component({ ... })
@RouteConfig([
  {path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
  {path:'/heroes',        name: 'Heroes',       component: HeroListComponent},
  {path:'/hero/:id',      name: 'HeroDetail',   component: HeroDetailComponent}
])
export class AppComponent { }

answered Mar 30 '16 at 06:07

letmejustfixthat

3,379
2
15
30

That I understand, if I put a link heroes in the appcomponent template, I will link to that page (sort of, being SPA), but what I need is to type http://server/hero/123 into the address bar, and the page still loads up, without error 404 – Stone Mar 30 '16 at 06:36

score 0 · Answer 3 · answered Mar 30 '16 at 06:38

Its quite hard to tell the perfect answer as you are asking for without going through the default home component(I am not sure what do you mean by that).

AFAIK, in angular2 you can have one component which can define/set routes for other components and so their relevant view.

Let's say after defining routes in a single component,

if you go with the HashLocationStrategy like below,

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

Angular2 will be able to provide you required route and so you don't need to configure server with some extra route setting. Then, you will be able to access required resource at http://server/#/posts/:id

If you go with PathLocationStrategy like below,

bootstrap(AppComponent, [provide(APP_BASE_HREF).toValue(location.pathname)]);

For this configuration angular2 will not be able to provide you required route and so server side routing needs to be configured. Then, you will be able to access required resource at http://server/posts/:id

So In short if required/asking path exits, it will take users to that path.

score 0 · Answer 4 · answered May 01 '17 at 19:49

I know I'm a year late, but your issue is that whatever web-server you're using needs to rewrite urls to the index.html of your web-app. If it did that, then when you went to server/hero/123, the web-server would direct it to the index.html of your web-app, and your web-app would use the router to go to the HeroDetail component, without showing the default home component. Because you don't have the rewrite, the web-server is not even starting the angular app and is instead trying to serve the file server/hero/123, which doesn't exist and therefore it gives you a 404.

FYI this would still be a SPA (single page application).

Angular 2 for non-SPA (static pages)

4 Answers4