angular - 仅在 jhipster 将 webpack 服务器热重载到浏览器控制台时获取 Angular 错误，而不是在其他编译中

Question

我有一个根据 jHipster 指令https://www.jhipster.tech/development/配置的调试开发设置，带有代理 webpack 服务器和 broswersink。服务器端工作正常，静态文件从中提取得很好，并且可以在localhost:9000和上请求，但在 browsersynk 下的浏览器选项卡上调用或localhost:9060时，不能请求角度应用程序本身。我在浏览器控制台中向我展示了这样的错误：localhost:9000/localhost:9000/api

Error: Invalid configuration of route 'teacher/class/:id'. One of the following must be provided: component, redirectTo, children or loadChildren
    at validateNode (router.js?6580:607)
    at validateConfig (router.js?6580:577)
    at validateNode (router.js?6580:623)
    at validateConfig (router.js?6580:577)
    at Router.resetConfig (router.js?6580:4111)
    at new Router (router.js?6580:3779)
    at setupRouter (router.js?6580:5591)
    at _callFactory (core.js?09c9:18520)
    at _createProviderInstance (core.js?09c9:18466)
    at initNgModule (core.js?09c9:18396)

而且它并不指向在同一个文件中配置的几乎相同的路由。我不知道这条特定路线有什么问题。

在一个地方，我有几条配置如下的路线：

import { Route, Routes } from '@angular/router';

import { CreateKindergartenclassComponent } from 'app/businesslogic';
import { DetailKindergartenclassComponent } from 'app/businesslogic';
import { ListKindergartenclassComponent } from 'app/businesslogic';
import { SelectKindergartenclassComponent } from 'app/businesslogic';
import { UserRouteAccessService } from 'app/core';
import { KindergartenClassResolve } from 'app/entities/kindergarten-class';
import { CommentResolve } from 'app/entities/comment';

export const createKindergartenclassRoute: Route = {
  path: 'teacher/class/create',
  component: CreateKindergartenclassComponent,
  data: {
    authorities: ['ROLE_TEACHER_PAID'],
    pageTitle: 'businesslogic.create.kindergartenclass.title'
  },
  canActivate: [UserRouteAccessService]
};

export const detailKindergartenclassRouteChild: Route = {
  path: 'child/class/:id',
  component: DetailKindergartenclassComponent,
  data: {
    authorities: ['ROLE_CHILD_PAID'],
    pageTitle: 'businesslogic.kindergartenclass.title'
  },
  resolve: {
    kindergartenClass: KindergartenClassResolve
  },
  canActivate: [UserRouteAccessService]
};

export const detailKindergartenclassRouteTeacher: Route = {
  path: 'teacher/class/:id',
  component: DetailKindergartenclassComponent,
  data: {
    authorities: ['ROLE_TEACHER_PAID'],
    pageTitle: 'businesslogic.kindergartenclass.title'
  },
  resolve: {
    kindergartenClass: KindergartenClassResolve
  },
  canActivate: [UserRouteAccessService]
};

export const listKindergartenclassRoute: Route = {
  path: 'teacher/classes',
  component: ListKindergartenclassComponent,
  data: {
    authorities: ['ROLE_TEACHER_PAID'],
    pageTitle: 'businesslogic.list.kindergartenclass.title'
  },
  resolve: {
    kindergartenClass: KindergartenClassResolve
  },
  canActivate: [UserRouteAccessService]
};

export const listKindergartenclassRouteChild: Route = {
  path: 'child/classes',
  component: ListKindergartenclassComponent,
  data: {
    authorities: ['ROLE_CHILD_PAID'],
    pageTitle: 'businesslogic.list.kindergartenclass.title'
  },
  resolve: {
    kindergartenClass: KindergartenClassResolve
  },
  canActivate: [UserRouteAccessService]
};

export const selectKindergartenclassRoute: Route = {
  path: 'child/select',
  component: SelectKindergartenclassComponent,
  data: {
    authorities: ['ROLE_CHILD_PAID'],
    pageTitle: 'businesslogic.list.kindergartenclass.title'
  },
  resolve: {
    kindergartenClass: KindergartenClassResolve
  },
  canActivate: [UserRouteAccessService]
};

export const listKindergartenclassCommentPopupRoute: Route = {
  path: 'teacher/classes/:id/delete',
  component: ListKindergartenclassComponent,
  resolve: {
    comment: CommentResolve
  },
  data: {
    authorities: ['ROLE_USER', 'ROLE_TEACHER_PAID'],
    pageTitle: 'mentalApp.comment.home.title'
  },
  canActivate: [UserRouteAccessService]
};

export const listKindergartenclassCommentPopupRouteChild: Route = {
  path: 'child/classes/:id/delete',
  component: ListKindergartenclassComponent,
  resolve: {
    comment: CommentResolve
  },
  data: {
    authorities: ['ROLE_USER', 'ROLE_CHILD_PAID'],
    pageTitle: 'mentalApp.comment.home.title'
  },
  canActivate: [UserRouteAccessService]
};

标签： angularwebpackjhipsterwebpack-dev-server

Answer 1

*.route.ts我仍然不清楚为什么，但是在我将大代码分成几个之后，一切都开始在 browsersync 中工作：

import { Route, Routes } from '@angular/router';

