Our team is currently working on migrating an AngularJS application to Angular, using a gradual approach. Our goal is to create new components in Angular and upgrade existing AngularJS components one by one while ensuring that the application remains functional throughout the process.
We are following the guidance provided in the official documentation and various articles discussing hybrid Angular/AngularJS applications in real-world scenarios.
Below are our initial attempts along with the challenges faced:
Context
- AngularJS 1.7.3
- Angular 6.1.7
- Typescript 2.7.2
- angular-cli
First steps
- Upgraded to AngularJS 1.7
- Transitioned from Grunt to angular-cli
- Utilized ngUpgrade (app.module.ts and app.module.ajs.ts)
Migrating to Typescript: Addressing Errors
The recommended process involved renaming .js files to .ts and shifting from Node require() to TypeScript module loading (var ... = require --> import ... = require). While correcting typing errors due to TypeScript compiler was advised, we explored the possibility of incremental migration as suggested in the TypeScript documentation.
To facilitate this, we opted for the awesome-typescript-loader instead of tsc with options like transpileOnly and errorsAsWarnings. Although these options helped pass compilation, we encountered an issue where the compilation ran twice, causing build failure. Any insights on running only the first compilation?
Alternative Approach: Retaining .js Files, Importing, and Bootstrapping Errors
In an unconventional attempt at incremental migration, we kept the original .js files alongside new .ts files. This led to complications during compilation and application loading related to importing AngularJS and module management.
Understanding the intricacies of Typescript modules, specifically UMD modules, became critical as we navigated through issues arising from global variables and script-mode vs. module-mode usage across .js and .ts files.
Despite managing to compile and load the application without errors, we encountered a hurdle during AngularJS bootstrapping, resulting in an "Angular 1.x not loaded!" error. Could this be resolved by importing AngularJS in the TypeScript module format? Suggestions regarding angular.IAngularStatic and setAngularJSGlobal functions would be appreciated.
Additionally, clarifications on calling bootstrap() with [App] or ["App"] were sought, considering our limited experience in the migration process.
Configuration Files
angular.json
{
// Configuration details here
}
tsconfig.json
{
// Compiler options and configurations mentioned here
}