Issue with using angular-archwizard in lazy loaded libraries

[joelmuskwe]

I imported below in my app.module.ts and configured it with the forRoot():

import { ArchwizardModule } from 'angular-archwizard';


@NgModule({
  imports: [
    ArchwizardModule.forRoot(),
]
}

Then i created a lazy loaded module using nx and imported the ArchwizardModule in my lazy loaded library like below:

import { ArchwizardModule } from 'angular-archwizard';


@NgModule({
  imports: [
    ArchwizardModule,
]
}

I then created a component in my lazy loaded library using the demo snippet:

<aw-wizard>
  <aw-wizard-step stepTitle="Title of step 1">
    Content of Step 1
    <button type="button" awNextStep>Next Step</button>
    <button type="button" [awGoToStep]="{ stepIndex: 2 }">
      Go directly to third Step
    </button>
  </aw-wizard-step>
  <aw-wizard-step stepTitle="Title of step 2" awOptionalStep>
    Content of Step 2
    <button type="button" awPreviousStep>Go to previous step</button>
    <button type="button" awNextStep>Go to next step</button>
  </aw-wizard-step>
  <aw-wizard-step stepTitle="Title of step 3">
    Content of Step 3
    <button type="button" awPreviousStep>Previous Step</button>
    <button type="button" (click)="onSubmit()">Finish</button>
  </aw-wizard-step>
</aw-wizard>

and i produces the attached output:

But if i use the demo snippet in the app.component.ts it works as expected.

My environment details:
Angular CLI: 10.2.3
Node: 16.0.0
OS: darwin x64

Angular:
...
Ivy Workspace:

Package Version

@angular-devkit/architect 0.1002.3 (cli-only)
@angular-devkit/core 10.2.3 (cli-only)
@angular-devkit/schematics 10.2.3 (cli-only)
@schematics/angular 10.2.3 (cli-only)
@schematics/update 0.1002.3 (cli-only)

[joelmuskwe]

In case someone faces same challenge one of my parent component with had
changeDetection: ChangeDetectionStrategy.OnPush so removed it to make it work

[SEQUOiA87]

I got the same problem, and the work-around of removing changeDetection: ChangeDetectionStrategy.OnPush in the parent component (= the one lazy-loading the module which in turn loads the component which uses <aw-wizard> in its HTML) is not suitable for me.

I encountered the problem by updating from 'angular-archwizard' from ^5.0.0 to ^7.0.0, and later found out that already 6.0.0 broke it.

When looking at the release notes of 6.0.0, this sentence sounds suspicious:

call the reset method during the next tick instead of in the ngAfterContentInit lifecycle phase

So this issue should be reopened IMHO.

@madoar What do you think?
If you need more info on the environment or a minimal example, just tell me.
Thanks in advance!

[madoar]

I got the same problem, and the work-around of removing changeDetection: ChangeDetectionStrategy.OnPush in the parent component (= the one lazy-loading the module which in turn loads the component which uses <aw-wizard> in its HTML) is not suitable for me.

I encountered the problem by updating from 'angular-archwizard' from ^5.0.0 to ^7.0.0, and later found out that already 6.0.0 broke it.

When looking at the release notes of 6.0.0, this sentence sounds suspicious:

call the reset method during the next tick instead of in the ngAfterContentInit lifecycle phase

If I remember correctly this sentence targets PR #264. The change was necessary because of a test that started to fail after updating angular-archwizard from Angular 8 to Angular 9 (see also the linked comment in the PR).

So this issue should be reopened IMHO.

Sure :)

@madoar What do you think?
If you need more info on the environment or a minimal example, just tell me.
Thanks in advance!

I have not used lazy loaded of libraries with angular before. Therefore it is hard for me to recreate the issue without an example. For this reason it would be great if you could provide a fully runnable minimal example showcasing the issue.

[Luiser031008]

'ArchwizardModule' does not appear to be an NgModule class.(-996002)
archwizard.module.d.ts(3, 69): This likely means that the library (angular-archwizard) which declares ArchwizardModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy

Any suggestions?