Angularjs 角度2-AOT-降级Ng2控制器-NG1应用程序不执行NG1控制器

情景：

我有一个Ng站点，它最初是用NG1编写的。使用Ng2创建了新页面。Ng1和Ng2页面都创建并使用了Ng2对话框。混合页面在使用NG2.1降级NG2组件并依赖NGJIT时工作

但是，当我使用NG2.2.0到2.2.4并执行AoT时，与路由关联的NG1控制器不会执行。路由执行jobEditorFactory.getJobEditorCriteria方法，承诺成功解析，并检索模板。但是没有执行Ng 1 jobEditorCtrl控制器中的任何内容，因此没有为其Ng视图渲染任何内容。就像控制器没有注册一样。 angular cli没有错误，浏览器中也没有运行时错误。纯Ng1页面和纯Ng2页面继续工作。使用AoT引导降级的Ng2控制器似乎没有错误，并将“引导NG1-Ng2混合”记录到控制台。在这种情况下，我是否缺少一些控制器的命名约定

不带AoT的jobEditorBootstrap.ts：

import { Component, forwardRef } from '@angular/core';
import { UpgradeAdapter } from '@angular/upgrade';

import { JobActionsComponent } from '../../JobEditor/Components/jobActions.component';
import { JobEditorUpgradeModule } from './jobEditorUpgrade.module';

declare var angular: any; // eventually try typings for angular 1

/**
 * the component selector and directive name should not have -.  The element on the page will have a - though.
 */
var upgradeAdapter = new UpgradeAdapter(forwardRef(() => JobEditorUpgradeModule));

angular.module('jobEditorApp')
    .directive('jobActions', upgradeAdapter.downgradeNg2Component(JobActionsComponent))

upgradeAdapter.bootstrap(document.body, ['jobEditorApp'])

Ng 1应用程序：

var jobEditorApp = angular.module('jobEditorApp', ['ui.sortable', 'ui.bootstrap', 'ngAnimate', 'ngRoute', 'ngResource',
'LocalStorageModule', 'arraySplitContainsFilter', 'jobEditorFactory', 'jobEditorModal', 'jobStatusWorkflowFilter', 
'fundingHistoryModal', 'paddedNumberFilter', 'modalAreYouSure', 'addlFundsModal', 
'debugDetails', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav', 'ui.grid.resizeColumns', 
'angular.filter', 'httpInterceptor', 'angulartics', 'angulartics.piwik', "notificationService.factory", "reportService.factory"
]);

jobEditorApp.config(['$routeProvider', 'localStorageServiceProvider', '$analyticsProvider',
function ($routeProvider, localStorageServiceProvider, $analyticsProvider) {
  //$locationProvider.html5Mode(true);
  $analyticsProvider.firstPageview(false); /* Records pages that don't use $state or $route */
  $analyticsProvider.settings.pageTracking.trackRelativePath = false; // logs querystring
  $routeProvider.
    when('/', {
        templateUrl: '/ng-app/JobEditor/Templates/jobEditorViewTemplate.html',
        caseInsensitiveMatch: true,
        controller: 'jobEditorCtrl',
        controllerAs: 'jobEditorCtrl',
        resolve: {
            jobEditorViewModel: ['jobEditorFactory', '$route', function (jobEditorFactory, $route) {
                return jobEditorFactory.getJobEditorCriteria(0, 0, $route.current.params.sysid, false).get().$promise;
                //.then(
                //    function () {
                //        console.log('getJobEditorCriteria resolved successfully');
                //    },
                //    function () {
                //        console.log('getJobEditorCriteria failed');
                //    },
                //    function () {
                //        console.log('getJobEditorCriteria status');
                //    });  // query for array of objects (i.e. List<>) or get for object
            }]
        }
    });

  localStorageServiceProvider
      .setPrefix('silgancapitaljobs_criteriaShared')
      .setStorageType('localStorage');

}]);

jobEditorBootstrap-aot.ts：

import { enableProdMode, PlatformRef, NgModuleFactory, Component, forwardRef } from '@angular/core'
import { platformBrowser } from '@angular/platform-browser';
import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';