import {
  CreateKindergartenclassComponent,
  DetailKindergartenclassComponent,
  ListKindergartenclassComponent,
  SelectKindergartenclassComponent
} from 'app/businesslogic';
import { UserRouteAccessService } from 'app/core';
import { KindergartenClassResolve } from 'app/entities/kindergarten-class';
import { CommentResolve } from 'app/entities/comment';

export const createKindergartenclassRoute: Route = {
  path: 'teacher/class/create',
  component: CreateKindergartenclassComponent,
  data: {
    authorities: ['ROLE_TEACHER_PAID'],
    pageTitle: 'businesslogic.create.kindergartenclass.title'
  },
  canActivate: [UserRouteAccessService]
};

和

import { Route, Routes } from '@angular/router';

import {
  CreateKindergartenclassComponent,
  DetailKindergartenclassComponent,
  ListKindergartenclassComponent,
  SelectKindergartenclassComponent
} from 'app/businesslogic';
import { UserRouteAccessService } from 'app/core';
import { KindergartenClassResolve } from 'app/entities/kindergarten-class';
import { CommentResolve } from 'app/entities/comment';

export const listKindergartenclassCommentPopupRoute: Route = {
  path: 'teacher/classes/:id/delete',
  component: ListKindergartenclassComponent,
  resolve: {
    comment: CommentResolve
  },
  data: {
    authorities: ['ROLE_USER', 'ROLE_TEACHER_PAID'],
    pageTitle: 'mentalApp.comment.home.title'
  },
  canActivate: [UserRouteAccessService]
};

export const listKindergartenclassCommentPopupRouteChild: Route = {
  path: 'child/classes/:id/delete',
  component: ListKindergartenclassComponent,
  resolve: {
    comment: CommentResolve
  },
  data: {
    authorities: ['ROLE_USER', 'ROLE_CHILD_PAID'],
    pageTitle: 'mentalApp.comment.home.title'
  },
  canActivate: [UserRouteAccessService]
};

和

import { Route, Routes } from '@angular/router';

import {
  CreateKindergartenclassComponent,
  DetailKindergartenclassComponent,
  ListKindergartenclassComponent,
  SelectKindergartenclassComponent
} from 'app/businesslogic';
import { UserRouteAccessService } from 'app/core';
import { KindergartenClassResolve } from 'app/entities/kindergarten-class';
import { CommentResolve } from 'app/entities/comment';

export const detailKindergartenclassRoute: Route = {
  path: 'teacher/class/:id',
  component: DetailKindergartenclassComponent,
  data: {
    authorities: ['ROLE_TEACHER_PAID'],
    pageTitle: 'businesslogic.kindergartenclass.title'
  },
  resolve: {
    kindergartenClass: KindergartenClassResolve
  },
  canActivate: [UserRouteAccessService]
};

export const detailKindergartenclassRouteChild: Route = {
  path: 'child/class/:id',
  component: DetailKindergartenclassComponent,
  data: {
    authorities: ['ROLE_CHILD_PAID'],
    pageTitle: 'businesslogic.kindergartenclass.title'
  },
  resolve: {
    kindergartenClass: KindergartenClassResolve
  },
  canActivate: [UserRouteAccessService]
};

和

import { Route, Routes } from '@angular/router';

import {
  CreateKindergartenclassComponent,
  DetailKindergartenclassComponent,
  ListKindergartenclassComponent,
  SelectKindergartenclassComponent
} from 'app/businesslogic';
import { UserRouteAccessService } from 'app/core';
import { KindergartenClassResolve } from 'app/entities/kindergarten-class';
import { CommentResolve } from 'app/entities/comment';

export const listKindergartenclassRoute: Route = {
  path: 'teacher/classes',
  component: ListKindergartenclassComponent,
  data: {
    authorities: ['ROLE_TEACHER_PAID'],
    pageTitle: 'businesslogic.list.kindergartenclass.title'
  },
  resolve: {
    kindergartenClass: KindergartenClassResolve
  },
  canActivate: [UserRouteAccessService]
};

export const listKindergartenclassRouteChild: Route = {
  path: 'child/classes',
  component: ListKindergartenclassComponent,
  data: {
    authorities: ['ROLE_CHILD_PAID'],
    pageTitle: 'businesslogic.list.kindergartenclass.title'
  },
  resolve: {
    kindergartenClass: KindergartenClassResolve
  },
  canActivate: [UserRouteAccessService]
};

和

import { Route, Routes } from '@angular/router';

import {
  CreateKindergartenclassComponent,
  DetailKindergartenclassComponent,
  ListKindergartenclassComponent,
  SelectKindergartenclassComponent
} from 'app/businesslogic';
import { UserRouteAccessService } from 'app/core';
import { KindergartenClassResolve } from 'app/entities/kindergarten-class';
import { CommentResolve } from 'app/entities/comment';

export const selectKindergartenclassRoute: Route = {
  path: 'child/select',
  component: SelectKindergartenclassComponent,
  data: {
    authorities: ['ROLE_CHILD_PAID'],
    pageTitle: 'businesslogic.list.kindergartenclass.title'
  },
  resolve: {
    kindergartenClass: KindergartenClassResolve
  },
  canActivate: [UserRouteAccessService]
};

对我来说仍然是 Angular 魔法，但我仍然不知道是什么特殊的分裂导致了这个问题。