Angular-cli: Type '{ path: string; component: string; }' is not assignable to type 'RouteMetadata'

[rcollette]

At ngConf I keep seeing examples of dynamic component loading with the component router using a string for the component property of RouteMetaData:

@Routes([
  {path: '/page1', component: 'Page1Component'}
])

But I get a TS compile error

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  /Users/richardcollette/code/ngclitest/Experimental/tmp/broccoli_type_script_compiler-input_base_path-bIVm8AbG.tmp/0/src/app/experimental.component.ts (13, 9): Argument of type '{ path: string; component: string; }[]' is not assignable to parameter of type 'RouteMetadata[]'.
  Type '{ path: string; component: string; }' is not assignable to type 'RouteMetadata'.
    Types of property 'component' are incompatible.
      Type 'string' is not assignable to type 'Type'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
    at BroccoliTypeScriptCompiler.build (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

The broccoli plugin was instantiated at: 
    at BroccoliTypeScriptCompiler.Plugin (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at BroccoliTypeScriptCompiler (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:26:49)
    at Angular2App._getTsTree (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/lib/broccoli/angular2-app.js:280:18)
    at Angular2App._buildTree (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/lib/broccoli/angular2-app.js:101:23)
    at new Angular2App (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/lib/broccoli/angular2-app.js:42:23)
    at module.exports (/Users/richardcollette/code/ngclitest/Experimental/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/serve.js:15:19)
    at /Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/angular-cli/lib/commands/serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/richardcollette/code/ngclitest/Experimental/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

I'm not sure if this is a CLI setup issue or something in Angular itself.

[sabbirrahman]

@rcollette You are supposed to assign the component itself not the component's name as string. Just remove the quotes arround Page1Component.
@Routes([ {path: '/page1', component: Page1Component} ])

[rcollette]

I know that works but the examples I keep seeing here at ngConf for deferred component loading, they are showing it as a string. It seems @Routes at one point had a name property which might have been useful for this but that is no longer present as well.

Maybe they were using @RouteConfig instead and I just missed that fact? I know they weren't doing anything like setting a loader property though. I'll see if I can find the guy who was giving the router talk before the conf is over.

[rcollette]

Talking to other people here, apparently we got an early look at this functionality. I'm going to close this.

[shaludavid]

thanks sabbirrahman for that tip. it helped me continue with the tutorial.

[charinipeiris]

i got above error though i didn't put inverted commas to components.

[angular-automatic-lock-bot[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._}