benmarch / angular-ui-tour

Product tour using Angular UI Bootstrap Tooltips
163 stars 49 forks source link

How to use UI-TOUR with angular 4 and Typescript #170

Closed Aventrue closed 6 years ago

Aventrue commented 6 years ago

How can I use UI-Tour with angular 4 and Typescript. Normaly I Import third Party Code inside my app.model.ts file like that:

// angular
import { Inject, NgModule, PLATFORM_ID } from '@angular/core';
import { Http } from '@angular/http';
import { RouterModule } from '@angular/router';

// libs
import { ConfigLoader, ConfigService } from '@ngx-config/core';
// TODO: ngx-i18n-router
// import { I18N_ROUTER_PROVIDERS, I18NRouterLoader, I18NRouterModule, RAW_ROUTES } from '@ngx-i18n-router/core';
import { MetaLoader } from '@ngx-meta/core';
import { TranslateLoader, TranslateService } from '@ngx-translate/core';
import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';

// framework
import { configFactory, CoreModule, metaFactory } from './framework/core/core.module';
import { SharedModule } from './framework/core/shared.module';
import { MaterialModule } from './framework/material/material.module';
import { HttpInterceptorModule } from './framework/http/http-interceptor.module';
import { ChangeLanguageComponent, I18NModule, translateFactory } from './framework/i18n/i18n.module';
import { AnalyticsModule } from './framework/analytics/analytics.module';

// routes & components
import { routes } from './app.routes';
import { AppComponent } from './app.component';
import { LAYOUT_COMPONENTS } from './components/layout';
import { LOGIN_COMPONENTS } from './components/login';

import { MentoringService } from './components/services';

//import { LandingPageComponent } from './components/landingPage/landingpage.component';

const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    MaterialModule,
    PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
    CoreModule.forRoot([
      {
        provide: ConfigLoader,
        useFactory: configFactory,
        deps: [
          PLATFORM_ID,
          Http
        ]
      },
      {
        provide: MetaLoader,
        useFactory: metaFactory,
        deps: [
          ConfigService,
          TranslateService
        ]
      }
    ]),
    SharedModule,
    HttpInterceptorModule,
    I18NModule.forRoot([
      {
        provide: TranslateLoader,
        useFactory: translateFactory,
        deps: [
          PLATFORM_ID,
          Http
        ]
      }
    ]),

    // TODO: ngx-i18n-router
    // I18NRouterModule.forRoot(routes, [
    //   {
    //     provide: I18NRouterLoader,
    //     useFactory: i18nRouterFactory,
    //     deps: [
    //       ConfigService,
    //       RAW_ROUTES
    //     ]
    //   }
    // ]),
    AnalyticsModule
  ],
  declarations: [
    AppComponent,
    LOGIN_COMPONENTS,
    LAYOUT_COMPONENTS
  ],
  exports: [AppComponent],
  entryComponents: [ChangeLanguageComponent],
  bootstrap: [AppComponent],
  providers: [MentoringService]
})
export class AppModule {
  constructor(@Inject(PLATFORM_ID) private readonly platformId: any) {
  }
}

I do not understand how I can do that with the UI-TOUR plugin. I'm quite new to angular and typescript, so it would be great to get some help from you!

benmarch commented 6 years ago

Angular UI Tour is for AngularJS, it is not intended to be used with the latest version of Angular. If you somehow get it working please let me know and I will add documentation to the README :)