UI Router выдает ошибку, когда какой-либо компонент импортирует состояние из файла конфигурации состояний - PullRequest
Новая
       3

UI Router выдает ошибку, когда какой-либо компонент импортирует состояние из файла конфигурации состояний

0 голосов
/ 13 декабря 2018

У меня есть следующая проблема в коде, и я не могу найти причину, по которой это происходит;

У меня есть приложение Angular 5

часть package.json 

  "dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/common": "^5.2.10",
    "@angular/compiler": "^5.2.10",
    "@angular/core": "^5.2.10",
    "@angular/forms": "^5.2.10",
    "@angular/http": "^5.2.10",
    "@angular/platform-browser": "^5.2.10",
    "@angular/platform-browser-dynamic": "^5.2.10",
    "@angular/platform-server": "^5.2.10",
    "@angular/router": "^5.2.10",
    "@auth0/angular-jwt": "^1.2.0",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "@ng-select/ng-select": "^1.5.2",
    "@ngrx/store": "^4.1.0",
    "@uirouter/angular": "^2.0.2",
    "@uirouter/rx": "^0.5.0",
    "@uirouter/visualizer": "^6.0.0",

Часть app.module.ts 

...
import { APP_STATES } from "./app.states";
...

/**
 * Root module of the app SPA
 */
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule.forRoot(), // forRoot ensures the providers are only created once
    UIRouterModule.forRoot({
      states: APP_STATES, //array of app states
      useHash: false, //to use hash for old browsers, make it true
      otherwise: {state: 'notFound'},
      config: routerConfigFn,
    }),

Часть app.state.ts 

/**
 * This is the parent state for public site
 */
export const appState = {
  name: 'app',
  redirectTo: 'app.home',
  component: AppComponent,
};

export const notFoundState = {
  parent: 'app',
  name: 'notFound',
  url: '/not-found',
  component: NotFoundComponent,
};

И когда я попробовалИмпортировать любой экспортированный var из app.states.ts 

import { Component, OnInit } from '@angular/core';
import { StateService } from '@uirouter/core';
import { appState } from "./app.states";


/**
 * Main component for Public site
 */
@Component({
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.styl'],
})

export class AppComponent implements OnInit {
  constructor(public $state: StateService) {
    console.log(appState);
  }

Я получаю следующую ошибку

Fist Error

Second Error

Однако, когда я изменяю Import на Require, он работает правильно 

constructor(public $state: StateService) {
    const appState = require('./app.states').appState;
    console.log(appState);
}

И я обнаружил, когда я делаю копию app.state.ts (например, app.state2.ts) и импортировать любое состояние, приложение работает.

И когда я изменяю состояния на состояния из другого файла в UIRouterModule.forRoot (), оно тоже работает

Более того, оно работает корректно в хукахв конфигурации маршрутизатора пользовательского интерфейса: 

import { UIRouter } from '@uirouter/core';
import { requiresAuthRoleHook } from './core/hooks/auth.role.hook';

export function routerConfigFn(router: UIRouter) {
  const transitionService = router.transitionService;
  requiresAuthRoleHook(transitionService);
...

auth.role.hook 

import { loginState } from '../../app.states';
...
export function requiresAuthRoleHook(transitionService: TransitionService) {
  targetState = loginState.name;
...

Пожалуйста, вы можете помочь мне понять, что я сделал не так?Он работает, как и ожидалось, в компоненте, использующем функцию Require, и не работал с Import

Заранее спасибо

...