I have been trying to use ng-upgrade as an upgrade strategy to angular2
with limited success, I have successfully added an angular2 app and downgraded
it's components, but the implementation is not very flexible.
I get an error saying
ReferenceError: MainModule is not defined
It seems like UpgradeAdapter must be instantiated in the same file as the
angular2 module declaration - which is a problem when introducing multiple,
separate modules with independent downgrades.
I guess my question is... is it the correct way to utilize UpgradeAdapter and if so
is there a way to separate the adapter definition and the module definition into
separate files?
plnkr demonstrating the issue: https://embed.plnkr.co/ZPw9BVBVSZjYbfzkAkpl/
I followed the bootstrap sequence until I found the issue,
it turns out that there were 2 mistakes in my plnkr:
Angular 1 - The ng1 app template used "module-1-component" & "module-2-component" as the downgraded components selector, but it was actually "module1-component" & "module2-component", I misunderstood the camelCase to kebab-case conversion in ng1.
Angular 2 - The ng2 module declarations had "declares" property instead of "declarations".
Updated plnkr demonstration the solution: https://embed.plnkr.co/6gljurzSWWiuk8QHvLFw/
Hope this helps!
Related
I have an Angular hybrid app which use UpgradeModule. The AngularJS components depend on Angular services downgraded by downgradeInjectable. When I unit test the components, I saw this error.
Error: Error while instantiating injectable 'MyService': Not a valid '#angular/upgrade' application.
Did you forget to downgrade an Angular module or include it in the AngularJS application?
I found UpgradeAdapter.registerForNg1Tests and it solved this error. I love this function but the module UpgradeAdapter is said deprecated. I would like to use some alternative function which is not deprecated if exists.
Gist
I have an application running AngularJS and Angular side by side, using the UpgradeModule. I have "upgraded" and AngularJS component (angular.component) for use in our Angular components (#Component). I have done so using the instructions on the Angular 1.x upgrade page.
The issue is that when this "upgraded" component is declared in the AppModule declarations: [] array, I receive an error saying unknown element 'tooltip'.
When I remove the declaration from the AppModule and declare it instead in the #NgModule for the component in which the upgraded component will be used, it works fine.
Please review the Gist for the code that is being used.
There is nothing wrong with the behavior.
The components must be declared in the module where you want to use it.
If you want to use the component in multiple modules, Create a SharedModule (shared module) and add your component to it's declarations and exports.
Import the SharedModule in other modules wherever you want to use this component.
More about shared modules in Angular2 Docs.
And here is a nice tutorial on NgModules that might help you.
I'm currently trying to update my angular 1 application from typings to #types.
First I got following error message:
Identifier 'angular' must be imported from a module
After some searching I found out, that angular isn't accessible globally anymore. Or anleast I didn't find out how...
With typings, angular was global and I could use it without imports or anything. My problem is, that an import of angular, like this:
import * as angular from 'angular';
breaks my application: Unfortunately SystemJS is now trying to load angular and because of this it's not available when ui-bootstrap and other libs are loaded with script tags.
To fix this, I would have to rewrite a huge part of the build-pipeline. So I'm asking again: Is there another way to use angular with TypeScript 2 and #types, that doesn't end in a require('angular')?
I found the answer. Do this and everything will work finr.
import * as _angular_ from 'angular';
declare global {
const angular: typeof _angular_;
}
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 have a fairly sizeable angularjs application that I will eventually migrate to Angular 2.
I want to to take whatever steps I can now to make future migration easier.
I am converting my controllers and services to typescript and organising my files in a component-oriented folder structure.
What I would really like to be able to do is use es6 style module loading.
I understand that system.js can provide the loading functionality now and I can use es6 import syntax in typescript 1.5.
My question is, how should I use the two together? Should I output es6 modules from typescript and use system.js module loading with the generated code? Or is some other step required?
Should I output es6 modules from typescript and use system.js module loading with the generated code
I would output commonjs modules and then use System.js at the moment. Note that System.js module output is going to arrive in TypeScript 1.6. See roadmap : https://github.com/Microsoft/TypeScript/wiki/Roadmap#16
I would suggest using commonjs since there are lot of node modules already written using that. The problem with using es6 modules is a large number of browsers are not going to support es6 modules for a long time.