The ngNewRouter (now named ngComponentRouter) was supposed to be in 1.4, but was delayed and is now supposed to go into 1.5 (as I understand it). However, it's not in the 1.5 beta2 package. I do see angular1_router on github, but I don't see that built module included in the 2.0 alpha packages either.
Does anyone know if the new router will actually be in the 1.5 release?
Is there a current build of the new router hosted anywhere? I managed to find a copy of the compiled js from a random plunker, but haven't been able to compile the source myself (issues with node-gyp & msbuild, still working on that).
Does anyone know of any up-to-date documentation or working samples on the new component router? The best site I've found so far is pretty close (it says it was published in February, but it uses ngComponentRouter rather than ngNewRouter so it's clearly being updated), but the post still has things wrong - like it says to create controllers for the components you're loading for the routes, but I discovered that you actually need to be creating them as directives (optimally using the new "component" wrapper in 1.5) with the restrict set to "A" (that was fun to figure out).
You can get the new router via npm with:
npm install #angular/router
For more information on the current API you can have a look at:
https://angular.io/docs/js/latest/api/router/Router-class.html
It's for Angular 2 but the core mechanics of the router are the same, and it should give you some hints on how the API has been changed compared to the ngNewRouter.
It looks like the component router has been released. Here is the official documentation: https://docs.angularjs.org/guide/component-router
I'm not seeing any official announcements saying it was released yet though, so I'm not sure if it's supposed to be "official" or not.
Related
I've got pretty much this error:
AngularJS ngSanitize Error
short version: "lowercase is not a function".
While my application has AngularJS enforced to 1.4.9, we didn't enforce angular-sanitize, so it resolves to 1.7.0 and on that version of AngularJS lowercase function doesn't exist anymore, producing an error.
Probably by forcing angular-sanitize to a fixed version would fix that, but I want to go beyond fixing it and understand what is causing the problem and why, because I find a few inconsistencies.
AngularJS is forced to 1.4.9. bower-components folder holds this version, build folder after compiling also holds this version, developer panel on Chrome show only this version is fetched. This version does have lowercase method.
Angular-sanitize has angular 1.7.0 as a dependency, but it's never downloaded, never. Not in any single folder or subfolder on the entire project, not at compiling, not from Chrome either. So I guess the only angular.js he's got access to is 1.4.9, which does have lowercase method.
I don't quite understand why then "lowercase is not a function" error appears if the only available angular.js still has that method. Also I don't understand why angular-sanitize 1.7.0 demanding angular 1.7.0 uses non-existing methods on AngularJS 1.7.0 (Angular developers mistake? but I find hard to believe it.)
Probably sanitize is downloading and accessing angular 1.7.0 somehow, but I would like to know how. Just out of curiosity. And also to confirm if this is an angular developers mistake or if there's something I've missed.
It is explained in the official Angular 1.6 to 1.7 Migration Guide:
Due to 1daa4f, the helper functions angular.lowercase and angular.uppercase have been removed.
These functions have been deprecated since 1.5.0. They are internally used, but should not be exposed as they contain special locale handling (for Turkish) to maintain internal consistency regardless of user-set locale.
Developers should generally use the built-ins toLowerCase and toUpperCase or toLocaleLowerCase and toLocaleUpperCase for special cases.
Further, we generally discourage using the angular.x helpers in application code.
I have successfully managed to render a React component inside of ember.
You can see the relevant code here.
The basics being adding an addon, that uses the preprocessTree hook, to use broccoli-react to parse the jsx files as per here. And a ReactComponent (which is an ember component) to wrap any react component.
This works well in ember cli 2.11.0 and 2.12.0, but in 2.13.0 and 2.14.0 something has changed and I can't figure out what.
I have narrowed the error down to this line in ember-resolver, for some reason this._moduleRegistry in the newer versions don't have the react component but the older versions do...
Any ideas?
I uninstalled everything node. And started matching package versions 1 for 1 from the newer app into the older one, and it all works.
I followed the angular-meteor tutorial for the Socially app in Angular2. It basically works (after a few manual steps to fix package dependencies, etc), however, I am unable to debug the client side code in Chrome Dev Tools. When I navigate to the sources for my *.ts files, all I see are things like
module.export("default",exports.default=("<div> <ul> <li *ngFor=\"let party of parties\"> {{party.name}} <p>{{party.description}}</p> <p>{{party.location}}</p> </li> </ul> </div>"));
Other strange things in dev tools: my app.ts is blank. I see html files with !raw suffixes.... (e.g. app.html!raw). What is the !raw suffix and what causes that?
How can I debug my typescript?
I may be able to help with some parts of your question.
You don't mention which version of meteor you're using, but I assume version 1.4 or 1.4.0.1. I have seen that these versions of Meteor seem to have issues with sourcemaps for Typescript files (probably as they have to go through multiple transpilation steps).
I don't yet know where exactly the bug lies (Meteor or the Typescript compiler package).
Here's one github issue for this: https://github.com/barbatus/typescript/issues/23
UPDATE: This issue has now been fixed.
For now, my suggestion would be to try reverting to a 1.3.x.x version of Meteor. For something like the Socially tutorial, the easiest option is to specify the Meteor release at creation time:
$ meteor create --release 1.3.5.1 Socially
(list of releases is at: https://github.com/meteor/meteor/releases)
The 'app.html' and 'app.html!raw' files are generated by the meteor angular compilers as a way of working around issues with using templateUrl and the meteor build process. My understanding is that the preferred approach is to have inline templates or import the templates like this:
// This import loads the content of the html file into 'template'
import template from './app.html';
#Component({
selector: 'app',
// Instead of templateUrl, use:
template, // <--- 'template,' is syntactic sugar for: 'template: template,'
directives ... etc.
The import statement is a bit unusual, and this magic is achieved by the meteor angular pre-compiler that converts every html and css file into a couple of js files. That's what strange app.html and app.html!raw are.
The funny characters in the first app folder seem to be a bug. Meteor tries to generate put in a computer emoji, but sometimes this gets handled incorrectly. I'm not sure if this is a bug Chrome, ChromeDevTools or Meteor. (Personally, I wish they'd ditch the emoji).
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 minified/built my app that uses ExtJS 4.2.0 (free version) using Sencha SDK Tools 2.0.0 beta3, and the app was built successfully. However, when I try deleting the old "app" folder containing my old classes, the app no longer works.
I also tried generating a new app using Sencha CMD 4.0.1.45 and then adding my classes, but the results are the same.
I am confused why this happens, because as I understood it, your old classes are not needed to deploy production app. In fact, the only javascript files you need to include in your "index.html" file are "ext.js" and "app-all.js".
I used Firebug and saw in the DOM that the app, along with my classes, are loaded.
I also noticed that "app-all.js" defines classes like this:
Ext.define("MyApp.view.MyClass"...
Is this really how it is supposed to behave? or am I missing something?
Thanks in advance!
Okay, I got it. A .js file in my application calls Ext.require on itself, causing the app wiring go crazy.