2

Scenario:

I have an Ng site that was originally written with Ng 1. New pages were created with Ng2. Ng2 dialogs were created and utilized by both Ng1 and Ng2 pages. The hybrid pages work when downgrading the Ng 2 components with Ng 2.1 and relying on the Ng JIT.

However, when I use Ng 2.2.0 through 2.2.4 and perform AoT, the Ng 1 controller associated with the route does not execute. The route executes the jobEditorFactory.getJobEditorCriteria method, the promise resolves successfully, and the template is retrieved. But nothing in the Ng 1 jobEditorCtrl controller is executed, so nothing renders for it's ng-view. It's as if the controller is not registered. There are no errors from angular-cli and there are no runtime errors in the browser. The pure Ng1 pages and the pure Ng2 pages continue to work. Bootstrapping the downgraded Ng2 controller with AoT does seem to work without error and logs 'bootstrapping Ng 1 - Ng 2 hybrid' to the console. Am I missing some naming convention for controllers in this situation?

jobEditorBootstrap.ts without AoT:

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 app:

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');

}]);

jobEditorCtrl.js:

jobEditorApp.controller('jobEditorCtrl',
['$scope', '$http', '$uibModal', '$filter', '$route', "$window", '$timeout', 'jobEditorViewModel',
'jobEditorFactory', 'capitalJobsSharedFactory', 'localStorageService', 'uiGridConstants', '$q',
'ReportService', 'NotificationService',
function jobEditorCtrl($scope, $http, $uibModal, $filter, $route, $window, $timeout, jobEditorViewModel,
jobEditorFactory, capitalJobsSharedFactory, localStorageService, uiGridConstants, $q,
ReportService, NotificationService
) {
/* code removed here for brevity */

}]);

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)
);
Shane Cook
  • 41
  • 5

0 Answers0