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
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/818a477b-90c6-4a8a-b92a-f8d7a1c68368%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
