Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 3 down vote favorite
2

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?

share|improve this question
    
@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 6 '16 at 8:08
up vote 1 down vote

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:

share|improve this answer
up vote 1 down vote accepted

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!

share|improve this answer
    
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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.