How to use @uirouter/angular - 10 common examples

reloadOnSearch: false,
    data: {
      bodyClasses: 'router--work-packages-calendar',
      menuItem: menuItemClass,
      parent: 'work-packages'
    }
  }
];

@NgModule({
  imports: [
    // Commons
    OpenprojectCommonModule,

    // Routes for /work_packages/calendar
    UIRouterModule.forChild({ states: CALENDAR_ROUTES }),

    // Work Package module
    OpenprojectWorkPackagesModule,

    // Time entry module
    OpenprojectTimeEntriesModule,

    // Editable fields e.g. for modals
    OpenprojectFieldsModule,

    // Calendar component
    FullCalendarModule,
  ],
  declarations: [
    // Work package calendars
    WorkPackagesCalendarEntryComponent,

// Explicitly bootstrap the kitten component in the DOM if it is found
    // Angular would otherwise only bootstrap the global entry point bootstrap from the core
    // preventing us from using components like this kitten component
    hookService.register('openProjectAngularBootstrap', () => {
      return [
        { selector: 'kitten-component', cls: KittenComponent }
      ];
    });
  };
}

@NgModule({
  imports: [
    CommonModule,
    UIRouterModule.forChild({ states: KITTEN_ROUTES })
  ],
  providers: [
    // This initializer gets called when the Angular frontend is being loaded by the core
    // use it to hook up global listeners or bootstrap components
    { provide: APP_INITIALIZER, useFactory: initializeProtoPlugin, deps: [Injector], multi: true },
  ],
  declarations: [
    // Declare the component for angular to use
    KittenComponent,
    KittenPageComponent,
  ],
})
export class PluginModule {
}

function setupTestBed() {
    // noinspection JSIgnoredPromiseFromCall
    TestBed.configureTestingModule({
      imports: [
        UIRouterModule.forRoot({}),
        HttpClientModule
      ],
      providers: [
        I18nService,
        States,
        IsolatedQuerySpace,
        HalEventsService,
        TimezoneService,
        PathHelperService,
        ConfigurationService,
        CurrentUserService,
        HookService,
        OpenProjectFileUploadService,
        OpenProjectDirectFileUploadService,
        LoadingIndicatorService,
        HalResourceService,

MatCardModule,
		MatIconModule,
		MatListModule,
		MatSidenavModule,
		MatTooltipModule,
		StoreModule.forRoot(reducers, {
			metaReducers
		}),
		// store dev tools instrumentation must be imported AFTER StoreModule
		StoreDevtoolsModule.instrument({
			maxAge: 50, // retains last 50 states
			name: "Stark Starter - NgRx Store DevTools", // shown in the monitor page
			logOnly: environment.production // restrict extension to log-only mode (setting it to false enables all extension features)
		}),
		EffectsModule.forRoot([]), // needed to set up the providers required for effects
		UIRouterModule.forRoot({
			states: APP_STATES,
			useHash: false, // to use Angular's PathLocationStrategy in order to support HTML5 Push State
			otherwise: "otherwise",
			config: routerConfigFn
		}),
		TranslateModule.forRoot(),
		StarkHttpModule.forRoot(),
		StarkLoggingModule.forRoot(),
		StarkSessionModule.forRoot(),
		StarkSettingsModule.forRoot(),
		StarkRoutingModule.forRoot(),
		StarkUserModule.forRoot(),
		StarkAppFooterModule,
		StarkAppLogoModule,
		StarkAppLogoutModule,
		StarkAppMenuModule,

// See docs/COPYRIGHT.rdoc for more details.
//++

import { Injector, NgModule } from '@angular/core';
import { FirstRouteService } from "core-app/modules/router/first-route-service";
import { UIRouterModule } from "@uirouter/angular";
import { ApplicationBaseComponent } from "core-app/modules/router/base/application-base.component";
import {
  initializeUiRouterListeners,
  OPENPROJECT_ROUTES,
  uiRouterConfiguration
} from "core-app/modules/router/openproject.routes";

@NgModule({
  imports: [
    UIRouterModule.forRoot({
      states: OPENPROJECT_ROUTES,
      useHash: false,
      config: uiRouterConfiguration,
    } as any),
  ],
  providers: [
    FirstRouteService
  ],
  declarations: [
    ApplicationBaseComponent
  ]
})
export class OpenprojectRouterModule {
  constructor(injector:Injector) {
    initializeUiRouterListeners(injector);
  }

* Import Angular's modules.
	 */
	imports: [
		BrowserModule,
		BrowserAnimationsModule,
		StoreModule.forRoot(reducers, {
			metaReducers
		}),
		// store dev tools instrumentation must be imported AFTER StoreModule
		StoreDevtoolsModule.instrument({
			maxAge: 50, // retains last 50 states
			name: "Stark Showcase - NgRx Store DevTools", // shown in the monitor page
			logOnly: environment.production // restrict extension to log-only mode (setting it to false enables all extension features)
		}),
		EffectsModule.forRoot([StarkErrorHandlingEffects, StarkRbacUnauthorizedNavigationEffects]), // needed to set up the providers required for effects
		UIRouterModule.forRoot({
			states: APP_STATES,
			useHash: false, // to use Angular's PathLocationStrategy in order to support HTML5 Push State
			otherwise: "otherwise",
			config: routerConfigFn
		}),
		TranslateModule.forRoot(),
		StarkHttpModule.forRoot(),
		StarkLoggingModule.forRoot(),
		StarkSessionModule.forRoot({
			loginStateName: starkPreloadingStateName // get rid of the Login page in the Showcase :-)
		}),
		StarkErrorHandlingModule.forRoot(),
		StarkSettingsModule.forRoot(),
		StarkRoutingModule.forRoot(),
		StarkRBACAuthorizationModule.forRoot(),
		StarkUserModule.forRoot(),

ngmodule.config($stateProvider => {
  $stateProvider.state({
    name: 'contacts.**',
    url: '/contacts',
    // loadNgModule lazy loads an Angular 2 NgModule (or UIRouterModule)
    lazyLoad: loadNgModule(() => System.import('./index').then(result => result.ContactsModule))
  });
});

import { DetailComponent } from "./detail.component";
import { routerChildConfigFn } from "../router.config";

console.log("`Detail` bundle loaded asynchronously");

@NgModule({
	declarations: [
		/**
		 * Components / Directives/ Pipes
		 */
		DetailComponent
	],
	imports: [
		CommonModule,
		FormsModule,
		UIRouterModule.forChild({
			states: DETAIL_STATES,
			config: routerChildConfigFn
		})
	]
})
export class DetailModule {
	public static routes: Ng2StateDeclaration[] = DETAIL_STATES;
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContactComponent } from './contact.component';
import { ContactDetailComponent } from './contact-detail.component';
import { ContactListComponent } from './contact-list.component';
import { ContactsComponent } from './contacts.component';
import { EditContactComponent } from './edit-contact.component';
import { CONTACTS_STATES } from './contacts.states';
import { UIRouterModule } from '@uirouter/angular';
import { FormsModule } from '@angular/forms';
import { ContactsDataService } from './contacts-data.service';

@NgModule({
  imports: [
    UIRouterModule.forChild({ states: CONTACTS_STATES }),
    FormsModule,
    CommonModule
  ],
  declarations: [
    ContactComponent,
    ContactDetailComponent,
    ContactListComponent,
    ContactsComponent,
    EditContactComponent
  ],
  providers: [
    ContactsDataService
  ],
})
export class ContactsModule {
}

entryComponents: [
        UploadComponent
    ],
    imports: [
        CatalogApiModule,
        CommonModule,
        CovalentFileModule,
        FlexLayoutModule,
        KyloCommonModule,
        MatButtonModule,
        MatCardModule,
        MatDividerModule,
        MatListModule,
        MatProgressBarModule,
        TranslateModule,
        UIRouterModule.forChild({states: uploadStates})
    ]
})
export class UploadModule {
}