CODEWITHSUNDEEP
angularjsangularsystemjs
Chris Halcrow
Chris Halcrow

Reputation: 31940

How do I load Angular 4 into an AngularJS app using SystemJS?

I want to convert an AngularJS app to Angular 4. I'm reading the official Angular documentation for upgrading from AngularJS at https://angular.io/guide/upgrade. It states this:

To begin converting your AngularJS application to a hybrid, you need to load the Angular framework. You can see how this can be done with SystemJS by following the instructions in Setup, selectively copying code from the QuickStart github repository.

The 'Setup' link however leads to a page which doesn't mention SystemJS. How do I use SystemJS to load/build the Angular 4 framework into the existing AngularJS app?

Upvotes: 0

Views: 556

Answers (2)

Chris Halcrow
Chris Halcrow

Reputation: 31940

That quote I gave from the Angular documentation is very confusing. What you actually need to do when upgrading is to somehow set up the scaffolding for an Angular 4 app within your project, then use SystemJS as the module loader that will load the Angular 4 modules at runtime (since there is currently incomplete native browser support for the EcmaScript module system).

I figured out by reading further through the upgrade guide (specifically the 'PhoneCat Upgrade Tutorial - https://angular.io/guide/upgrade#phonecat-upgrade-tutorial) that what you're expected to do is set up the QuickStart project in an independent location, somehow move most of it into your existing AngularJS project to provide the scaffolding for an Angular 4 project, then wire up SystemJS as the module loader by selectively using some of the SystemJS configuration that is inside your 'built' QuickStart project.

Upvotes: 0

Steverob2k
Steverob2k

Reputation: 443

The link you specified points to the Angular quickstart project which uses systemjs. https://github.com/angular/quickstart

Although the project is marked as deprecated it is currently still valid in how you can setup Angular with systemjs.

You can then use the quickstart as the basis for porting your code across and will enable you to follow the additional instructions in that setup steps.

Upvotes: 1

Related Questions