1

I'm having an issue working on routing around my angular app. I'm starting to think I probably just missed something simple and hoping someone can sanity check my routing to make sure I'm not doing something stupid, or if this is just an expected fallback of the development server and something I would address in prod with .htaccess redirects or something similar.

The issue:

  • When using ng serve to deploy the development server I cannot access routes that are registered as path: 'post/:postid' in my routing module via direct links. Accessing these through appropriate routerLinks works as expected.
  • When using useHash it works as expected

Example

  • If I enter the url directly, such as http://localhost:4200/post/1 I get nothing served, with 404 errors to various .js files. Example GET http://localhost:4200/post/runtime.js net::ERR_ABORTED 404 (Not Found) (this changes occasionally, sometimes there are multiple files)
  • If I follow my routerLink to the same page, it works as expected, however refreshing the page causes the same issue to happen.

Useful note?

  • If I change the route below to instead be path: ':postid' instead of path: 'post/:postid' I do not get this issue

Relevant code

app-routing-module.ts

const routes: Routes = [
  { path: 'newpost', component: CreateBlogPostComponent},
  { path: 'posts',
    // canActivate: [AuthGuard],
    // canActivateChild: [AuthGuard],
    component: BlogViewComponent
  },
  { path: 'post/:postid', component: BlogPostDetailsComponent, resolve: {blogPost: BlogPostResolverService} },
  // { path: 'users', component: UsersComponent, children: [
  //     { path: ':id/:name', component: UserComponent }
  //   ]
  // },
  // { path: 'not-found', component: ErrorPageComponent, data: {message: 'Page not found!'}},
 { path: '**', redirectTo: '/posts'}
];

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

index.html

<head>
  <meta charset="utf-8">
  <title>BlogApp</title>
  <base href="/">
  ...

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>

ng --version

Angular CLI: 10.1.7
Node: 12.6.0
OS: win32 x64

Angular: 10.1.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.901.0
@angular-devkit/build-angular   0.901.0
@angular-devkit/core            9.1.0
@angular-devkit/schematics      10.1.7
@angular/cdk                    9.2.0
@angular/cli                    10.1.7
@angular/material               9.2.0
@schematics/angular             10.1.7
@schematics/update              0.1001.7
rxjs                            6.5.4
typescript                      4.0.3

Thanks ahead of time to anyone who takes time out to take a look :)

thinkGeist
  • 19
  • 4
  • Can't seem to find this `path: 'posts/:postid'` in your snippet, your router look good. – Shahar Shokrani Oct 17 '20 at 23:14
  • Yikes, I meant `path: 'post/:postid'` I'll correct that – thinkGeist Oct 17 '20 at 23:17
  • Changing it to `post:postid` results in both URL navigation and routerLink navigation breaking – thinkGeist Oct 17 '20 at 23:46
  • Does this answer your question? [Angular 2.0 router not working on reloading the browser](https://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser) – Shahar Shokrani Oct 18 '20 at 00:09
  • I've read through that post and it sounds like the same issue however most references I see for similar issues talk about production deployments, if this is expected to not work on the development (webpack?) server then I can just solve it once I move to production. – thinkGeist Oct 18 '20 at 03:27

0 Answers0