Angular 9 与 ui 路由器的混合导致在设置之前尝试获取 AngularJS 注入器。如何debug/fix？
Angular 9 hybrid with ui router causes Trying to get the AngularJS injector before it being set. How to debug/fix?
[编辑] 我创建了一个带有此错误的演示存储库：https://github.com/SamanthaAdrichem/hybrid-lazy-load-angularjs-injector-error
我们已经按照说明进行操作，并且在普通混合上运行良好，但是添加延迟加载失败并出现上述奇怪的错误，并且总是按照文档所说的方式实现 ui 路由器（如您所见在下面的代码中）。
加载应用程序时一切正常，但是当点击延迟加载的路由时出现错误
Transition Rejection($id: 0 type: 6, message: The transition errored,
detail: Error: Trying to get the AngularJS injector before it being
set.)
我已经尝试过此处列出的解决方案
https://github.com/ui-router/angular-hybrid/issues/93
https://github.com/ui-router/angular-hybrid/issues/150
https://github.com/ui-router/angular-hybrid/issues/395
https://github.com/ui-router/sample-app-angular-hybrid/issues/10
但是其中 none 个解决了它。我们不使用 ng serve 因为它会因随机内存问题而崩溃（可能也是由于混合），我们需要代理到登录页面，但登录页面和我们的项目将 运行 在同一端口上，这是不可能的。所以这需要在后端进行一些重构。
它有时会加载一个新的块文件，具体取决于我要访问的页面。但大多数时候我都会收到这个错误。
有趣的是，在我正在测试的页面中，我们没有使用任何混合代码。
基本上我们不再升级任何代码，我们只是降级一些观察者以打开旧页面的模式。
这些是我们的版本 运行
"@angular/cli": "9.1.7",
"@angular/animations": "9.0.7",
"@angular/common": "9.0.7",
"@angular/compiler": "9.0.7",
"@angular/core": "9.0.7",
"@angular/forms": "9.0.7",
"@angular/localize": "9.0.7",
"@angular/platform-browser": "9.0.7",
"@angular/platform-browser-dynamic": "9.0.7",
"@angular/router": "9.0.7",
"@angular/upgrade": "9.0.7",
"@uirouter/angular": "6.0.1",
"@uirouter/angular-hybrid": "10.0.1",
"@uirouter/angularjs": "1.0.26",
"@uirouter/core": "6.0.5",
"@uirouter/rx": "0.6.5",
下面是详细的错误和一些代码，不知道还有什么可以分享或我可以安全分享的内容。
任何关于如何调试它的建议都会很好！
详细错误
stateService.ts?8765:537 Transition Rejection($id: 0 type: 6, message: The transition errored, detail: Error: Trying to get the AngularJS injector before it being set.)
$defaultErrorHandler @ stateService.ts?8765:537
eval @ stateService.ts?8765:379
processQueue @ angular.js?21b1:17963
eval @ angular.js?21b1:18037
$digest @ angular.js?21b1:19176
eval @ upgrade_module.ts?423f:268
schedulerFn @ event_emitter.ts?938d:96
SafeSubscriber.__tryOrUnsub @ Subscriber.ts?face:266
SafeSubscriber.next @ Subscriber.ts?face:208
Subscriber._next @ Subscriber.ts?face:140
Subscriber.next @ Subscriber.ts?face:100
Subject.next @ Subject.ts?4a10:71
EventEmitter.emit @ event_emitter.ts?938d:86
checkStable @ ng_zone.ts?9664:224
onHasTask @ ng_zone.ts?9664:314
ZoneDelegate.hasTask @ zone.js?d135:440
ZoneDelegate._updateTaskCount @ zone.js?d135:462
Zone._updateTaskCount @ zone.js?d135:284
Zone.runTask @ zone.js?d135:205
drainMicroTaskQueue @ zone.js?d135:601
Promise.then (async)
scheduleMicroTask @ zone.js?d135:584
ZoneDelegate.scheduleTask @ zone.js?d135:410
onScheduleTask @ zone.js?d135:294
ZoneDelegate.scheduleTask @ zone.js?d135:400
Zone.scheduleTask @ zone.js?d135:231
Zone.scheduleMicroTask @ zone.js?d135:251
scheduleResolveOrReject @ zone.js?d135:881
resolvePromise @ zone.js?d135:819
eval @ zone.js?d135:739
webpackJsonpCallback @ app.js?v=1591962370205:26
(anonymous) @ 0.js?v=1591962370205:1
stateService.ts?8765:538 Error: Trying to get the AngularJS injector before it being set.
at injectorFactory (angular1_providers.ts?397c:22)
at _callFactory (ng_module.ts?c185:163)
at _createProviderInstance (ng_module.ts?c185:74)
at resolveNgModuleDep (ng_module.ts?c185:74)
at _callFactory (ng_module.ts?c185:163)
at _createProviderInstance (ng_module.ts?c185:74)
at resolveNgModuleDep (ng_module.ts?c185:74)
at _callFactory (ng_module.ts?c185:163)
at _createProviderInstance (ng_module.ts?c185:74)
at resolveNgModuleDep (ng_module.ts?c185:74)
at NgModuleRef_.get (refs.ts?151c:134)
at applyNgModule (lazyLoadNgModule.ts?7cfb:143)
at applyModule (lazyLoadNgModule.ts?7cfb:79)
at ZoneDelegate.invoke (zone.js?d135:384)
at Object.onInvoke (ng_zone.ts?9664:224)
at ZoneDelegate.invoke (zone.js?d135:384)
at Zone.run (zone.js?d135:143)
at eval (zone.js?d135:891)
at ZoneDelegate.invokeTask (zone.js?d135:419)
at Object.onInvokeTask (ng_zone.ts?9664:224)
at ZoneDelegate.invokeTask (zone.js?d135:419)
at Zone.runTask (zone.js?d135:188)
at drainMicroTaskQueue (zone.js?d135:601)
我们的main.ts
// Bootstrapping
import {enableProdMode, NgModuleRef, NgZone, ViewEncapsulation} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {dom, library} from '@fortawesome/fontawesome-svg-core';
import {UIRouter, UrlService} from '@uirouter/core';
import {icons} from 'app/scripts/modules/app-layout/icons/icons';
import 'bootstrap/dist/js/bootstrap.js';
import 'expose-loader?jQuery!expose-loader?$!jquery';
import 'expose-loader?moment!moment';
import 'scripts/app.module';
import 'scripts/homer';
import 'scripts/static.assets';
import {AppModule} from 'src/app/app.module';
import {environment} from 'src/environments/environment';
library.add(...icons);
dom.watch();
// If ready
if (/comp|inter|loaded/.test(document.readyState)) {
bootstrap();
} else {
document.addEventListener('DOMContentLoaded', bootstrap);
}
function bootstrap(): void {
if (true === environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(
AppModule,
[{
defaultEncapsulation: ViewEncapsulation.None
}]
).then((platformRef: NgModuleRef<AppModule>) => {
// Initialize the Angular Module
// get() the UIRouter instance from DI to initialize the router
const urlService: UrlService = platformRef.injector.get(UIRouter).urlService;
// Instruct UIRouter to listen to URL changes
platformRef.injector.get<NgZone>(NgZone).run(() => {
urlService.listen();
urlService.sync();
});
});
}
我们的app.module.ts
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {DoBootstrap, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {setAngularJSGlobal, UpgradeModule} from '@angular/upgrade/static';
import {MissingTranslationHandler, TranslateModule, TranslateService} from '@ngx-translate/core';
import {UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
import * as angular from 'angular';
import {AngularModalObserver} from 'hybrid/modal/modal.observer';
import {AdvertiserLastTransactionsModalObserver} from 'hybrid/modals/advertiser-last-transactions-modal.observer';
import {CampaignsModalObserver} from 'hybrid/modals/campaigns-modal.observer';
import {GoogleModalObserver} from 'hybrid/modals/google-modal.observer';
import {InvoiceModalObserver} from 'hybrid/modals/invoice-modal.observer';
import {PublisherLastTransactionsModalObserver} from 'hybrid/modals/publisher-last-transactions-modal.observer';
import {TicketsModalObserver} from 'hybrid/modals/tickets-modal.observer';
import {AngularTranslationsObserver} from 'hybrid/translations/translations.observer';
import {DatepickerModule} from 'ngx-bootstrap/datepicker';
import {ModalModule} from 'ngx-bootstrap/modal';
import {PagesAdminModule} from 'pages/admin/admin.a2.module';
import {GdprCleanupModule} from 'pages/publisher/account/gdpr-cleanup/gdpr-cleanup.module';
import {LayoutEventsObserver} from 'scripts/modules/app-layout/layout-events.observer';
import {ElementsExternalLinkModule} from 'scripts/modules/elements/external-link.a2/external-link.module';
import {ElementsPageHeaderModule} from 'scripts/modules/elements/page-header/page-header.module';
import {LocalizationMissingTranslationsService} from 'scripts/modules/localization/missing-translations.service';
import {AdminRoutingModule} from 'src/app/admin/admin-routing.module';
import {AdvertiserModule} from 'src/app/advertiser/advertiser.module';
import {AccountModel} from 'src/app/core/auth/account.model';
import {AuthObserver} from 'src/app/core/auth/auth.observer';
import {AuthService} from 'src/app/core/auth/auth.service';
import {IdentityService} from 'src/app/core/auth/identity.service';
import {TokenModel} from 'src/app/core/auth/token.model';
import {CoreModule} from 'src/app/core/core.module';
import {UserProfileModel} from 'src/app/core/data/backend/user/profile/user-profile.model';
import {AuthInterceptor} from 'src/app/core/interceptors/auth.interceptor';
import {CacheInterceptor} from 'src/app/core/interceptors/cache.interceptor';
import {GetAsPostInterceptor} from 'src/app/core/interceptors/get-as-post.interceptor';
import {GetMultiInterceptor} from 'src/app/core/interceptors/get-multi.interceptor';
import {LocalizationService} from 'src/app/core/localization/localization.service';
import {LeadgenerationModule} from 'src/app/leadgeneration/leadgeneration.module';
import {EnergyNlModule} from 'src/app/publisher/pages/widgets/widgets/energy/energy-nl/energy-nl.module';
import {PublisherModule} from 'src/app/publisher/publisher.module';
setAngularJSGlobal(angular);
@NgModule({
exports: [
TranslateModule
],
imports: [
AdminRoutingModule,
AdvertiserModule,
BrowserModule,
BrowserAnimationsModule,
CoreModule,
DatepickerModule.forRoot(),
ElementsExternalLinkModule,
ElementsPageHeaderModule,
GdprCleanupModule,
HttpClientModule,
LeadgenerationModule,
ModalModule.forRoot(),
PagesAdminModule,
PublisherModule,
TranslateModule.forRoot({
missingTranslationHandler: {
provide: MissingTranslationHandler,
useClass: LocalizationMissingTranslationsService
}
}),
UIRouterUpgradeModule.forRoot(),
UpgradeModule,
// These modules are needed here during hybrid
EnergyNlModule, // This one can be removed once the entire widget pages has been migrated
],
// All providers you need in AngularJS
providers: [
// These observers need to be here, it's required outside of it's own scope.
// Angular creates a new instance based on the require module level
AdvertiserLastTransactionsModalObserver,
AngularModalObserver,
AngularTranslationsObserver,
AuthObserver,
CampaignsModalObserver,
GoogleModalObserver,
InvoiceModalObserver,
LayoutEventsObserver,
PublisherLastTransactionsModalObserver,
TicketsModalObserver,
// Request interceptors, might be able to move them to the actual modules, but those are generated
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: GetAsPostInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: GetMultiInterceptor, multi: true },
]
})
export class AppModule implements DoBootstrap {
constructor(
private angularTranslationsObserver: AngularTranslationsObserver,
private identityService: IdentityService,
private authObserver: AuthObserver,
private authService: AuthService,
private localizationService: LocalizationService,
private translateService: TranslateService,
private upgrade: UpgradeModule
) {}
ngDoBootstrap(): void {
this.upgrade.bootstrap(document.body, ['dcApp'], { strictDi: true });
this.angularTranslationsObserver.languageChange$.subscribe(
(language: string) => this.localizationService.setLanguage(language)
);
this.angularTranslationsObserver.translationsChange$.subscribe(
(translations: object) => this.setTranslations(translations)
);
this.authObserver.accountChange$.subscribe(
(account: AccountModel) => this.identityService.setAccount(account)
);
this.authObserver.tokenChange$.subscribe(
(token: string) => {
this.authService.setToken(token);
let decryptedToken: TokenModel = this.authService.getDecryptedToken();
this.identityService.setAdmin(Boolean(decryptedToken && decryptedToken.admin));
this.identityService.setPermissions(decryptedToken.usg);
}
);
this.authObserver.userChange$.subscribe(
(user: UserProfileModel) => {
this.identityService.setUser(user);
this.localizationService.checkLanguageLocale();
}
);
}
setTranslations(translations: object): void {
for (const language in translations) {
if (translations.hasOwnProperty(language)) {
this.translateService.setTranslation(language, translations[language], true);
}
}
}
}
管理员-routing.module.ts
import {NgModule} from '@angular/core';
import {NgHybridStateDeclaration, UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
const states: NgHybridStateDeclaration[] = [{
name: 'admin.**',
url: '/admin',
loadChildren: () => import('src/app/admin/admin.module')
.then((result: {AdminModule: any}) => result.AdminModule)
}];
@NgModule({
imports: [
UIRouterUpgradeModule.forChild({states: states})
],
exports: [
UIRouterUpgradeModule
],
})
export class AdminRoutingModule {}
然后是管理模块
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {MessageCenterModule} from 'src/app/admin/pages/message-center/message-center.module';
import {NewsModule} from 'src/app/admin/pages/news/news.module';
import {SearchModule} from 'src/app/admin/pages/search/search.module';
@NgModule({
declarations: [],
imports: [
CommonModule,
MessageCenterModule,
NewsModule,
SearchModule
]
})
export class AdminModule {}
例如search.module
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';
import {ElementsMessagesModule} from 'scripts/modules/elements/messages.a2/messages.module';
import {ElementsNoResultsModule} from 'scripts/modules/elements/no-results.a2/no-results.module';
import {ElementsPageHeaderModule} from 'scripts/modules/elements/page-header/page-header.module';
import {BackendModule} from 'src/app/admin/data/backend/backend.module';
import {ItemModule} from 'src/app/admin/pages/search/item/item.module';
import {SearchRoutingModule} from 'src/app/admin/pages/search/search-routing.module';
import {SearchComponent} from 'src/app/admin/pages/search/search.component';
import {FilterModule} from 'src/app/core/components/filter/filter.module';
import {InputModule} from 'src/app/core/components/filter/input/input.module';
import {PanelModule} from 'src/app/core/components/panel/panel.module';
@NgModule({
declarations: [SearchComponent],
imports: [
BackendModule,
CommonModule,
ElementsMessagesModule,
ElementsNoResultsModule,
ElementsPageHeaderModule,
InputModule,
ItemModule,
PanelModule,
SearchRoutingModule,
TranslateModule,
FilterModule,
],
exports: [SearchComponent]
})
export class SearchModule { }
如您所见，搜索路由模块尚未延迟加载，引入时我们会将搜索路由模块包含在管理模块中，并在路由模块中引用搜索模块
import {NgModule} from '@angular/core';
import {UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
import {StateDeclaration} from 'hybrid/state.declaration';
import {SearchComponent} from 'src/app/admin/pages/search/search.component';
import {BASIC} from 'src/app/core/auth/permissions/admin.constant';
const states: StateDeclaration[] = [{
name: 'admin.search',
url: '/admin/search',
component: SearchComponent,
permissions: [BASIC],
requiresAuth: true
}];
@NgModule({
imports: [
UIRouterUpgradeModule.forChild({states: states})
],
exports: [
UIRouterUpgradeModule
],
})
export class SearchRoutingModule {}
我们的angularjs模块
'use strict';
import angular from 'angular';
// Enable this line and the .run line to enable uiRouter visualizer
// import { visualizer } from '@uirouter/visualizer';
angular.module('dcApp', [
'dcApp.config', // this needs to be the very first dependency
'dcApp.publisher.campaigns.modal',
'dcLayout',
'dcLibRedirect',
'dcLibUniqueId',
/* Pages */
'dcApp.admin',
'dcApp.advertiser',
'dcApp.common',
'dcApp.leadgeneration',
'dcApp.publisher'
]);
// Enable this line and the import line to enable uiRouter visualizer
// angular.module('dcApp').run(['$uiRouter', ($uiRouter) => visualizer($uiRouter) ]);
/* Config files */
require('scripts/app-config/app-config.module');
require('scripts/helper/downloadfix');
require('scripts/helper/helper');
/* main module files */
require('scripts/app.controller');
require('hybrid/modal/modal.downgrade');
require('hybrid/cache-service.downgrade');
require('hybrid/modals/campaigns-modal.downgrade');
require('hybrid/modals/invoice-modal.downgrade');
require('hybrid/modals/tickets-modal.downgrade');
require('hybrid/modals/google-modal.downgrade');
require('hybrid/modals/advertiser-last-transactions-modal.downgrade');
require('hybrid/modals/publisher-last-transactions-modal.downgrade');
/* Other main modules */
require('pages/admin/admin.module');
require('pages/advertiser/advertiser.module');
require('pages/common.module');
require('pages/leadgeneration/leadgeneration.module');
require('pages/publisher/publisher.module');
```
and main app.controller
```
'use strict';
import angular from 'angular';
import $ from 'jquery';
require('scripts/modules/app-layout/layout.module');
angular.module('dcApp')
.controller( 'MainController', MainController );
MainController.$inject = [
'$location',
'$transitions',
'$window',
'AdvertiserFinancialInvoicesInvoiceDetailModal',
'AdvertiserLastTransactionsModalObserver',
'AdvertiserTransactionsOverviewDetailModal',
'AngularModalObserver',
'AppConfig',
'AppLayout',
'AuthAuthenticator',
'AuthAuthenticatorHelper',
'AuthIdentity',
'AuthObserver',
'CampaignInformationModal',
'ConnectionsGoogleLoginModal',
'ElementsMessagesHelper',
'GoogleModalObserver',
'InvoiceModalObserver',
'MediaVerificationModal',
'PublisherLastTransactionsModalObserver',
'TicketDetailModal',
'TicketsModalObserver',
'TransactionModal'
];
function MainController(
$location,
$transitions,
$window,
AdvertiserFinancialInvoicesInvoiceDetailModal,
AdvertiserLastTransactionsModalObserver,
AdvertiserTransactionsOverviewDetailModal,
AngularModalObserver,
AppConfig,
AppLayout,
AuthAuthenticator,
AuthAuthenticatorHelper,
AuthIdentity,
AuthObserver,
CampaignInformationModal,
ConnectionsGoogleLoginModal,
ElementsMessagesHelper,
GoogleModalObserver,
InvoiceModalObserver,
MediaVerificationModal,
PublisherLastTransactionsModalObserver,
TicketDetailModal,
TicketsModalObserver,
TransactionModal
) {
let $ctrl = this;
$ctrl.layout = AppLayout;
$ctrl.$onInit = onInit;
function onInit() {
initPage(true);
$transitions.onError( {}, function( transition ) {
let transitionError = transition.error();
if ([4,6].indexOf(transitionError.type) !== -1)
{
ElementsMessagesHelper.getInstance('generalError').addMessage( transition.error(), 'error', 'primaryError' );
AppLayout.hideSplashPage();
$location.path( '/error' );
}
} );
$transitions.onSuccess({}, function(transition) {
initPage(transition.from().name !== transition.to().name);
if ($window.ga) {
$window.ga('send', 'pageview', { page: $location.url() });
}
});
// No on destroy since the entire app is then gone
AuthObserver.loginAsChange$.subscribe(function __loginAs(loginAsModel) {
AuthAuthenticatorHelper.loginAs(
{
id: loginAsModel.account_id,
type: loginAsModel.account_type
},
loginAsModel.user_id || null,
loginAsModel.destination || null,
loginAsModel.sameWindow || null
);
});
AuthObserver.activityChange$.subscribe(AuthAuthenticator.updateLastActivity);
AuthObserver.logoutExpire$.subscribe(AuthAuthenticator.logoutExpire);
AuthObserver.updateAccount$.subscribe((account) => AuthIdentity.initAccount(AuthIdentity.getAccountType(), account));
AngularModalObserver.showMediaVerification$.subscribe((event) => MediaVerificationModal.show(event.mediaId));
InvoiceModalObserver.openModal$.subscribe(AdvertiserFinancialInvoicesInvoiceDetailModal.show);
PublisherLastTransactionsModalObserver.openModal$.subscribe((affiliatemarketingId) => TransactionModal.show(affiliatemarketingId));
AdvertiserLastTransactionsModalObserver.openModal$.subscribe((affiliatemarketingId) => AdvertiserTransactionsOverviewDetailModal.show(affiliatemarketingId));
TicketsModalObserver.openModal$.subscribe((ticketId) => TicketDetailModal.show(ticketId, false));
GoogleModalObserver.openModal$.subscribe(() => ConnectionsGoogleLoginModal.show())
}
function initPage(pageChange) {
if (pageChange) {
$(window).scrollTop(0);
}
$ctrl.currentPage = $location.path();
AppLayout.hideSplashPage();
}
}
尝试在 angular.json 的脚本部分添加这个：
"scripts": [
"./.node_modules/angular/angular.js"
]
或者，尝试将此添加到您的 main.ts（这是我使用的）：
import {setAngularJSGlobal} from '@angular/upgrade/static';
import * as angular from 'angular';
setAngularJSGlobal(angular);
如果您想延迟加载 angular 模块，您应该使用 @uirouter/angular 中的 UIRouterModule 而不是 @uirouter/angular-hybrid 中的 UIRouterUpgradeModule。基本上，避免导入 UIRouterUpgradeModule 并且提到的错误将消失 -
SearchRoutingModule:
const states = [{
name: 'admin.search',
url: '/admin/search',
component: SearchComponent,
permissions: [],
requiresAuth: false
}];
@NgModule({
imports: [
UIRouterModule.forChild({states: states})
],
exports: [
UIRouterModule
],
})
export class SearchRoutingModule {}
AdminRoutingModule:
const states = [{
name: 'admin.search.**',
url: '/admin/search',
loadChildren: () => import ('./pages/search/search.module').then((module: any) => module.SearchModule)
}];
@NgModule({
imports: [
UIRouterModule.forChild({states: states})
],
exports: [
UIRouterModule
],
})
export class AdminRoutingModule {}
AppRoutingModule:
const adminStates = [{
name: 'admin.**',
url: '/admin',
loadChildren: () => import ('./admin/admin.module').then((module: any) => module.AdminModule)
}];
@NgModule({
imports: [
UIRouterModule.forRoot({states: adminStates})
],
exports: [
UIRouterModule
],
})
export class AppRoutingModule {}
注:
在上述修复后您还会遇到一些其他错误，这些错误应该很容易修复。如果您遇到困难，请 post 为他们单独提问。
经过长时间的搜索并感谢其他两位用户的帮助，答案实际上非常简单（正如预期的那样）。
出于某些奇怪的原因，我们正在导出 UIRouterUpgradeModule，这本不应该完成。 （我们这样做可能是因为我们回想那是它是如何工作的？我不知道）。但是通过删除导出，错误消失并且一切正常。
例如，管理路由模块变为：
import {NgModule} from '@angular/core';
import {NgHybridStateDeclaration, UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
const states: NgHybridStateDeclaration[] = [{
name: 'admin.**',
url: '/admin',
loadChildren: () => import('src/app/admin/admin.module')
.then((result: {AdminModule: any}) => result.AdminModule)
}];
@NgModule({
imports: [
UIRouterUpgradeModule.forChild({states: states})
]
})
export class AdminRoutingModule {}
是的，还有一些其他错误，但这些很容易解决。例如，在我的演示中，AdminModule 仍然在主模块中导入，不应再导入，因为它是延迟加载的。
并且每个惰性**状态也应该存在，例如我们创建了admin.**，这意味着AdminModule 需要一个名为admin 的路由。但这在错误中是字面意思。
[编辑] 我创建了一个带有此错误的演示存储库：https://github.com/SamanthaAdrichem/hybrid-lazy-load-angularjs-injector-error
我们已经按照说明进行操作，并且在普通混合上运行良好，但是添加延迟加载失败并出现上述奇怪的错误，并且总是按照文档所说的方式实现 ui 路由器（如您所见在下面的代码中）。
加载应用程序时一切正常，但是当点击延迟加载的路由时出现错误
Transition Rejection($id: 0 type: 6, message: The transition errored, detail: Error: Trying to get the AngularJS injector before it being set.)
我已经尝试过此处列出的解决方案
https://github.com/ui-router/angular-hybrid/issues/93
https://github.com/ui-router/angular-hybrid/issues/150
https://github.com/ui-router/angular-hybrid/issues/395
https://github.com/ui-router/sample-app-angular-hybrid/issues/10
但是其中 none 个解决了它。我们不使用 ng serve 因为它会因随机内存问题而崩溃（可能也是由于混合），我们需要代理到登录页面，但登录页面和我们的项目将 运行 在同一端口上，这是不可能的。所以这需要在后端进行一些重构。
它有时会加载一个新的块文件，具体取决于我要访问的页面。但大多数时候我都会收到这个错误。
有趣的是，在我正在测试的页面中，我们没有使用任何混合代码。 基本上我们不再升级任何代码，我们只是降级一些观察者以打开旧页面的模式。
这些是我们的版本 运行
"@angular/cli": "9.1.7",
"@angular/animations": "9.0.7",
"@angular/common": "9.0.7",
"@angular/compiler": "9.0.7",
"@angular/core": "9.0.7",
"@angular/forms": "9.0.7",
"@angular/localize": "9.0.7",
"@angular/platform-browser": "9.0.7",
"@angular/platform-browser-dynamic": "9.0.7",
"@angular/router": "9.0.7",
"@angular/upgrade": "9.0.7",
"@uirouter/angular": "6.0.1",
"@uirouter/angular-hybrid": "10.0.1",
"@uirouter/angularjs": "1.0.26",
"@uirouter/core": "6.0.5",
"@uirouter/rx": "0.6.5",
下面是详细的错误和一些代码，不知道还有什么可以分享或我可以安全分享的内容。
任何关于如何调试它的建议都会很好！
详细错误
stateService.ts?8765:537 Transition Rejection($id: 0 type: 6, message: The transition errored, detail: Error: Trying to get the AngularJS injector before it being set.)
$defaultErrorHandler @ stateService.ts?8765:537
eval @ stateService.ts?8765:379
processQueue @ angular.js?21b1:17963
eval @ angular.js?21b1:18037
$digest @ angular.js?21b1:19176
eval @ upgrade_module.ts?423f:268
schedulerFn @ event_emitter.ts?938d:96
SafeSubscriber.__tryOrUnsub @ Subscriber.ts?face:266
SafeSubscriber.next @ Subscriber.ts?face:208
Subscriber._next @ Subscriber.ts?face:140
Subscriber.next @ Subscriber.ts?face:100
Subject.next @ Subject.ts?4a10:71
EventEmitter.emit @ event_emitter.ts?938d:86
checkStable @ ng_zone.ts?9664:224
onHasTask @ ng_zone.ts?9664:314
ZoneDelegate.hasTask @ zone.js?d135:440
ZoneDelegate._updateTaskCount @ zone.js?d135:462
Zone._updateTaskCount @ zone.js?d135:284
Zone.runTask @ zone.js?d135:205
drainMicroTaskQueue @ zone.js?d135:601
Promise.then (async)
scheduleMicroTask @ zone.js?d135:584
ZoneDelegate.scheduleTask @ zone.js?d135:410
onScheduleTask @ zone.js?d135:294
ZoneDelegate.scheduleTask @ zone.js?d135:400
Zone.scheduleTask @ zone.js?d135:231
Zone.scheduleMicroTask @ zone.js?d135:251
scheduleResolveOrReject @ zone.js?d135:881
resolvePromise @ zone.js?d135:819
eval @ zone.js?d135:739
webpackJsonpCallback @ app.js?v=1591962370205:26
(anonymous) @ 0.js?v=1591962370205:1
stateService.ts?8765:538 Error: Trying to get the AngularJS injector before it being set.
at injectorFactory (angular1_providers.ts?397c:22)
at _callFactory (ng_module.ts?c185:163)
at _createProviderInstance (ng_module.ts?c185:74)
at resolveNgModuleDep (ng_module.ts?c185:74)
at _callFactory (ng_module.ts?c185:163)
at _createProviderInstance (ng_module.ts?c185:74)
at resolveNgModuleDep (ng_module.ts?c185:74)
at _callFactory (ng_module.ts?c185:163)
at _createProviderInstance (ng_module.ts?c185:74)
at resolveNgModuleDep (ng_module.ts?c185:74)
at NgModuleRef_.get (refs.ts?151c:134)
at applyNgModule (lazyLoadNgModule.ts?7cfb:143)
at applyModule (lazyLoadNgModule.ts?7cfb:79)
at ZoneDelegate.invoke (zone.js?d135:384)
at Object.onInvoke (ng_zone.ts?9664:224)
at ZoneDelegate.invoke (zone.js?d135:384)
at Zone.run (zone.js?d135:143)
at eval (zone.js?d135:891)
at ZoneDelegate.invokeTask (zone.js?d135:419)
at Object.onInvokeTask (ng_zone.ts?9664:224)
at ZoneDelegate.invokeTask (zone.js?d135:419)
at Zone.runTask (zone.js?d135:188)
at drainMicroTaskQueue (zone.js?d135:601)
我们的main.ts
// Bootstrapping
import {enableProdMode, NgModuleRef, NgZone, ViewEncapsulation} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {dom, library} from '@fortawesome/fontawesome-svg-core';
import {UIRouter, UrlService} from '@uirouter/core';
import {icons} from 'app/scripts/modules/app-layout/icons/icons';
import 'bootstrap/dist/js/bootstrap.js';
import 'expose-loader?jQuery!expose-loader?$!jquery';
import 'expose-loader?moment!moment';
import 'scripts/app.module';
import 'scripts/homer';
import 'scripts/static.assets';
import {AppModule} from 'src/app/app.module';
import {environment} from 'src/environments/environment';
library.add(...icons);
dom.watch();
// If ready
if (/comp|inter|loaded/.test(document.readyState)) {
bootstrap();
} else {
document.addEventListener('DOMContentLoaded', bootstrap);
}
function bootstrap(): void {
if (true === environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(
AppModule,
[{
defaultEncapsulation: ViewEncapsulation.None
}]
).then((platformRef: NgModuleRef<AppModule>) => {
// Initialize the Angular Module
// get() the UIRouter instance from DI to initialize the router
const urlService: UrlService = platformRef.injector.get(UIRouter).urlService;
// Instruct UIRouter to listen to URL changes
platformRef.injector.get<NgZone>(NgZone).run(() => {
urlService.listen();
urlService.sync();
});
});
}
我们的app.module.ts
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {DoBootstrap, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {setAngularJSGlobal, UpgradeModule} from '@angular/upgrade/static';
import {MissingTranslationHandler, TranslateModule, TranslateService} from '@ngx-translate/core';
import {UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
import * as angular from 'angular';
import {AngularModalObserver} from 'hybrid/modal/modal.observer';
import {AdvertiserLastTransactionsModalObserver} from 'hybrid/modals/advertiser-last-transactions-modal.observer';
import {CampaignsModalObserver} from 'hybrid/modals/campaigns-modal.observer';
import {GoogleModalObserver} from 'hybrid/modals/google-modal.observer';
import {InvoiceModalObserver} from 'hybrid/modals/invoice-modal.observer';
import {PublisherLastTransactionsModalObserver} from 'hybrid/modals/publisher-last-transactions-modal.observer';
import {TicketsModalObserver} from 'hybrid/modals/tickets-modal.observer';
import {AngularTranslationsObserver} from 'hybrid/translations/translations.observer';
import {DatepickerModule} from 'ngx-bootstrap/datepicker';
import {ModalModule} from 'ngx-bootstrap/modal';
import {PagesAdminModule} from 'pages/admin/admin.a2.module';
import {GdprCleanupModule} from 'pages/publisher/account/gdpr-cleanup/gdpr-cleanup.module';
import {LayoutEventsObserver} from 'scripts/modules/app-layout/layout-events.observer';
import {ElementsExternalLinkModule} from 'scripts/modules/elements/external-link.a2/external-link.module';
import {ElementsPageHeaderModule} from 'scripts/modules/elements/page-header/page-header.module';
import {LocalizationMissingTranslationsService} from 'scripts/modules/localization/missing-translations.service';
import {AdminRoutingModule} from 'src/app/admin/admin-routing.module';
import {AdvertiserModule} from 'src/app/advertiser/advertiser.module';
import {AccountModel} from 'src/app/core/auth/account.model';
import {AuthObserver} from 'src/app/core/auth/auth.observer';
import {AuthService} from 'src/app/core/auth/auth.service';
import {IdentityService} from 'src/app/core/auth/identity.service';
import {TokenModel} from 'src/app/core/auth/token.model';
import {CoreModule} from 'src/app/core/core.module';
import {UserProfileModel} from 'src/app/core/data/backend/user/profile/user-profile.model';
import {AuthInterceptor} from 'src/app/core/interceptors/auth.interceptor';
import {CacheInterceptor} from 'src/app/core/interceptors/cache.interceptor';
import {GetAsPostInterceptor} from 'src/app/core/interceptors/get-as-post.interceptor';
import {GetMultiInterceptor} from 'src/app/core/interceptors/get-multi.interceptor';
import {LocalizationService} from 'src/app/core/localization/localization.service';
import {LeadgenerationModule} from 'src/app/leadgeneration/leadgeneration.module';
import {EnergyNlModule} from 'src/app/publisher/pages/widgets/widgets/energy/energy-nl/energy-nl.module';
import {PublisherModule} from 'src/app/publisher/publisher.module';
setAngularJSGlobal(angular);
@NgModule({
exports: [
TranslateModule
],
imports: [
AdminRoutingModule,
AdvertiserModule,
BrowserModule,
BrowserAnimationsModule,
CoreModule,
DatepickerModule.forRoot(),
ElementsExternalLinkModule,
ElementsPageHeaderModule,
GdprCleanupModule,
HttpClientModule,
LeadgenerationModule,
ModalModule.forRoot(),
PagesAdminModule,
PublisherModule,
TranslateModule.forRoot({
missingTranslationHandler: {
provide: MissingTranslationHandler,
useClass: LocalizationMissingTranslationsService
}
}),
UIRouterUpgradeModule.forRoot(),
UpgradeModule,
// These modules are needed here during hybrid
EnergyNlModule, // This one can be removed once the entire widget pages has been migrated
],
// All providers you need in AngularJS
providers: [
// These observers need to be here, it's required outside of it's own scope.
// Angular creates a new instance based on the require module level
AdvertiserLastTransactionsModalObserver,
AngularModalObserver,
AngularTranslationsObserver,
AuthObserver,
CampaignsModalObserver,
GoogleModalObserver,
InvoiceModalObserver,
LayoutEventsObserver,
PublisherLastTransactionsModalObserver,
TicketsModalObserver,
// Request interceptors, might be able to move them to the actual modules, but those are generated
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: GetAsPostInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: GetMultiInterceptor, multi: true },
]
})
export class AppModule implements DoBootstrap {
constructor(
private angularTranslationsObserver: AngularTranslationsObserver,
private identityService: IdentityService,
private authObserver: AuthObserver,
private authService: AuthService,
private localizationService: LocalizationService,
private translateService: TranslateService,
private upgrade: UpgradeModule
) {}
ngDoBootstrap(): void {
this.upgrade.bootstrap(document.body, ['dcApp'], { strictDi: true });
this.angularTranslationsObserver.languageChange$.subscribe(
(language: string) => this.localizationService.setLanguage(language)
);
this.angularTranslationsObserver.translationsChange$.subscribe(
(translations: object) => this.setTranslations(translations)
);
this.authObserver.accountChange$.subscribe(
(account: AccountModel) => this.identityService.setAccount(account)
);
this.authObserver.tokenChange$.subscribe(
(token: string) => {
this.authService.setToken(token);
let decryptedToken: TokenModel = this.authService.getDecryptedToken();
this.identityService.setAdmin(Boolean(decryptedToken && decryptedToken.admin));
this.identityService.setPermissions(decryptedToken.usg);
}
);
this.authObserver.userChange$.subscribe(
(user: UserProfileModel) => {
this.identityService.setUser(user);
this.localizationService.checkLanguageLocale();
}
);
}
setTranslations(translations: object): void {
for (const language in translations) {
if (translations.hasOwnProperty(language)) {
this.translateService.setTranslation(language, translations[language], true);
}
}
}
}
管理员-routing.module.ts
import {NgModule} from '@angular/core';
import {NgHybridStateDeclaration, UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
const states: NgHybridStateDeclaration[] = [{
name: 'admin.**',
url: '/admin',
loadChildren: () => import('src/app/admin/admin.module')
.then((result: {AdminModule: any}) => result.AdminModule)
}];
@NgModule({
imports: [
UIRouterUpgradeModule.forChild({states: states})
],
exports: [
UIRouterUpgradeModule
],
})
export class AdminRoutingModule {}
然后是管理模块
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {MessageCenterModule} from 'src/app/admin/pages/message-center/message-center.module';
import {NewsModule} from 'src/app/admin/pages/news/news.module';
import {SearchModule} from 'src/app/admin/pages/search/search.module';
@NgModule({
declarations: [],
imports: [
CommonModule,
MessageCenterModule,
NewsModule,
SearchModule
]
})
export class AdminModule {}
例如search.module
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';
import {ElementsMessagesModule} from 'scripts/modules/elements/messages.a2/messages.module';
import {ElementsNoResultsModule} from 'scripts/modules/elements/no-results.a2/no-results.module';
import {ElementsPageHeaderModule} from 'scripts/modules/elements/page-header/page-header.module';
import {BackendModule} from 'src/app/admin/data/backend/backend.module';
import {ItemModule} from 'src/app/admin/pages/search/item/item.module';
import {SearchRoutingModule} from 'src/app/admin/pages/search/search-routing.module';
import {SearchComponent} from 'src/app/admin/pages/search/search.component';
import {FilterModule} from 'src/app/core/components/filter/filter.module';
import {InputModule} from 'src/app/core/components/filter/input/input.module';
import {PanelModule} from 'src/app/core/components/panel/panel.module';
@NgModule({
declarations: [SearchComponent],
imports: [
BackendModule,
CommonModule,
ElementsMessagesModule,
ElementsNoResultsModule,
ElementsPageHeaderModule,
InputModule,
ItemModule,
PanelModule,
SearchRoutingModule,
TranslateModule,
FilterModule,
],
exports: [SearchComponent]
})
export class SearchModule { }
如您所见，搜索路由模块尚未延迟加载，引入时我们会将搜索路由模块包含在管理模块中，并在路由模块中引用搜索模块
import {NgModule} from '@angular/core';
import {UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
import {StateDeclaration} from 'hybrid/state.declaration';
import {SearchComponent} from 'src/app/admin/pages/search/search.component';
import {BASIC} from 'src/app/core/auth/permissions/admin.constant';
const states: StateDeclaration[] = [{
name: 'admin.search',
url: '/admin/search',
component: SearchComponent,
permissions: [BASIC],
requiresAuth: true
}];
@NgModule({
imports: [
UIRouterUpgradeModule.forChild({states: states})
],
exports: [
UIRouterUpgradeModule
],
})
export class SearchRoutingModule {}
我们的angularjs模块
'use strict';
import angular from 'angular';
// Enable this line and the .run line to enable uiRouter visualizer
// import { visualizer } from '@uirouter/visualizer';
angular.module('dcApp', [
'dcApp.config', // this needs to be the very first dependency
'dcApp.publisher.campaigns.modal',
'dcLayout',
'dcLibRedirect',
'dcLibUniqueId',
/* Pages */
'dcApp.admin',
'dcApp.advertiser',
'dcApp.common',
'dcApp.leadgeneration',
'dcApp.publisher'
]);
// Enable this line and the import line to enable uiRouter visualizer
// angular.module('dcApp').run(['$uiRouter', ($uiRouter) => visualizer($uiRouter) ]);
/* Config files */
require('scripts/app-config/app-config.module');
require('scripts/helper/downloadfix');
require('scripts/helper/helper');
/* main module files */
require('scripts/app.controller');
require('hybrid/modal/modal.downgrade');
require('hybrid/cache-service.downgrade');
require('hybrid/modals/campaigns-modal.downgrade');
require('hybrid/modals/invoice-modal.downgrade');
require('hybrid/modals/tickets-modal.downgrade');
require('hybrid/modals/google-modal.downgrade');
require('hybrid/modals/advertiser-last-transactions-modal.downgrade');
require('hybrid/modals/publisher-last-transactions-modal.downgrade');
/* Other main modules */
require('pages/admin/admin.module');
require('pages/advertiser/advertiser.module');
require('pages/common.module');
require('pages/leadgeneration/leadgeneration.module');
require('pages/publisher/publisher.module');
```
and main app.controller
```
'use strict';
import angular from 'angular';
import $ from 'jquery';
require('scripts/modules/app-layout/layout.module');
angular.module('dcApp')
.controller( 'MainController', MainController );
MainController.$inject = [
'$location',
'$transitions',
'$window',
'AdvertiserFinancialInvoicesInvoiceDetailModal',
'AdvertiserLastTransactionsModalObserver',
'AdvertiserTransactionsOverviewDetailModal',
'AngularModalObserver',
'AppConfig',
'AppLayout',
'AuthAuthenticator',
'AuthAuthenticatorHelper',
'AuthIdentity',
'AuthObserver',
'CampaignInformationModal',
'ConnectionsGoogleLoginModal',
'ElementsMessagesHelper',
'GoogleModalObserver',
'InvoiceModalObserver',
'MediaVerificationModal',
'PublisherLastTransactionsModalObserver',
'TicketDetailModal',
'TicketsModalObserver',
'TransactionModal'
];
function MainController(
$location,
$transitions,
$window,
AdvertiserFinancialInvoicesInvoiceDetailModal,
AdvertiserLastTransactionsModalObserver,
AdvertiserTransactionsOverviewDetailModal,
AngularModalObserver,
AppConfig,
AppLayout,
AuthAuthenticator,
AuthAuthenticatorHelper,
AuthIdentity,
AuthObserver,
CampaignInformationModal,
ConnectionsGoogleLoginModal,
ElementsMessagesHelper,
GoogleModalObserver,
InvoiceModalObserver,
MediaVerificationModal,
PublisherLastTransactionsModalObserver,
TicketDetailModal,
TicketsModalObserver,
TransactionModal
) {
let $ctrl = this;
$ctrl.layout = AppLayout;
$ctrl.$onInit = onInit;
function onInit() {
initPage(true);
$transitions.onError( {}, function( transition ) {
let transitionError = transition.error();
if ([4,6].indexOf(transitionError.type) !== -1)
{
ElementsMessagesHelper.getInstance('generalError').addMessage( transition.error(), 'error', 'primaryError' );
AppLayout.hideSplashPage();
$location.path( '/error' );
}
} );
$transitions.onSuccess({}, function(transition) {
initPage(transition.from().name !== transition.to().name);
if ($window.ga) {
$window.ga('send', 'pageview', { page: $location.url() });
}
});
// No on destroy since the entire app is then gone
AuthObserver.loginAsChange$.subscribe(function __loginAs(loginAsModel) {
AuthAuthenticatorHelper.loginAs(
{
id: loginAsModel.account_id,
type: loginAsModel.account_type
},
loginAsModel.user_id || null,
loginAsModel.destination || null,
loginAsModel.sameWindow || null
);
});
AuthObserver.activityChange$.subscribe(AuthAuthenticator.updateLastActivity);
AuthObserver.logoutExpire$.subscribe(AuthAuthenticator.logoutExpire);
AuthObserver.updateAccount$.subscribe((account) => AuthIdentity.initAccount(AuthIdentity.getAccountType(), account));
AngularModalObserver.showMediaVerification$.subscribe((event) => MediaVerificationModal.show(event.mediaId));
InvoiceModalObserver.openModal$.subscribe(AdvertiserFinancialInvoicesInvoiceDetailModal.show);
PublisherLastTransactionsModalObserver.openModal$.subscribe((affiliatemarketingId) => TransactionModal.show(affiliatemarketingId));
AdvertiserLastTransactionsModalObserver.openModal$.subscribe((affiliatemarketingId) => AdvertiserTransactionsOverviewDetailModal.show(affiliatemarketingId));
TicketsModalObserver.openModal$.subscribe((ticketId) => TicketDetailModal.show(ticketId, false));
GoogleModalObserver.openModal$.subscribe(() => ConnectionsGoogleLoginModal.show())
}
function initPage(pageChange) {
if (pageChange) {
$(window).scrollTop(0);
}
$ctrl.currentPage = $location.path();
AppLayout.hideSplashPage();
}
}
尝试在 angular.json 的脚本部分添加这个：
"scripts": [
"./.node_modules/angular/angular.js"
]
或者，尝试将此添加到您的 main.ts（这是我使用的）：
import {setAngularJSGlobal} from '@angular/upgrade/static';
import * as angular from 'angular';
setAngularJSGlobal(angular);
如果您想延迟加载 angular 模块，您应该使用 @uirouter/angular 中的 UIRouterModule 而不是 @uirouter/angular-hybrid 中的 UIRouterUpgradeModule。基本上，避免导入 UIRouterUpgradeModule 并且提到的错误将消失 -
SearchRoutingModule:
const states = [{
name: 'admin.search',
url: '/admin/search',
component: SearchComponent,
permissions: [],
requiresAuth: false
}];
@NgModule({
imports: [
UIRouterModule.forChild({states: states})
],
exports: [
UIRouterModule
],
})
export class SearchRoutingModule {}
AdminRoutingModule:
const states = [{
name: 'admin.search.**',
url: '/admin/search',
loadChildren: () => import ('./pages/search/search.module').then((module: any) => module.SearchModule)
}];
@NgModule({
imports: [
UIRouterModule.forChild({states: states})
],
exports: [
UIRouterModule
],
})
export class AdminRoutingModule {}
AppRoutingModule:
const adminStates = [{
name: 'admin.**',
url: '/admin',
loadChildren: () => import ('./admin/admin.module').then((module: any) => module.AdminModule)
}];
@NgModule({
imports: [
UIRouterModule.forRoot({states: adminStates})
],
exports: [
UIRouterModule
],
})
export class AppRoutingModule {}
注:
在上述修复后您还会遇到一些其他错误，这些错误应该很容易修复。如果您遇到困难，请 post 为他们单独提问。
经过长时间的搜索并感谢其他两位用户的帮助，答案实际上非常简单（正如预期的那样）。
出于某些奇怪的原因，我们正在导出 UIRouterUpgradeModule，这本不应该完成。 （我们这样做可能是因为我们回想那是它是如何工作的？我不知道）。但是通过删除导出，错误消失并且一切正常。
例如，管理路由模块变为：
import {NgModule} from '@angular/core';
import {NgHybridStateDeclaration, UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
const states: NgHybridStateDeclaration[] = [{
name: 'admin.**',
url: '/admin',
loadChildren: () => import('src/app/admin/admin.module')
.then((result: {AdminModule: any}) => result.AdminModule)
}];
@NgModule({
imports: [
UIRouterUpgradeModule.forChild({states: states})
]
})
export class AdminRoutingModule {}
是的，还有一些其他错误，但这些很容易解决。例如，在我的演示中，AdminModule 仍然在主模块中导入，不应再导入，因为它是延迟加载的。
并且每个惰性**状态也应该存在，例如我们创建了admin.**，这意味着AdminModule 需要一个名为admin 的路由。但这在错误中是字面意思。