New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Router generation not working #708

Closed
thorstenschaefer opened this Issue May 10, 2016 · 7 comments

Comments

Projects
None yet
5 participants
@thorstenschaefer

thorstenschaefer commented May 10, 2016

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

This comment has been minimized.

sergiocosus commented May 10, 2016

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

This comment has been minimized.

thorstenschaefer commented May 10, 2016

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 comment has been minimized.

doczoidberg commented May 11, 2016

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

This comment has been minimized.

thorstenschaefer commented May 11, 2016

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: thorstenschaefer/angular-cli-issue@ab51f54

@Brocco

This comment has been minimized.

Contributor

Brocco commented May 11, 2016

@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

This comment has been minimized.

thorstenschaefer commented May 11, 2016

@Brocco You are right. If I add a routerLink to the pages, routing works fine without the router being injected in the constructor (see thorstenschaefer/angular-cli-issue@a343021). 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

This comment has been minimized.

Contributor

bschlosser commented May 12, 2016

@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

@Brocco Brocco closed this May 12, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment