0

Undertaking upgrade of an AngularJS v1.25 to Angular 14, using the ng-Upgrade approach as described on angular.io/guide/upgrade. To make things even steeper, our app's main page is ASP.NET MVC 5. I would like to use the Angular CLI for the new Angular app. Not many tutorials or blogs leveraging all these techs in one place.

Our entire app at the moment uses zero typescript. Most tutorials seem to indicate moving all .js to .ts before you even migrate, or just (strangely) assume your 1.x app is already in TypeScript.

However, I'd rather not do that; renaming all the files and keeping git history is going to be a large undertaking. Forunately we used the AngularJS style guide and our code mostly conforms.

I see that the AngularJS application has to be "made a hybrid/ngUpgrade app" in order to be able to inject "downgraded" Angular components in the AngularJS. To do that, you have to have the @angular/upgrade module available in your app module.

  1. Can I get away with just upgrading app.js to app.ts so I can do the injection, and leave everything else as .js?
  2. Should I only be importing the new @angular stuff at the top project level, and then modifying the tsconfig.json in the subdir so it can find the modules in ../node_modules?
jessewolfe
  • 372
  • 3
  • 10

1 Answers1

1

Didn't get any responses, but figured I'd post my results here for future readers.

As for #1 - I didn't even have to make that into typescript, once I figured out #2. I tried to leave it TypeScript but the browser didn't like interpersing a "module" type tag among other plain "text/javascript" type script tags. It seems to process the module type last, or at least not in synchrony with the order of the .js loads, which ended up causing a failure to boot AngularJS because, well, app.js has to be processed prior to all the module.js files, which expect the modules themselves to already be created. Since all it ended up creating was a .js file with an "export" statement (which forces you to use ) I opted to just go back to using app.js.

#2 - I don't know if you "should" or not, but it was not a big deal to move all the npm packages to the main application's package.json. By modifying angular.json and tsconfig.json it seems to work just fine.

jessewolfe
  • 372
  • 3
  • 10