Custom Filter Not Working In Angular Hybrid App

I am attempting to convert an AngularJS 1.6 app in to a hybrid app along with Angular 5. I have the following simple filter defined: (function () { 'use strict'; var filter

Solution 1:

Found the problem. Actually I think there were two problems. One was that I think I was redefining "app" by including square brackets when downgrading my globalVars service.

angular.module('app', []).factory('globalVars', downgradeInjectable(GlobalVarsService));

instead of

angular.module('app').factory('globalVars', downgradeInjectable(GlobalVarsService));

The other issue I think was a chicken-and-the-egg kind of problem. My globalVars was being injected into my AngularJS app's config function, but I think the app might have been needed to downgrade globalVars - still not completely sure. Luckily for me, nothing was referencing globalVars in my app.js so I was able to remove the reference.

This is the version of my app.module.ts that finally got it working. I hope this helps someone else!

import { NgModule, APP_INITIALIZER } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { HttpClientModule } from'@angular/common/http';
import { HttpClient } from'@angular/common/http';
import { downgradeInjectable, UpgradeModule } from'@angular/upgrade/static';
import { environment } from'../environments/environment';

import { AppComponent } from'./app.component';
import { GlobalVarsService } from'./core/global-vars.service';

declarevarangular: any;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    UpgradeModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: OnAppInit,
      multi: true,
      deps: [GlobalVarsService, HttpClient]
    },
    GlobalVarsService
  ]
})
exportclassAppModule {
  constructor(private upgrade: UpgradeModule, private http: HttpClient) { }
  ngDoBootstrap() {
    angular.module('app').factory('globalVars', downgradeInjectable(GlobalVarsService));
    this.upgrade.bootstrap(document.body, ['app'], { strictDi: true });
  }
}

exportfunctionOnAppInit(globalVars: GlobalVarsService, http: HttpClient) {
  return (): Promise<any> => {
    returnnewPromise((resolve, reject) => {
      // Fetch data from the server before initializing the app.
      http.get(environment.apiBase + '/api/meta/data').subscribe(x => {
        globalVars.MetaData = x;
        globalVars.VersionNumber = globalVars.MetaData.versionNumber;
        globalVars.IsDebugBuild = globalVars.MetaData.isDebugBuild;
        globalVars.AuthorizedFeatures = globalVars.MetaData.authorizedFeatures;
        globalVars.User = globalVars.MetaData.user;
        resolve();
      });
    });
  };
}