@ViewChild(WizardComponent) not working with AOT build

[uluzox]

Hi,

My application is on Angular 6.0.5 and uses "angular-archwizard": "^3.0.0". I am handling wizard navigation in my TypeScript component for which I have a
@ViewChild(WizardComponent) public wizard: WizardComponent;
reference.
This works fine with JIT compilation. However when using --prod flag, I get the following error

ERROR TypeError: Cannot read property 'wizardSteps' of undefined
at n._next (5.f63f587b095e81c0550f.js:1)
at n.__tryOrUnsub (main.ca9874e42cba7c8aa441.js:1)
at n.next (main.ca9874e42cba7c8aa441.js:1)
at n._next (main.ca9874e42cba7c8aa441.js:1)
at n.next (main.ca9874e42cba7c8aa441.js:1)
at n._next (main.ca9874e42cba7c8aa441.js:1)
at n.next (main.ca9874e42cba7c8aa441.js:1)
at n._subscribe (main.ca9874e42cba7c8aa441.js:1)
at n.t._trySubscribe (main.ca9874e42cba7c8aa441.js:1)
at n._trySubscribe (main.ca9874e42cba7c8aa441.js:1)

This is my code:

this.loadingTopics$.pipe(
      take(1))
      .subscribe(() => {
        this.wizard.wizardSteps.forEach((step, index) => {
          if (index < wizardStep) {
            step.completed = true;
          }
        });
        this.wizard.navigation.goToStep(wizardStep);
      });

this.wizard is undefined.

Kind regards,

Thorsten

[uluzox]

ID References are working
@ViewChild('wizard') wizard: WizardComponent;
<aw-wizard #wizard disableNavigationBar="true" navigationMode="free">...

[madoar]

This issue is linked to #123 and #116.

It is really interesting, that id references work, while type references don't.
In which angular lifecycle phase are you accessing the wizard variable?

[uluzox]

I am accessing the wizard when clicking on an UI button.

[stas-kh]

That's kinda strange, I also caught the same error and hopefully found this issue.

For me, string reference works as expected, but it's really interesting why the problem appears.

[ZachRHale]

I recently ran into this issue with my own Angular modules that I was creating for my company. The problem seems to stem from using barrel index.ts files when exporting components from the public_api.ts (guessing you're using index.ts naming convention) file. Not sure why but I'm guessing it's how the declaration file is built.

The way I fixed it was just to do a straight export for each component and then @ViewChild(className) works.

[madoar]

@ZachRHale what do you mean by straight export?

[ZachRHale]

That wasn't very descriptive was it?
Actually I could do a pull request for this but I'll explain here as well.

For instance, if we have a components folder with an index.ts that exports each component

components/index.ts

export { ComponentOne } from './one'
export { ComponentTwo } from './two'

then in the public_api.ts we export all from components/index.ts
public_api.ts

export * from './components'

then the @ViewChild(className) will NOT work with an AOT build

Instead, which is somewhat of a pain-in-the-ass, if you export each component from the direct path (maybe better than my straight export terminology) then @ViewChild(className) will work correctly with AOT.

public_api.ts (correct)

export { ComponentOne } from './components/one'
export { ComponentTwo } from './components/two'

export { Service } from './services/one'
etc. etc.

[ZachRHale]

Fixed with Pull Request #184

[madoar]

I've just released angular-archwizard version 4.0.0 to npm! Feel free to give it a try!