Router generation not working

[thorstenschaefer]

I'm not sure whether this is a bug in CLI, Angular or from a user who isn't yet up to speed on the new router component. I generated a new project using CLI and added two routes to it:

ng new test-project
ng g route firstPath
ng g route secondPath

After generating the files, the project looks like this: https://github.com/thorstenschaefer/angular-cli-issue

Now if I start the app (ng serve) and go to http://localhost:4200/firstPath or http://localhost:4200/secondPath, I'm just seeing the rendered part of the main component "test-project works!", not for the sub components. The tag is in the DOM unresolved, but the code of the main component includes the routes for the 2 path and the ROUTER_DIRECTIVES as well, so I'm not sure what's going wrong here.

There are no errors in the browser console, the only notification I get when using any CLI command is "(node:27157) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.", but it seems that it's just a warning as the code gets generated.

Environment:
angular-cli: 1.0.0-beta.1
node: 6.1.0
os: darwin x64

[sergiocosus]

I had the same problem, but just inject the Router in the constructor of your main component, something like this.

export class TestProjectAppComponent {

  constructor(private router:Router) { }

  ngOnInit() {  }
}

[thorstenschaefer]

Thanks @sergiocosus, adding a private property to the constructor solves the issue.

I just looked that the respective source code in the blue print and it seems that only imports and routes are handled, while the router reference is not. Would it be possible to add this to the blue print in order to avoid issues like that?

[doczoidberg]

this did not work for me. Router type can also not be resolved

adding the constructor with router:anygives me the exception:

EXCEPTION: TypeError: Cannot read property 'query' of null
VM7831:27EXCEPTION: TypeError: Cannot read property 'query' of nullwindow.console.error @ VM7831:27BrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:296ZoneDelegate.invoke @ zone.js:323NgZoneImpl.inner.inner.fork.onInvoke @ ng_zone_impl.js:45ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356NgZoneImpl.inner.inner.fork.onInvokeTask @ ng_zone_impl.js:36ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
browser_adapter.js:86EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null
VM7831:27EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'query' of nullwindow.console.error @ VM7831:27BrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:120NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM7831:27STACKTRACE:window.console.error @ VM7831:27BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:59(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ng_zone.js:120NgZoneImpl.inner.inner.fork.onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
VM7831:27Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null
    at resolvePromise (zone.js:538)
    at PromiseCompleter.reject (zone.js:515)
    at eval (application_ref.js:295)
    at ZoneDelegate.invoke (zone.js:323)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:45)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.run (zone.js:216)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:36)

[thorstenschaefer]

You cannot use any as a type. Adding the router as a Router type to the constructor tells Angular's DI to inject an instance of the router into your component. So if you use any, nothing get's injected and thus you get the error message. Just follow @sergiocosus fix and add Router to the imports (from '@angular/router'). See: https://github.com/thorstenschaefer/angular-cli-issue/commit/ab51f54f1241dabec26f6179af33546dd1b13b3c

[Brocco]

@thorstenschaefer Can you try adding routerLinks within the view that point to the actual route and navigate to the child routes? (firstPath, secondPath) This may be an issue with the server itself and not the generated route code.

[thorstenschaefer]

@Brocco You are right. If I add a routerLink to the pages, routing works fine without the router being injected in the constructor (see https://github.com/thorstenschaefer/angular-cli-issue/commit/a343021c2f09f8d07e21265f8320526733fd997c). Without any routerLinks, it works only with the injected router as @sergiocosus pointed out.

Unfortunately, I'm not sure what the actual desired behavior is as there's no documentation on the new router so far. Can you tell if this is a framework issue (and thus should be added to the issues for angular/router) or if a router injection is required in the new routing module?

[bschlosser]

@thorstenschaefer The work in progress docs for the new router are here (they're not in the left nav yet): https://angular.io/docs/ts/latest/guide/router.html

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}