Use AngularJS (Angular1) module from Angular2 project

All we need is an easy explanation of the problem, so here it is.

Just started a demo Angular2 project (no previous experience with Angular1/AngularJS. Have followed and extended from the online quickstart and tutorials, and all was fine. However I’m at the point where I would like to use some components from a library which is designed for AngularJS, and having no end of problems!

Most of the information available about AngularJS/Angular2 compatibility assumes that you have an AngularJS project that you’re adding Angular2 components to – not the other way around – so what I’m hoping to do may not even be possible. What I’ve tried so far involves a simple stripped-back project based on the Angular2 quickstart, with a single Angular2 component that loads into the index.html. I’d then like to integrate components from the existing library (AngularJS-based) into this.

  • I’ve tried using UpgradeAdapter.upgradeNg1Component to create components from the library and add them directly into my Angular2 component

  • I’ve tried installing angularjs through npm, importing it in a script tag into my index.html and then using a combination of UpgradeAdapter.downgradeNg2Component and UpgradeAdapter.bootstrap to load my Angular2 as a downgraded module

Neither of these seem to work – the component fails to show, and the browser console tells me I’ve got an Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js

My best guess at the moment is that this is actually an unsupported scenario, and I need to have a ‘proper’ AngularJS app in order to use the UpgradeAdapter functionality from Angular2. Can anyone confirm this? Or is there something stupid I’m missing here?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Here is a working plunkr describing how to mix Angular1 and Angular2 elements:

An important point is to bootstrap your main component on the UpgradeAdapter. This way all elements are available in providers (services / factories) and in directives (components / directives):

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

These two answers could help you:

Method 2

So the major problem in this case turned out to be the fact that it appears that the upgrade components aren’t included as part of the basic angular 2 bundle. After adding:

<script src="node_modules/angular2/bundles/upgrade.min.js"></script>

to my index.html file the error I was seeing disappeared.

Thanks to the answer here for pointing me in the right direction!

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply