0

I initially build my web app using angularJs library not the cli. I am trying to dual boot or migrate to angular2 but can't seem to find any suitable way to do the migration without having to rewrite my code from scratch.

I tried looking at the angular documentation Official Guide1 and official guide2 but they explained it in regards of using the cli initially in angularJs but my web app was not build with the cli rather the library download.

I also tried following this guide but still it is based on migrating from angularjs cli to angular cli.

Can someone point me to a link or help with best way to migrate my angularJS library to angular cli or best solution to dual boot instead.

Also, is it possible to download angular2 library as it is in angular1?

Mr. H
  • 3
  • 2
  • Setting up side-by-side with ng-upgrade and/or migrating from AngularJS to modern Angular is not only specific to each project but also a complicated process. It is highly unlikely you will get a step-by-step guide on how to migrate your specific solution. For anything but the simplest of applications, there really isn't a simple path. You are going to need familiarity with AngularJS and Angular to accomplish any kind of upgrade. – Mark Clark Dec 16 '22 at 17:48
  • Also to answer your other question: no you can't download ng2 and run as an inline script, the framework depends on esmodules, tscompilation, and webpack. – Mark Clark Dec 16 '22 at 17:55
  • @MarkClark Thanks for your detail input. My codebase is so large that rewriting it will take a very long time. Wish there is an easy way to migrate or dual boot. I will appreciate more input to this issue – Mr. H Dec 19 '22 at 15:26
  • IIRC, you can run side-by-side without going through the full ngUpgrade preparation. The problem is that this path means the two apps cannot talk to each other. You do this by including two separate root components, one for angularJS and the other for ng2+. It's not a supported configuration nor is it recommended, but it is technically possible. Also, I don't recall AngularJS CLI being required for ngUpgrade, just the CLI for the newer ng2+ app. – Mark Clark Dec 20 '22 at 16:43
  • You are right, anugular CLI is not required but the documentation assume your ng1 app was developed using the CLI and all instructions is based on the CLI. If the library was initially downloaded from angular1 it is different from if you used the CLI. With ng1 using the library, you really don't get/need package.json file but with CLI you do. I really need both ng1 and neg2 to talk to each other and then gradually change the files of ng1 to ng2. Doing it all at ones will take me a lot of time considering the codebase is large. – Mr. H Dec 21 '22 at 19:37
  • The guide on angular.io (Official Guide 2 from your original post) makes no mention of the AngularJS cli, maybe I missed it. It really shouldn't matter. The critical part of preparing angularjs for upgrade is moving to typescript, using a module system, and converting any lingering controllers to components. Because those are required for interop between your AngularJS and ng2+ components. Just prepping the AngularJS app is a challenging undertaking for larger apps. You may want to collaborate with vendors that specialize in upgrading angular apps if yours is that complex. – Mark Clark Dec 22 '22 at 22:34

1 Answers1

0

What I did on mine is follow the instructions on Running angular1 and angular2 side by side

  • I created a new angular 6 application using the angular CLI
  • I created a folder under the src directory called ng1
  • Copied all the angualr1 files into the ng1 director created
  • I migrate all my angular1 JS dependencies on the index.html into the angular.json of the angular2 under the scripts.
    "scripts": [
              "src/ng1/part-to/your-javascript-directory/jquery.min.js"
    ]
  • I also copied all the angular1 CS dependencies on the index.html into the angular.json of the angular2 under the styles
    "styles": [
              "src/styles.css"
     ]
  • I also add the ng1 directory I earlier created in the assets part of the angular2 angular.json file
    "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/ng1"
            ]

The key here angular1 will have to be copied into angualr2. The above is the basic for preparing your angular1 project to dual boat inside angular2. There is more but follow the instructions on the link I posted above and your app will both run side by side. Hope this help

Cito
  • 26
  • 6