12

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?

Zze
  • 18,229
  • 13
  • 85
  • 118
Michael
  • 1,136
  • 1
  • 7
  • 15
  • @Bryan Thanks for that - it was my understanding that for an AngularJS/Angular2 hybrid app you _couldn't_ use the `ng-app` tag, and had to use the `bootstrap()`? – Michael Feb 06 '16 at 08:08

2 Answers2

3

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:

Community
  • 1
  • 1
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
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!

Community
  • 1
  • 1
Michael
  • 1,136
  • 1
  • 7
  • 15
  • 3
    Linking directly to your node_modules folder is a bad solution. Once you deploy your solution that folder is no longer there (assuming you're using some kind of bundling setup) – Per Hornshøj-Schierbeck Nov 21 '16 at 10:29