Following the routing chapter of the Angular2 tutorial, i've added my own simple TestLink (below the original Dashboard and Heroes) but it breaks the app. Specifically, i created test-link.component.ts that exports TestLinkComponent and added corresponding parameters to #RouteConfig inside app.component.ts. Plunker is here. Now the app stucks at 'loading'. (i'm just starting with angular, so any advice on how to debug such issues would also be appreciated!)
You misspelled TestLinkComponent in app.component.ts line #8.
See edited plunker: http://plnkr.co/edit/ar5agUGUHTuWA1LH8cf7?p=preview
Related
I've been wrestling with this for almost a day now, so I think it's time I give up and ask for help.
I started with a trivial AngularJS application (1.4.7) that should simply display "Greetings from Angular 1", and have been trying to bootstrap that application into a trivial Angular2 CLI generated app.
It doesn't seem to work. Instead of "Greetings from Angular 1", I see "{{angular1Msg}}". The following commit shows exactly what I did to include and bootstrap the app. I've spent quite a bit of time now with the documentation and am not sure what I'm missing.
Any help would be greatly appreciated!
Project repo:
https://github.com/scottschafer/ng2hybrid
The commit in which I attempted to integrate the AngularJS app:
https://github.com/scottschafer/ng2hybrid/commit/4b2c7c5339388ec2b3debeae0643dff89b75926f
(note that the source for the AngularJS app lives in src/ng1app, and is a working standalone AngularJS 1.4.7 application).
I finally got this working. A lot of trial and error. Not much fun at all.
https://github.com/scottschafer/ng2hybrid
I have been trying to follow the suggestions for running an angular app in production. However I have been struggling to disable the comment and css class directives:
$compileProvider.commentDirectivesEnabled(false);
$compileProvider.cssClassDirectivesEnabled(false);
When I try to add these commands to the config block I receive the error:
$compileProvider.commentDirectivesEnabled is not a function
The codepen below demonstrates my issue, if you comment out the two lines then the code runs without any problem:
http://codepen.io/anon/pen/RoaKbj?editors=1010
These two methods don't exist in the 1.5.8 version of angular that you're using.
They exist in the 1.6.0-rc.0 version though.
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?
Here is a working plunkr describing how to mix Angular1 and Angular2 elements:
http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview
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:
angular 1.x and angular2 together
How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?
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!
I just installed angularJS package control after following the link http://weblogs.asp.net/dwahlin/using-the-angularjs-package-for-sublime-text, this enabled me to get the angular code hints but it messed up my default code hinting feature in sublime-text 3. In the attached image, I have this function decrementCountdown defined, when I try to use it - it does not show up in the code completion hints, the only things I see is the AngularJS methods.
Could someone please help me? thanks
Try disabling AngularJS javascript Autocompletion
as can be seen in the issue on their Github Page.
Sublime 3 javascript Autocompletion not working properly
An example copied directly from
http://angular-ui.github.io/bootstrap/
Does not work at all, neither locally nor in plunker. Don't know why. Bootstrap CSS is loaded, so is ui-bootstrap-tpls.min.js and angular.min.js (angular itself is working just fine though).
Here's the plunker:
http://plnkr.co/edit/15GWWFSUwab4VmaxfFPf
I am getting no js errors in a browser, yet it's not working.
Please help. I need to get this working on my website (i.e. the accordion doesn't work even when I write my own html/js code).
A plunker created from the demo site works flawlessly, just created a plunker from the demo site: http://plnkr.co/edit/z9RQKgNBTRbigyQs7OGW?p=preview
In your plunker you are not declaring dependency on the ui.bootstrap module as described on the very top of the demo page:
As soon as you've got all the files downloaded and included in your
page you just need to declare a dependency on the ui.bootstrap module:
angular.module('myModule', ['ui.bootstrap']);
After adding a dependency on the mentioned module your plunker works as well:
http://plnkr.co/edit/00bK0rNDYIrH9a9TVRk3?p=preview
One more thing - you need at least AngularJS 1.0.5 - there were bugs in earlier versions of AngularJS that prevented this directive from working correctly.