Error running template sample code in Angular 4.1.1

[mflorence99]

I feel like I'm doing something egregiously wrong and if so I apologize for posting an issue. ButnI can't figure the problem and any help would be great.

I have the PolymerModule imported into my app. I have this code in my main.ts:

platformBrowserDynamic().bootstrapModule(RootModule, {
  enableLegacyTemplate: false
});

I have this on a test page:

<iron-list [items]="['apple', 'pear']" as="item">
  <ng-template polymer>
    <div>XXX [[item]]</div>
  </ng-template>
</iron-list>

But I consistently get this error (plus a subsequent JavaScript exception) in my Chrome console:

iron-list requires a template to be provided in light-dom

If I had to guess, I'd say that despite all the setup Angular isn't aware of the polymer directive. Indeed, I got a hint from another issue that maybe that I should've coded polymer-template: but that didn't make any difference and may be a clue.

If I inspect the DOM, I see the following which seems to confirm that the polymer directive isn't taking effect:

<iron-list _ngcontent-c10="" as="item" style="overflow: auto;">
  <!---->
</iron-list>

I wish I'd known about Origami before -- it looks extremely useful -- if I can just get it to work!

[hotforfeature]

What version of iron-list and Origami do you have installed? Can you share your RootModule .ts file?

Alternatively if you have your project committed somewhere you can link it and I'll take a look.

[mflorence99]

Of course! As I was preparing to describe where to find my RootModule.ts on GitHub I realized that the test code -- in a route -- is governed by a child module. I imported PolymerModule into it and of course it works perfectly. My apologies for being an idiot and thanks for your help. Great software!

[hotforfeature]

Glad to hear it! I'll go ahead and close this :)