import { JobActionsComponent } from '../../JobEditor/Components/jobActions.component';
import { JobEditorUpgradeModuleNgFactory } from '../../../tmp/aot/ng2-App/Bootstrapper/jobEditorUpgrade/jobEditorUpgrade.module.ngfactory';

declare var angular: any;

angular.module('jobEditorApp')
.directive(
    'jobActions',
    downgradeComponent(
        // The inputs and outputs here must match the relevant names of the properties on the "downgraded" component.
        {
            component: JobActionsComponent
        }
    )
);

enableProdMode();

// bootstrap function "borrowed" from the angular test cases
export function bootstrap(
platform: PlatformRef, Ng2Module: NgModuleFactory<{}>, element: Element, ng1ModuleName: string) {
// We bootstrap the Angular 2 module first; then when it is ready (async)
// We bootstrap the Angular 1 module on the bootstrap element
return platform.bootstrapModuleFactory(Ng2Module).then(ref => {
    let upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(element, [ng1ModuleName]);

    console.log('bootstrapping Ng 1 - Ng 2 hybrid');
    return upgrade;
});
}

bootstrap(
    platformBrowser(),
    JobEditorUpgradeModuleNgFactory,
    document.body,
    'jobEditorApp')
    .catch(err => console.log(err)
);

import{enableProdMode，PlatformRef，NgModuleFactory，Component，forwardRef}来自'@angular/core'
从“@angular/platformBrowser”导入{platformBrowser}”；
从'@angular/upgrade/static'导入{UpgradeModule，DegradeComponent}；
从“../../JobEditor/Components/jobActions.component”导入{JobActionsComponent}；
从“../../../tmp/aot/ng2-App/Bootstrapper/jobEditorUpgrade/jobEditorUpgrade.module.ngfactory”导入{JobEditorUpgradeModuleNgFactory}；
声明变量：任何；
angular.module（'jobEditorApp'）
.指令(
“就业行动”，
降级组件(
//此处的输入和输出必须与“降级”组件上属性的相关名称匹配。
{
组件：作业操作组件
}
)
);
enableProdMode（）；
//从角度测试用例“借用”的引导函数
导出函数引导(
平台：PlatformRef，Ng2Module:NgModuleFactory，元素：元素，ng1ModuleName:string）{
//我们首先引导Angular 2模块；然后当它准备好时（异步）
//我们在引导元素上引导Angular 1模块
返回platform.bootstrapModuleFactory（Ng2Module）。然后（ref=>{
让upgrade=ref.injector.get（UpgradeModule）作为UpgradeModule；
bootstrap（元素[ng1ModuleName]）；
log（'bootstrapping ng1-ng2 hybrid'）；
退货升级；
});
}
引导(
platformBrowser（），
JobEditor升级模块工厂，
文件正文，
‘jobEditorApp’）
.catch（err=>console.log（err）
);

import { enableProdMode, PlatformRef, NgModuleFactory, Component, forwardRef } from '@angular/core'
import { platformBrowser } from '@angular/platform-browser';
import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';

import { JobActionsComponent } from '../../JobEditor/Components/jobActions.component';
import { JobEditorUpgradeModuleNgFactory } from '../../../tmp/aot/ng2-App/Bootstrapper/jobEditorUpgrade/jobEditorUpgrade.module.ngfactory';

declare var angular: any;

angular.module('jobEditorApp')
.directive(
    'jobActions',
    downgradeComponent(
        // The inputs and outputs here must match the relevant names of the properties on the "downgraded" component.
        {
            component: JobActionsComponent
        }
    )
);

enableProdMode();

// bootstrap function "borrowed" from the angular test cases
export function bootstrap(
platform: PlatformRef, Ng2Module: NgModuleFactory<{}>, element: Element, ng1ModuleName: string) {
// We bootstrap the Angular 2 module first; then when it is ready (async)
// We bootstrap the Angular 1 module on the bootstrap element
return platform.bootstrapModuleFactory(Ng2Module).then(ref => {
    let upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(element, [ng1ModuleName]);

    console.log('bootstrapping Ng 1 - Ng 2 hybrid');
    return upgrade;
});
}

bootstrap(
    platformBrowser(),
    JobEditorUpgradeModuleNgFactory,
    document.body,
    'jobEditorApp')
    .catch(err => console.log(err)
);