I have an Angular 1.5 Component that works fine on a vanilla HTML page, but when I try to embed it in a Bootstrap popover, it sort-of-only-but-not quite works.
The component does a little keyboard interception and filtering of keypresses, hooks into the model's formatting chain and uses a couple of other services and directives, but nothing too "funky".
The total and values[] attributes are passed through the scope, but while total displays, the values don't but the component does not how many entries there are in the values array. Nothing obvious is dumped out in the console.
I'm not sure where to start troubleshooting this one.
Code is available: https://github.com/jeffeld/bf-calculator.git
Clone, npm install and gulp default will build it. Test code is in index.html.
Many thanks,
Jeff
Related
I'm currently exploring an upgrade path for a pretty large AngularJS 1.6 app to Angular 6. I have my app bootstrapping as a hybrid app, and I've begun converting individual modules and components. I need to be able to do the migration in chunks, though. It would be nice if I could migrate a module at a time, but I'm running into some issues, to that end.
I have a NavBar directive which resides in my core AngularJS module. That component is being downgraded with downgradeComponent and registered on the AngularJS core module. The landing AngularJS module has a dependency on the core module so that it can use the NavBar. This works fine, because the LandingComponent has also been converted to Angular6 and is being downgraded and registered on the landing AngularJS module.
There is a problem with using the NavBar component inside of any other AngularJS component, though. I have a third AngularJS module called workflows with a ViewWorkflows component that has a NavBar inside its template. When I navigate to that component, I get the following error:
angular.js:14791 Error: No component factory found for NavBarDirective. Did you add it to #NgModule.entryComponents?
I can fix this by converting and then downgrading ViewWorkflows, but since NavBar is being registered as a downgraded AngularJS component, shouldn't any AngularJS module that declares a dependency on the core module have access to it?
Code (Not runnable)
Edit: I've updated the gist to be a little more simple. The landing module is Angular, with an Angular component, <landing> that is downgraded to run on the AngularJS landing module and has a <t-nav-bar> inside it. It has a dependency on the core module which provides the downgraded <t-nav-bar> directive. The <test> component is an AngularJS component registered on the AngularJS landing module that cannot use the <t-nav-bar>. Without even bringing the workflows module into the situation, it doesn't work. What am I doing wrong?
I have managed to sort this out. I was trying to declare the NavBar as an Angular #Directive. It actually needs to be a #Component. After making that switch, it works exactly as expected.
I spun up this repo to test with, and discovered the issue there. It's a new Angular 6 app that I "downgraded" for experimenting.
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 started using Angular for university purpose and I wanted to start easy so I just copied some stuff for the official Angular material page into my editor.
(Used bower to install angular-material "bower install angular-material")
This is my code (image, because they don't like HTML code here):
http://imgur.com/pr8YYvN
The button is showing up, but the fancy "click on" animation doesn't work and I cannot see the button description neither!
It was me who add the "." in front of every src/href (the button is not there on the original angular example page, but without the dot, the font won't even be in material style but just standard e.g. Arial)
Where is the problem, did I forget something?
Thanks in advance!
You are using the controller MainCtrl in your application, but you never actually created a MainCtrl in your JS. You also reference YourController in your JS, which is also not declared anywhere.
I recommend to read the error messages angular is giving you in the console.
Plunker: http://plnkr.co/edit/Sjfb3Esx1NsjwaYGLMGZ?p=preview
Accordion is in the servers tab.
The plunker actually works. My real app does not. The only thing that plunker is not really replicating is the ui-router stuff. On my actual app the accordion won't open. Other questions on SO say that ui.bootstrap is not included and that fixed their problem. I do have ui.bootstrap included though.
I've also tried copying and pasting the example from http://angular-ui.github.io/bootstrap/ that doesn't work either.
I'm at a loss for what else to look for.
More info:
I'm not getting any errors. Also other ui-bootstrap directives work just fine. I'm using tabs on this same page, and modal and dropdown work on other pages.
there is an issue with some version of angular-ui, the js assumes that one atleast one accordion is open and tries to calculate width. But bootstrap hides all accordions. So try displaying one accordion through css, i.e. set the display property of the accordion.
As per my comment:
It's my template. Somehow my template files are out of sync with the js files. In the template it is calling ng-click="toggleOpen()" which does not exist in my code. When I roll that back to ng-click="isOpen = !isOpen" everything works as expected. I need to figure out why my templates and js files are out of sync.
I installed ui-bootstrap using bower which does not include template files. I need to disable template caching during development so I can't use the tpls code. I downloaded the template directory from github and some of the templates simply do not match up with the version of code that bower downloads. I updated the template file to an older version that correctly matches the code from bower. Everything works now.
I am trying to get a login modal showing when I click on login.
I am using bootstrap3, angularJS1.2 and angular-ui0.6
When I click on login, the transparent background of the modal shows but the popup never appears. When I check in the console, I can actually see the code populated but never manages to display it.
I am guessing that it is a problem with 1.2 animation and 0.6 not being up to date but I am not sure (I actually reverted back to < 1.2 and I run into the same problem.
Any idea what may be happening?
There is no support for Bootstrap 3 yet. This worked for me, however: ngEkathuwa.
AngularUI 0.6 does not work with BS3. I have been waiting for this particular fix to continue one of my projects. The modal view is specially broken. We have to wait till 0.7 comes out.
You'll need to build your own ui-bootstrap JS file, from a different branch, and use it instead (the angular-ui team is working on this separate branch to make it compatible with Bootstrap 3).
To build, just follow these steps (adapted from https://github.com/angular-ui/bootstrap/issues/331#issuecomment-25032867)
git clone https://github.com/angular-ui/bootstrap.git
cd bootstrap
git checkout origin/bootstrap3_bis2
npm install
grunt build
You'll find the new ui-bootstrap JS files in the ./dist/ folder.