ViewChild undefined in AoT

[zolakt]

Hi,
I'm having an issue with AoT build in version 3.0.0
Here is a streamlined code sample

<aw-wizard navBarLayout="large-empty-symbols" navBarLocation="left">
	<aw-wizard-step stepTitle="Step1" [navigationSymbol]="{symbol: '1'}">
		<button class="btn btn-primary" type="button" awNextStep>Continue</button>
	</aw-wizard-step>
	<aw-wizard-step stepTitle="Step2" [navigationSymbol]="{symbol: '2'}">
		<button class="btn btn-primary" type="button" awPreviousStep>Previous step</button>
		<button class="btn btn-primary" type="button" awNextStep>Continue</button>
	</aw-wizard-step>
	<aw-wizard-step stepTitle="Step3" [navigationSymbol]="{symbol: '3'}">
		<button class="btn btn-primary" type="button" awPreviousStep>Previous Step</button>
		<button class="btn btn-success" type="button" (click)="finish()">Order</button>
	</aw-wizard-step>
	<aw-wizard-completion-step stepTitle="Finish" [navigationSymbol]="{symbol: '&#10004;'}">
		<p>Thank you for ordering!</p>
	</aw-wizard-completion-step>
</aw-wizard>

export class TestComponent{
	@ViewChild(WizardComponent) wizard: WizardComponent;
	model: any;

	constructor(private service: TestService){}
	
	finish(): void {
		this.service.create(this.model).subscribe((res: any) => {
			this.wizard.navigation.goToNextStep();
		});
	}
}

The code is simplified, but those are the only important parts.
In the last step I have to wait for a response from a service, and move the wizard programmatically only if it was successful.

In development, with JiT compiler it works as expected.
In production, with AoT compiler, this.wizard is always undefined, and it never moves to the completion step.

Any suggestions or workaround?
Thanks

[zolakt]

After some testing...
It seems to work with
@ViewChild('wizard') wizard: WizardComponent
and
<aw-wizard navBarLayout="large-empty-symbols" navBarLocation="left" #wizard>

Don't know if ts an issue with in this lib or AoT compiler itself, although this is the first time I encountered this problem. Maybe worth properly testing and referencing in the docs.

[madoar]

This looks like an angular issue to me.
Do you have the same problem with other libraries, or components?

On another note:
I would suggest to use the canEnter input of the aw-wizard-completion-step to check if the final step can be entered, instead of your current approach.
The canEnter input accepts a function returning a Promise<boolean>, which I believe can be used in your case.

[zolakt]

I can't use canEnter, since I don't have a separate button for next step.
The code here is just a mockup. I have a embedded payment form, catch it's success event, and then need to move the wizard.

[madoar]

Ok, I didn't think about such a scenario when designing the directives and components.
Do you maybe have an idea what kind of components/directives angular-archiwizard could provide, to make such use cases easier to implement?

[zolakt]

My best suggestion is to make a shared service for controlling the wizard, so we don't have to resort to ViewChild. Other than that I don't think there is much you can do. Any external code could require the wizard to change steps. we just need a simple way to control it.

The above code works. For the time being, just make a note about AoT compatibility in the docs. It works only if you get the ViewChild by string, not by the component class. Unless this is a problem directly related to this lib, not AoT compiler (in not sure which is the case, never had this issue before, then again I tend to stay clear from ViewChild generally), I suggest you look into it. My best guess is that it's a AoT compiler issue for whatever reason, but I could be wrong.
For what it's worth I don't think this issue appeared with Angular4 and the 2.0 version of the wizard.

[madoar]

My problem with a shared service is, how should the user select the correct wizard instance?

I know other libraries support a shared service to access concrete instances of their main components.
All these libraries have in common, that they require the user to define an id for their component.
I don't want to add such a constraint to angular-archwizard.

[segux]

@ViewChild('wizard') wizard: WizardComponent

Plz @madoar can this solution added to Documentation for a programatically implementation?
He makes my day.

[madoar]

@segux I'm not sure, if this needs to be separately added to the documentation for angular-archwizard.
The reason being, that it is already part of the angular documentation, see https://angular.io/api/core/ViewChild#description

[fabioformosa]

I fell down too in this problem. A temporary alert on angular-archwizard documentation (about the workaround way to use ViewChild) would have saved me time.
Please edit at this point https://github.com/madoar/angular-archwizard#accessing-the-wizard-component-instance

[talesporto]

I change it:
@ViewChild(WizardComponent) public wizard: WizardComponent;

to it:
@ViewChild('wizard') public wizard: WizardComponent;

and works using ng build --prod --build-optimizer

Tks @zolakt !!!
I believe we need to add it to the documentation!

[rh8512]

@talesporto the solution also helped me, and definitely should be in documentation 👍

[YousefMMS]

@talesporto, I'm using a webpack and this works with me. Thanks 👍.