AngularJS to Angular migration

This is a collection of useful links I’ve come across when working on an AngularJS to Angular migration project.

Migration guides and overviews

• Migrating Large Enterprise Angular JS Codebases to Angular by Christian Kohler
• ngMigration Forum
• Migration Paths Overview — ngMigration Forum wiki
• Upgrading from AngularJS to Angular — official guide
• Upgrading AngularJS — Medium publication
• @uirouter/angular-hybrid — npm

ng-annotate and dependency injection

• How to use ng-annotate with a hybrid app based on angular-cli — Stack Overflow
• ng-annotate-patched — npm
• babel-plugin-angularjs-annotate — adds AngularJS DI annotations to ES6 code
• ng-annotate Babel plugin discussion — r/angularjs
• Injection on ES6 class constructors with Angular 1.x and webpack not working — Stack Overflow
• AngularJS ⇒ Angular migration and ng-annotate — angular/angular-cli#6873
• Using Babel loader with ngAnnotate plugin — just-jeb/angular-builders#12
• ng-annotate-loader TypeScript processing order — just-jeb/angular-builders#186
• Issues mentioning ng-annotate in just-jeb/angular-builders

Webpack and build configuration

• @angular-builders/custom-webpack — npm
• angular-builders migration guide
• webpack-merge — npm
• webpack-merge mergeWithRules — GitHub
• ngx-build-plus — extend the Angular CLI’s build behaviour without ejecting
• webpack.partial.js for an Angular CLI project using ngAnnotate — gist
• Angular2: provide external data to app before bootstrap — Medium

jQuery

• How to Use jQuery with Angular (When You Absolutely Have To) — Bits and Pieces
• How to Include and Use jQuery in Angular CLI Project — Better Programming

Errors encountered along the way

• AngularJS error reference: ng:btstrpd (app already bootstrapped)
• [$injector:strictdi] function($parse) is not using explicit annotation — angular-tree-control#293
• ngUpgrade: No provider for [ServiceName] when AngularJS module is loaded dynamically — angular/angular#17581
• depends on 'jquery'. CommonJS or AMD dependencies can cause optimization bailouts.
• Cannot assign to 'htmlPrefilter' because it is a read-only property.

Lessons learned

• Angular CLI (11) doesn’t have any official support for ng-annotate. In other words, any AngularJS code that you have annotated with things like /* @ngInject */ won’t work if you try to build your code using the webpack configuration that Angular CLI generates.

To fix “The Kendo UI directives require jQuery to be available before AngularJS. Please include jquery before angular in the document” - use:

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      moment: "moment",
      "window.jQuery": "jquery"
    }),
  ]