首页 文章

Angular和AngularJS混合应用程序路由：角度组件作为未呈现的子状态

提问于
浏览 次
1

首先简要介绍一下项目和总体设置 .

它是一个Angular / Angular JS应用程序 . 几周前我整合了Angular夫妇 . 与使用UpgradeModule的许多不同教程相比，我实际上不得不使用downgradeModule - 项目非常大而且UpgradeModule导致了很多性能问题 .

有一个整体的父状态（称为app），我希望Angular Component成为它的孩子 . 根据文件，这应该是可能的（https://github.com/ui-router/angular-hybrid#limitations）

限制：我们目前支持将Angular（2）或AngularJS（1.x）组件路由到AngularJS（1.x）ui-view . 但是，我们不支持将AngularJS（1.x）组件路由到Angular（2）ui-view . 如果您创建一个Angular（2）ui-view，那么任何嵌套的ui-view也必须是Angular（2） . 因此，应从叶状态/视图开始迁移应用程序，并向根状态/视图进行处理 .

一般设置看起来像这样（简化）：

app.module.ng1.ts

import { AppModule } from './app.module';

const bootstrapFn: any = (extraProviders: Array<StaticProvider>): any => {
    return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
};
const downgradedModule: any = downgradeModule(bootstrapFn);

const appModule: angular.IModule = angular
    .module('app', [
        downgradedModule,
        // other project modules
    ]);

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        UIRouterUpgradeModule.forChild(),
    ],
    declarations: [
        AccountNg2Component,
    ],
    providers: [
    ],
    entryComponents: [
        AccountNg2Component,
    ],
})
class AppModule {
    public ngDoBootstrap(): void {}
}

export { AppModule };

TheAccountNg2Component是我真正想去的那个 . account.component.ts

@Component({
    selector: 'account',
    template,
})
class AccountNg2Component {
    @Input() public user: any;

    constructor() {}

}

export { AccountNg2Component };

有一个父应用程序状态，我希望AccountNg2Component成为它的子级 . 状态配置如下所示：

$stateProvider
    .state({
        parent: 'app',
        name: 'account',
        url: '/account',
        component: AccountNg2Component,
    });

无论我尝试什么，也会导致以下两个错误：

Transition Rejection($id: 0 type: 6, message: The transition errored, detail: TypeError: Cannot read property 'when' of undefined)

TypeError: Cannot read property 'when' of undefined
at Ng2ViewConfig.load (views.js:47)
at eval (views.js:19)
at Array.map (<anonymous>)
at loadEnteringViews (views.js:19)
at invokeCallback (transitionHook.js:104)
at TransitionHook.invokeHook (transitionHook.js:116)
at eval (transitionHook.js:58)
at processQueue (angular.js:17169)
at eval (angular.js:17217)
at Scope.$digest (angular.js:18352)
at Scope.$apply (angular.js:18649)
at eval (angular.js:18952)
at completeOutstandingRequest (angular.js:6428)
at eval (angular.js:6707)
at ZoneDelegate.invokeTask (zone.js:420)
at Object.onInvokeTask (core.js:4961)
at ZoneDelegate.invokeTask (zone.js:419)
at Zone.runTask (zone.js:187)
at ZoneTask.invokeTask (zone.js:495)
at ZoneTask.invoke (zone.js:484)
at timer (zone.js:2053)

我可能在配置中遗漏了一些东西，但我无法弄明白 .

我已经尝试过的：

我查看了示例应用程序（https://github.com/ui-router/sample-app-angular-hybrid），并尝试尽可能地 Build 它 . 但是他们使用UpgradeModule而不是降级 - 我不知道这是否会改变路由器的任何内容 .

我试过了

错误始终保持不变，因为我认为我只是在配置中遗漏了一些内容 .

如果我的描述不够，我将尝试设置一个jsfiddle或类似的东西

Update 1: 好的，我从Angular 1 State Provider中删除了帐户状态的状态声明，而只是在UIRouterModule中注册它 . 现在至少错误已经消失，但状态根本没有加载（当试图访问它时，重定向到默认状态）

angularjs angular angular-ui-router angular-upgrade

1 回答

  • 1

    好的，我终于设法解决了这个问题，感谢来自另一篇文章的提示（https://stackoverflow.com/a/49568050/4243635）

    请再次在这里引用它：

    Angular bootstrap模块在构造函数中需要一个“UIRouter”类型的参数，否则它不会引导其状态：

    export class AppModule {
       constructor(private router: UIRouter) {
       // "router" needed in constructor to bootstrap angular states
}

    您还需要导入UpgradeModule和UIRouterUpgradeModule . 所以整个app.module.ts看起来像这样：

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ServiceBootstrapComponent } from '../../service-bootstrap';
import { AccountNg2Component } from '../../app/pages/account/account.ng2.component';
import { UIRouterUpgradeModule } from '@uirouter/angular-hybrid';
import { AccountState } from '../../app/pages/account/account.states';
import { CommonModule } from '@angular/common';
import { UIRouter, UIRouterModule } from '@uirouter/angular';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        UpgradeModule,
        UIRouterUpgradeModule,
        UIRouterModule.forChild({states: [AccountState]}),
    ],
    declarations: [
        ServiceBootstrapComponent,
        AccountNg2Component,
    ],
    providers: [
    ],
    entryComponents: [
        ServiceBootstrapComponent,
    ],
})
class AppModule {
    constructor(private router: UIRouter) {}
    public ngDoBootstrap(): void {}
}

export { AppModule };
    回复于

相关问题