0

We have an AngularJS application. The "main" template is out of it's reach: it's generated by a CMS. We have no idea how the page is going to look like. The AngularJS application starts wherever there's an AngularJS component.

It's not a SPA, we only create interactive components that live until a page refresh comes along.

We bootstrap the application with angular.bootstrap(document, ['App'], { strictDi: true });

A very stripped down version:

<html>
    <body>
        <div>
            <usermenu></usermenu>
        </div>
        <div>
            <item-list></item-list>
        </div>
    </body>
</html>

We would like to migrate to Angular (6 at the time of writing). I created an app using the cli and merged the generated application with our AngularJS application.

I then followed the ngUpgrade tutorial at https://angular.io/guide/upgrade. Although it is outdated (Still uses SystemJS!) I managed to get up and running: My AngularJS application is bootstrapped by Angular.

In the above mentioned example I have two AngularJS components: usermenu and item-list. They both use an arbitrary amount of services.

As time goes by two things happen:

  • I convert usermenu as an Angular component, but I am NOT downgrading the component
  • I create a new Angular component (ie: signout-button)

Consider my new template:

<html>
    <body>
        <div>
            <usermenu></usermenu> <!-- Angular component -->
        </div>
        <div>
            <item-list></item-list> <!-- AngularJS component -->
        </div>
        <div>
            <signout-button></signout-button> <!-- Angular component -->
        </div>
    </body>
</html>
  • Will the following template bootstrap both Angular AND AngularJS components?
  • Or do I need to downgrade both Angular components for it to work?

The ngUpgrade guide mentions something like "AngularJS OWNS the root component". To use an Angular component inside AngularJS you need to downgrade it. To use an AngularJS component inside Angular one needs to upgrade it. But since I have three root components, will it work?

I tried of course, but I was unable to get it working. I have a feeling that the "root component" that AngularJS owns isn't one of the components found, but the element the application is bootstrapped on (document in my case).

Can someone confirm this so I know downgrading components is the only way OR perhaps point me in the right direction on bootstrapping with Angular and AngularJS components "next to eachother" ?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Thomas Rijsewijk
  • 31
  • 4
  • See this [DEMO on PLNKR](https://plnkr.co/edit/6TYZDjwfsWUdUIS64vJ3?p=preview) to see Angular and AngularJS running side by side. [1](https://stackoverflow.com/a/44312853/5535245) – georgeawg Jul 24 '18 at 16:30
  • Thanks! But the AngularJS application is not bootstrapped by the Angular application. It's importing the UpgradeModule but the AngularJS application is still bootstapped using `angular.bootstrap()` – Thomas Rijsewijk Jul 24 '18 at 17:22

0 Answers0