Search code examples
javascriptangular2-routingangular2-meteor

Cannot read property 'annotations' of undefined when using routeconfig

I'm using the socially app tutorial to learn Angular2 and Meteor. I've encountered a problem that I can't find the root cause of.

I'm following a tutorial that states to add:

RouteConfig annotation:

@RouteConfig([
  { 
    path: '/', 
    as: 'PartiesList', 
    component: PartiesList 
  }, { 
    path: '/party/:partyId', 
    as: 'PartyDetails', 
    component: PartyDetails 
  }
]);

router-outlet in the app.html:

<router-outlet></router-outlet>

I get this exception when loading the app in Chrome:

EXCEPTION: Error in /client/app.html:0:0BrowserDomAdapter.logError @ 
modules.js?hash=12bd683…:59337BrowserDomAdapter.logGroup @ modules.js?
hash=12bd683…:59347ExceptionHandler.call @ modules.js?
hash=12bd683…:48750(anonymous function) @ modules.js?
hash=12bd683…:54194ZoneDelegate.invoke @ modules.js?
hash=12bd683…:107413onInvoke @ modules.js?
hash=12bd683…:54615ZoneDelegate.invoke @ modules.js?
hash=12bd683…:107412Zone.run @ modules.js?
hash=12bd683…:107306NgZoneImpl.runInner @ modules.js?
hash=12bd683…:54646NgZone.run @ modules.js?
hash=12bd683…:54538ApplicationRef_.run @ modules.js?
hash=12bd683…:54183ApplicationRef_.bootstrap @ modules.js?
hash=12bd683…:54205(anonymous function) @ modules.js?
hash=12bd683…:53993(anonymous function) @ meteor.js?
hash=ae8b8af…:1105ZoneDelegate.invoke @ modules.js?
hash=12bd683…:107413onInvoke @ modules.js?
hash=12bd683…:54615ZoneDelegate.invoke @ modules.js?
hash=12bd683…:107412Zone.run 

...

modules.js?hash=12bd683…:59337 TypeError: Cannot read property 'annotations' 
of undefined
at RouteRegistry.configFromComponent (modules.js?hash=12bd683…:87825)
at new RootRouter (modules.js?hash=12bd683…:87151)
at routerFactory (modules.js?hash=12bd683…:89570)
at ReflectiveInjector_._instantiate (modules.js?hash=12bd683…:50544)
at ReflectiveInjector_._instantiateProvider (modules.js?hash=12bd683…:50473)
at ReflectiveInjector_._new (modules.js?hash=12bd683…:50462)
at ReflectiveInjectorDynamicStrategy.getObjByKeyId (modules.js?hash=12bd683…:50117)
at ReflectiveInjector_._getByKeyDefault (modules.js?hash=12bd683…:50642)
at ReflectiveInjector_._getByKey (modules.js?hash=12bd683…:50614)
at ReflectiveInjector_.get (modules.js?hash=12bd683…:50423)

If I remove the @RouteConfig then no exception occurs but nothing is displayed obviously as no content is there to be presented. Any idea what could be causing this?

Solution

  • After some time now the angular and meteor time have came up with new versions which work out of the box at the time of writing. I also, by accident, figured out how to install a package. You can use the following format:

    meteor npm install @angular/core

    for example to install the angular core package