0

我正在使用混合方法进行从 AngularJS(1.7.0) 到 Angular(11.xx) 的迁移项目。混合应用程序已启动并正在运行。我在路由部分遇到问题，AngularJS 项目使用 Angular UI-Router，对于 Angular，我正在尝试 Angular UI 混合路由器。

问题是我无法在 AngularJS 视图中加载子视图。

-> 根标签视图（index.html）：

<div >
 <div class="l-content-inner ui-page-view" role="main" data-ui-view></div>
</div>

子标签视图（empty.html）：

<div data-ui-view></div>

在这个子级别视图中，尝试加载“data-ui-view”中的子内容：

对于此内容加载，我使用 UI-Hybrid-Router 在 AngularJS 视图中加载 Angular 组件视图，因此出现以下错误：

ERROR Error: [$injector:modulerr] Failed to instantiate module $$UpgradeModule due to:
Error: [$injector:modulerr] Failed to instantiate module AppName due to:
Error: [$injector:modulerr] Failed to instantiate module  AppName  .properties due to:
Error: State 'clients.property.landing' has a 'views' object. It cannot also have "view properties" at the state level.  Move the following properties into a view (in the 'views' object):  templateUrl, controller

注意：此状态（“clients.property.landing”）已在多个地方用作根状态。这与 AngularJS UI 路由器完美配合。它已在代码中的多个位置被引用。

请在下面找到混合路由的示例代码：

// Module
import * as ng from 'angular';
import '@uirouter/angular-hybrid';
const deps = ['ui.router.upgrade'];

export const ngModule = ng.module(namespace.MODULE_PROGRAMS, deps);


// Router
function programRouter($stateProvider) {
    $stateProvider
        .state('clients.property.programs', {
            abstract: true,
            resolve: {},
            templateUrl: TEMPLATE_PATH + '/application/partials/empty.html'
        })
        .state('clients.property.programs.list', {
            url: 'root/123/programs',
            component: ProgramListComponent
        })
}
export default ngModule.config(programRouter);


// Component Page
import { Component } from '@angular/core';

@Component({
    template: '<div>This is Program Page</div>'
})
export class ProgramListComponent {
    title = 'Program';
}
4

0 回答 0