How to downgrade component in modular AngularJS application.

208 views

Skip to first unread message

Yash Jipkate

unread,

Jul 12, 2019, 3:39:57 PM7/12/19

to Angular and AngularJS discussion

Hi,

I have a modular AngularJS app that is under upgrade to Angular 8 using the downgradeModule. I have upgraded a component which needs to be used in the rest of the AngularJS part of the code. The component resides in a directive that has multiple transclusions and the component is under one of the transclusions.

The Angular docs has many examples of carrying this out but they have the examples of just one module present. I have a modular application with multiple feature modules. I have the component belonging to such a feature module namely 'AboutPageMoule' which in turn belongs to one `PagesModule` which again, in turn, belongs to `MainAngularModule` - the main Angular root module. Now, whenever I downgrade the component it demands a module name as an argument to the `downgradeComponent`. I am confused as to what is to be passed to it. I know that the argument is the name of the module that the component is bound to but it is not able to instantiate the main AngularJS module. Currently, I have this as my `about-page.module.ts`:

@NgModule({
  providers: [
    {
      provide: 'UrlInterpolationService', 
      useFactory: ($injector: any) => $injector.get('UrlInterpolationService'), 
      deps: ['$injector']
    }
  ]
})
export class AboutPageModule {}


const bootstrapFn = (extraProviders: StaticProvider[]) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(AboutPageModule);
};
export var downgradedModulea = downgradeModule(bootstrapFn);


angular.module(downgradedModulea)
.directive('aboutPage', downgradeComponent({component: AboutPage, downgradedModule: 'AboutPageModule'}) as angular.IDirectiveFactory);

The pages.module.ts looks like this:


import { NgModule } from '@angular/core';
import { StaticProvider } from '@angular/core';


import { AboutPageModule } from 'pages/about-page/about-page.module.ts';
@NgModule({
  imports: [
    AboutPageModule
  ]
})
export class PagesModule {}

The main bootstrapping file looks like this:

NgModule({
  imports: [
    BrowserModule,
    PagesModule
  ]
})
class MainAngularModule {
  // Empty placeholder method to satisfy the `Compiler`.
  ngDoBootstrap() {}
}


const bootstrapFn = (extraProviders: StaticProvider[]) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(MainAngularModule);
};
const downgradedModule = downgradeModule(bootstrapFn);


declare var angular: any;


require('pages/pages.module.ts');


var oppia = angular.module(
  'oppia', [
    downgradedModule
  ])


exports.module = oppia;

This is what the entry HTML file looks like:

...
  <body>
      <about-page></about-page>
  <body>
...

The component looks like:

@Component({
  selector: 'about-page',
  template: '<h1>Something</h1>'
})
export class AboutPage {

At this state, the page fails to instantiate the `oppia` module.

However when I comment out the downgradeComponent part, it works but obviously, the component and its contents are missing. I suspect it might be because I am passing the wrong arguments to the downgradeComponent and also that I might be downgrading the module the wrong way. I looked up on the internet but couldn't find any useful resource.

This is a huge blocker for me as it is a crucial part of my project. It would be great if I could get some guidance on how to proceed with this.

Thanks,

Yash

Reply all

Reply to author

Forward

0 new messages