当任何组件从状态配置文件中导入状态时，UI Router都会引发错误

Question

我在代码中有以下问题，我找不到发生这种情况的原因；

我有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,
};

当我尝试从app.states.ts导入任何导出的var时

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);
  }

我收到以下错误消息

但是，当我将Import更改为Require时，它可以正常工作

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

当我复制一份app.state.ts（例如app.state2.ts）并导入任何状态时，我发现该应用程序有效。

当我将状态从UIRouterModule.forRoot（）中的另一个文件更改为状态时，它也可以工作

此外，它可以在UI路由器配置中的钩子中正常工作

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一起使用

预先感谢