Following the official 5 min QuickStart I have a simple Angular 2 app working.
I set up Angular 1 and have now them both working independently, see this plunker.
Following the official upgrade guide they say:
To then switch the application into hybrid mode, we must first install Angular 2 to the project. Follow the instructions in the QuickStart for some pointers on this. When we have Angular 2 installed, we can import and instantiate the
UpgradeAdapter
, and then call itsbootstrap
method. It is designed to take the exact same arguments as angular.bootstrap so that it is easy to make the switch:import {UpgradeAdapter} from 'angular2/upgrade'; /* . . . */ const upgradeAdapter = new UpgradeAdapter(); upgradeAdapter.bootstrap(document.body, ['heroApp'], {strictDi: true});
My question is where to place it?
It sounds like a 'do my job' question but it's not so. I guess in main.ts
, but I tried a lot of things without success. The doc is not really clear about this and some tutorials of 1 month old are already outdated.
--- update:
In my case I forgot to load upgrade.js that I thought already included
In a hybrid application you run both versions of Angular at the same time. That means that you need at least one module each from both AngularJS and Angular. You will import UpgradeModule inside the NgModule, and then use it for bootstrapping the AngularJS module. For more information, see NgModules.
Bootstrap is an open source CSS framework that has many components for building responsive web interfaces. Let's create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format. ng new angular-bootstrap ? Would you like to add Angular routing? Yes ?
Now import and declare the newly created pipe and remove the filter <script> tag from index.html: To use AOT with a hybrid app, you have to first set it up like any other Angular application, as shown in the Ahead-of-time Compilation chapter.
The bootstrap property or key of the NgModule decorator specifies which component should be loaded by Angular when the app-level module loads. Angular reads the bootstrap metadata and loads the app-level component, called AppComponent.
I had a look at your plunkr. In fact you can use several times bootstrap
but this means that you use two different applications into your HTML page.
If you want to mix Angular1 and Angular2 stuff into the same application, you need to call only the boostrap
method of the UpgradeAdapter
.
The call of the boostrap
function on the UpgradeAdapter
and it's creation could be done in the boot.ts
file:
import {UpgradeAdapter} from 'angular2/upgrade';
var upgrade = new UpgradeAdapter();
// Configure the upgrade adapter
(...)
export function main() {
try {
upgrade.bootstrap(document.body, ['heroApp']);
} catch (e) {
console.error(e);
}
}
You can import this into your HTML file like this:
<script>
System.import('app/main').then(function(src) {
src.main();
});
</script>
Mixing Angular2 and Angular1 stuff
If you want to bootstrap an Angular2 application, provide the main component as first parameter and the provider for the Angular1 application to be able to use factories / services / directives into the Angular2 application.
// Providers for Angular1 elements
upgrade.upgradeNg1Provider('customService');
upgrade.upgradeNg1Provider('customFactory');
// Providers for Angular2 elements
upgrade.addProvider(HTTP_PROVIDERS);
// Bootstrap Angular2 application
upgrade.bootstrap(AppComponent);
If you want an Angular1 application to use Angular2 stuff, you need to provide the document.element as first parameter of the bootstrap
method:
// Providers for Angular2 elements
upgrade.downgradeNg2Provider(HTTP_PROVIDERS);
upgrade.bootstrap(document.body, ['heroApp']);
This plunkr could also be useful to you: http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With