Angular 8 hybrid app not recognizes AngularJS components

Question

I started developing a hybrid application. So I have done th folllowing steps:

add Angular 8 dependencies
add polyfills.ts
remove ng-app attribute from my root index.html
do a manual bootstrap of AngularJs app

How looks my Angular init module:

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ]
})
export class HubAngularModule {
    ngDoBootstrap() {
    }
}

platformBrowserDynamic().bootstrapModule(HubAngularModule)
    .then(platformRef => {
        console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
        const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;

        upgrade.bootstrap(document.body, ['myAngularJsModule']);
    });

How looks my index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="dist/index.bundle.js"></script> <!--Webpack bundle-->
  <link rel="stylesheet" href="dist/styles.css"/>
</head>
<body>
<div layout="column" layout-align="" ng-cloak>
    <main-header></main-header> <!--AngularJS header component-->
    <console-menu></console-menu> <!--AngularJS menu component-->
    <md-content ui-view="main"></md-content> <!--AngularJS root ui-view-->
</div>
</body>
</html>

main-header, console-menu - are AngularJS components. Of course that configuration works well when ng-app is presented.

What I expect. Hybrid app starts just like old AngularJS app and I'm able to see login page, start page etc.

What I actually got. AngularJS app is actually bootstrapping. I can see method app.module().run(...) executes. But no component loads so I see only a blank page.

kirill.login · Accepted Answer · 2020-04-09 12:24:33Z

2

After a several hours of experiments I have found a soultion. I decided to check whether the manual bootstrap of the AngularJS will work:

angular.element(document)
    .ready(() => {
        angular.bootstrap(document.body, ['myAngularJsModule']);
    });

And it had failed. Even if no Angular 8 present. So the reason it fails to start is a location of <script> tags with my webpack bundles. It located in <head> but should be located in <body> after all the app markup.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

</head>
<body>
<div layout="column" layout-align="" ng-cloak>
    <main-header></main-header> <!--AngularJS header component-->
    <console-menu></console-menu> <!--AngularJS menu component-->
    <md-content ui-view="main"></md-content> <!--AngularJS root ui-view-->
</div>
<script src="dist/index.bundle.js"></script> <!--Webpack bundle-->
<link rel="stylesheet" href="dist/styles.css"/>
</body>
</html>

It is so dumb, but exactly that dumb thing like this make the biggest headache sometimes. And what disappointed me me the most not a single migration tutorial tells nothing about that detail!

answered Apr 9, 2020 at 12:24

kirill.login

9712 gold badges14 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

coppereyecat Over a year ago

Holy heck, thank you for this. The things people assume the reader knows, I guess! Now that the hybrid is finally working, I can move on to the fun part, upgrading all the things :D

sam_dev · Accepted Answer · 2020-04-09 07:34:04Z

0

Have you upgraded your angularJS components to make them work in Angular ?

answered Apr 9, 2020 at 7:34

sam_dev

1673 silver badges11 bronze badges

3 Comments

kirill.login Over a year ago

Answer depends on what is 'upgrade" means. All my components are exactly Components. They defined like angular.module().component and written on Typescript.

sam_dev Over a year ago

If you can provide a stackblitz, I can help you better, What I was mentioning above was have you used upgrade component in angularJs component something like this ? ` export class AngularJSComponent extends UpgradeComponent { @Input() twoWay: number; @Output() twoWayChange: EventEmitter<number>; constructor(ref: ElementRef, inj: Injector) { super('angularjsComponent', ref, inj); } ` }

kirill.login Over a year ago

No i didn't do it. My app has near 120 AngularJS components (.ts files). Does it mean I have to apply UpgradeComponent to all of them to just a start an application? It is just a madness.

Collectives™ on Stack Overflow

Angular 8 hybrid app not recognizes AngularJS components

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related