Cannot set properties of undefined (setting 'step')

[prshantsharma]

Hi,

I'm getting an error in browser console when I start the TourService.

Below is my code:

tourSteps: IStepOption[] = [{
  anchorId: 'welcome',
  content: 'Lorem ipsum dolor.',
  title: 'Welcome'
}];

In ngOnInit, I put this below line of code:

 this.tourService.initialize(this.tourSteps);

I created a function to start the TourService as below:

startTour() { 
  this.tourService.start();
}

In my HTML, I put this below snippet:

<div tourAnchor="welcome"></div>

Also, I pasted <tour-step-template></tour-step-template> in app.component.html as you suggested in the documentation.

Now. what I'm doing wrong/missing here? Please assist!

[hakimio]

This indicates a problem with your <tour-step-template>. Did you import TourMatMenuModule in your AppModule and was your app updated after adding <tour-step-template></tour-step-template> to your app component? Try to restart the app after adding <tour-step-template>.
Check this demo project to see a simple working example.

[prshantsharma]

Hi @hakimio, thanks for the reply.

I didn't import TourMatMenuModule in AppModule because I'm working with multiple modules so I have one SharedModule and imported TourMatMenuModule in my SharedModule from ngx-ui-tour-md-menu. And I have imported this SharedModule in every module of the application.

One more thing here, I'm importing TourMatMenuModule using forRoot(). If I don't use forRoot(), I'm getting this below error:

And if importing TourMatMenuModule in AppModule, getting this below issue in console when I start the TourService:

Now, please share your valuable thoughts what I'm doing wrong here?

Specifications:
Angular version is: 13.1
Node version: 14.21
ngx-ui-tour-md-menu version: 8.1.2

[hakimio]

Yes, when using old versions of ngx-ui-tour, you have to import TourMatMenuModule.forRoot() in your AppModule. That's stated in the "Setup" guide.
If you have <tour-step-template> in your app.component.html and TourMatMenuModule.forRoot() in your app.module.ts, one more thing you can check is that you are importing TourService from ngx-ui-tour-md-menu, not ngx-ui-tour-core. In your case there shouldn't be any imports from ngx-ui-tour-core.
Also, make sure that you are using v8 of both ngx-ui-tour-md-menu and ngx-ui-tour-core.
If you still can't get it to work, create a GitHub repo with the issue and I'll take a look.

[Prshant-Sharma]

@hakimio, I imported TourMatMenuModule from ngx-ui-tour-md-menu in my AbcModule as shown below:

but still getting this below error:

[hakimio]

It shouldn't be forRoot():

import {TourMatMenuModule} from 'ngx-ui-tour-md-menu';

@NgModule({
  declarations: [
    HelloComponent,
    SidebarComponent,
    WelcomeComponent,
    RegistrationComponent,
    FinishComponent
  ],
  imports: [
    CommonModule,
    AbcRoutingModule,
    TourMatMenuModule
  ]
})
export class AbcModule { }

[hakimio]

Here is a patch to fix your demo:
Tour_fix_.patch

[hakimio]

You have to import TourMatMenuModule.forRoot() in your AppModule and TourMatMenuModule (without forRoot()) in your lazy loaded AbcModule.

[Prshant-Sharma]

@hakimio, amazing!!!! It really worked.
Many thanks for your efforts! 👍