Angular 2, routing URL path to route in the app

Question

I have an Angular 2 app hosted on S3. The routing file looks like this.

const APP_ROUTES: Routes = [
  { path: 'checkout', component: CheckoutComponent },
  { path: 'thankyou', component: ThankyouComponent },
  { path: 'lander', component: LanderComponent },
  { path: '', component: LanderComponent }
];

If the user enters www.example.com/checkout I would like it to take them to the checkout route on the app. I figured it would just do this, but S3 is giving me the error No Such Key. Is there a way to do this in Angular 2, or is it something I need to set in S3? I think the problem is S3 is going to the example.com bucket and then expecting a folder checkout. How would I have it not do that and just the app along with whatever route is specified after the URL?

score 1 · Accepted Answer · answered Jun 09 '17 at 03:11

1

RouterModule.forRoot(APP_ROUTES, { useHash: true })

answered Jun 09 '17 at 03:11

Praneeth Reddy

424
3
7

thanks. won't this cause a hash to show up in the URL though? ideally i would just like the url path – Anton Emery Jun 09 '17 at 03:43

score 0 · Answer 2 · answered Jul 07 '17 at 13:52

0

RouterModule.forRoot(APP_ROUTES)

{ useHash: true } is an option. When you add it, the URL uses Hashes. Without it, no hashes.

answered Jul 07 '17 at 13:52

Malte Finsterwalder

104
9

hc_dev · Answer 3 · 2021-02-15T22:12:38.660

Angular routing strategies

Add you routes APP_ROUTES to the router using RouterModule.forRoot:

forRoot(routes: Routes, config?: ExtraOptions)

and pass the config as ExtraOptions with useHash: true:

When true, enable the location strategy that uses the URL fragment instead of the history API.

Following table compares the different effects:

useHash	routing strategy used	e.g. routed as	e.g. supposed effect
`false`	PathLocationStrategy (without the hash)	`/checkout`	would go directly to S3 bucket and key `checkout`
`true`	HashLocationStrategy (with the hash symbol)	`#/checkout`	would stay inside your Angular app

Angular routing to bypass S3

To achieve this you could create the router as follows:

RouterModule.forRoot(APP_ROUTES, { useHash: true })

This question deals with the same issue: Angular 4 routing --prod mode

Angular 2, routing URL path to route in the app

3 Answers3

Angular routing strategies

Angular routing to bypass S3

See also