Angular 2 Router strange null call

Question

Problem

Im loading some menu items from the Wordpress Rest API, then navigate to the page/:id with the correct id of the wordpress page. Everything works fine except of that:

Early when my page is loading I get this null call in the network section of the chrome developer. This is locally, on my server its also a 404 NOT FOUND.

Setup

Angular 2 + Typescript (Angular 2 RC2, Router 3.0.0-alpha.6)
Wordpress REST API

Code

Template

<header></header>
<router-outlet></router-outlet>
<footer></footer>

Routing

export const routes: RouterConfig = [
  { path: '/page/:id', component: PageComponent },
  { path: '/page/home', component: PageComponent, index: true }
];

Header.ts

this.myService.getNavigation()
    .subscribe(
        menuItems => {
            this.menuItems = menuItems;

            this.router.navigate(['/page', this.menuItems[0].title]);
        },
        error =>  this.errorMessage = <any>error);

Main.ts

bootstrap(AppComponent, [
    ...APP_ROUTER_PROVIDERS,
    ...HTTP_PROVIDERS,
    ...ROUTER_PROVIDERS,
    ...ENV_PROVIDERS,
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ])

Assumption

I guess it has something to do with my routing setup. When I comment out the <router-outlet> it does not happen, everything else works good.

Question

What is this strange call at /null and how can I avoid it?

Sounds like http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser — Günter Zöchbauer, Jun 17 '16 at 12:14
Seems like most of the people fixed it by using HashLocationStrategy what I already do. — NDY, Jun 17 '16 at 13:14
This means you get the error even with `HashLocationStrategy` enabled? Can you show the code how you enable it? — Günter Zöchbauer, Jun 17 '16 at 13:20
All my urls already get the # and I can refresh it without any problems :) Only this /null network route is disturbing me. Added the bootstrap code. — NDY, Jun 17 '16 at 13:28

score 1 · Answer 1 · answered Jun 17 '16 at 12:18

1

I guess you have somewhere <img [attr.src]="var"> or similar.

answered Jun 17 '16 at 12:18

kemsky

14,727
3
32
51

I only have two image tags in my whole project and the error still exists if I remove them. I can really remove a lot of code and the error still comes. Im pretty sure its a routing problem. – NDY Jun 17 '16 at 13:17
You could add XHR break point in chrome to trace caller: http://devtoolsecrets.com/secret/debugging-xhr-breakpoints.html – kemsky Jun 17 '16 at 13:57

Angular 2 Router strange null call

1 Answers1