Not able to make it work about ngx-tour HOT 18 CLOSED

Change

import { TourService } from "ngx-tour-core";

to

import { TourService } from "ngx-tour-md-menu";

You also won't need to include ngx-tour-core in your package.json. ngx-tour-md-menu includes it automatically as a dependency.

from ngx-tour.

Change

import { TourService } from "ngx-tour-core";

to

import { TourService } from "ngx-tour-md-menu";

You also won't need to include ngx-tour-core in your package.json. ngx-tour-md-menu includes it automatically as a dependency.

I'm not sure if it's ever desired to import TourService from ngx-tour-core so if that's the case maybe it would make more sense to update the public_api to reflect that so people don't have the option to import it from there in the first place

from ngx-tour.

Created new angular cli project.

1. ConsoleModule Works. BootstrapModule does not work.

from ngx-tour.

from ngx-tour.

I tried using TourNgBootstrapModule in a fresh project and ran into a few issues. Released 1.0.4 and updated the docs. Let me know if you're still having problems.

from ngx-tour.

I also didn't succeed to run.

• Firstly, the console demo on your page, does not work for me. "Start Demo Tour" does nothing. Clicking on Prev / Next buttons, logs "Can't get next step. No currentStep" kind of messages in the console. I use Chrome.

Below is what I tried and how I failed to run:
App Module:

import { TourMdMenuModule, TourService } from 'ngx-tour-md-menu';
@NgModule({
  imports: [
	TourMdMenuModule
  ],
  declarations: [
  ],
  bootstrap: [MasterComponent],
  providers: [
    TourService
  ]
})

master.component.html:

<tour-step-template></tour-step-template>
<div tourAnchor="panel.home.linkbox.company">aa</div>
<div tourAnchor="panel.home.linkbox.organizations">bb</div>

master.component.ts

export class MasterComponent {

    constructor(private tourService: TourService) {
        this.setupTour();
    }   

    public setupTour(): void {
        this.tourService.initialize(this.buildTourSteps());
        this.tourService.start()
    }
    private buildTourSteps(): any[] {
        let steps: any[] = [];

		steps.push({
			anchorId: 'panel.home.linkbox.company',
			content: 'This is the main page for your Company’s profile and billing settings. ',
			title: 'Company Settings',
		});
       

        steps.push({
            anchorId: 'panel.home.linkbox.organizations',
            content: 'Here you can manage the organizations of your company.',
            title: 'Organization Management',
        });

        return steps;
    }

}

When I try to run, I am getting the error below:

No provider for TourStepTemplateService!

from ngx-tour.

@mustafaekim

1. The Console demo has the tour started initially. Clicking the "Start Tour" button will toggle it off and then the "next" and "prev" buttons will display the warnings you mentioned. Click "Start Tour" again and they should work.

2. In your app, you need to import TourMdMenuModule.forRoot() so that it will register the providers it needs. You need to use forRoot() because you don't want multiple copies of that provider.

from ngx-tour.

I've put TourMdMenuModule.forRoot() into imports, still having error. I think there is a lack of real documentation. I dont see the big picture.

Error:
ERROR Error: Uncaught (in promise): Error: No provider for TourService!
Error: No provider for TourService!

from ngx-tour.

Where are you getting TourService from in master.component.ts? What is your import line?

Yep, documentation always needs work. I'd love help with that.

from ngx-tour.

(I clear others and keep only what interest us for simplifying)

app.module

@NgModule({
  imports: [
    TourMdMenuModule.forRoot()
  ],
  declarations: [
  ],
  bootstrap: [MasterComponent],
  providers: [TourService]
})

master.component.ts

import { TourService } from "ngx-tour-core";

@Component({
    selector: 'my-app',
    templateUrl: './master.component.html',
    styleUrls: ['./master.component.css']
})
export class MasterComponent implements OnInit {
    constructor(
        , tourService: TourService
    ) {
...

from ngx-tour.

I see in my docs that I don't say you need to import TourMdMenuModule.forRoot(). I'm updating that now.

from ngx-tour.

Voila! It now worked. Thanks for support. Otherwise, from my point of view, it is not easy to figure out those mistakes.

from ngx-tour.

Yeah, those are difficult bugs to track down if you're not the library maintainer. Let me know if you have ideas for how the docs could be improved.

from ngx-tour.

Best is to have the online repository of the demo so that people can look.

from ngx-tour.

Here it is.

from ngx-tour.

I wish I did see this link before. Is it on the demo page? If not, you may consider giving a link.

Besides, lazy loading makes it hard for beginners to understand. You should keep the demo simple.

Lastly, when naming components/libraries in a demo, I would recommend to make it clear that those file are example file. However a file with a name md-menu.component.ts makes me think, is this a demo, or somrthing I need? So I feel required to check inside. Naming can state that this is a demo component: like. demo-md-menu.component.ts

Thanks for your support

from ngx-tour.

Error - Cannot find name 'TourNgxBootstrapModule'.
when i import TourNgxBootstrapModule.forRoot() in app.module

from ngx-tour.

I am facing similar kind of issue
NullInjectorError: R3InjectorError(DynamicTestModule)[TourStepTemplateService -> TourStepTemplateService]:
NullInjectorError: No provider for TourStepTemplateService!

and this is happening only in one module rest are working fine. Already imported the TourService in providers and checked the import source.

from ngx-tour.