How can I make sense out of all these guides for migrating AngularJS 1.x to Typescript?

Question

I've been trying to follow several guides all week on integrating Typescript into my AngularJS 1.6.2. application. Everytime I get confused half way through. Right now, I'm on the fourth one in this list:

• https://angular.io/guide/upgrade
• https://medium.com/@ylerjen/migrating-angularjs-application-to-typescript-5230eb8c46e1
• https://jenniferwadella.com/blog/using-typescript-angularjs
• https://tech.ovoenergy.com/angular-typescript/

Here is the file structure of my project:

ProjectRoot
--> app
----> js
------> controllers
------> directives
------> services
------> modules
------> app.js
------> main.js
------> routes.js
----> templates
----> index.html
--> gruntFile.js
--> package.json

The structure is a lot more complicated than this but these are the folders and files I deemed to be most relevant.

Following the fourth guide above, I added the following files to my project:

ProjectRoot/app.ts

import { BaselineService } from './app/js/services/baselineService'
import { BaselineController } from './app/js/controllers/baselineController'
import angular from 'angular';

angular
  .module('app',[])
  .controller('ctrl', BaselineController)
  .service('service', BaselineService);

ProjectRoot/app/js/services/baselineService.ts

export class BaselineService {
    static $inject = ['$http'];

    constructor(private $http) {

    }

    get() {
        return this.$http.get('url');
    }
}

ProjectRoot/app/js/controllers/baselineController.ts

import angular from 'angular';
import { BaselineService } from '../services/baselineService';

export class BaselineController {
    prop: string;
    static $inject = ['service'];

    constructor (baselineService: BaselineService) {
        this.prop = baselineService.get();
    }
}

angular.module('app').controller('BaselineController', BaselineController);

ProjectRoot/gruntFile.js

module.exports = function (grunt) {
...
    grunt.initConfig({
        ...
        ts: {
            default: {
                src: ['_all.ts'],
                out: 'src/out.js',
                options: {
                    sourceMap: true
                }
            }
        }
    });
}

ProjectRoot/package.json

{
    ...
    "dependencies": {
        ...
        "browserify": "^17.0.0",
        ...
    }
    ...
}

There are several points of confusion that I'm stuck on. I'll mention two here:

1. The guide mentions a file that it relies on:

/// <reference path='typings/Angularjs/angular.d.ts' />

/// <reference path="typings/Angularjs/angular-route.d.ts" />

/// <reference path='typings/moment/moment.d.ts' />

/// <reference path='app.ts' />

/// <reference path='controller.ts' />

/// <reference path='service' />

It says:

This file keeps track of all your files in your project and when compiling they are compiled into es5, concatenated into one file and contains source maps.

But it doesn't mention what to call this file or what the extension is or where it should reside.

2. The guide also mentions that:

We need to use tsify and browserify in conjunction to first compile typescript and then crawl the dependency chain that we lay out with our imports. Then we can bundle up our app with a simple command:

browserify app.ts -p tsify --debug > bundle.js

It doesn't go into any detail on how to do this (as if it leaves it for another article) and when I execute the command in Powershell under ProjectRoot it tells me The term 'browserify' is not recognized as the name of a cmdlet, function, script file, or operable program. (even after I npm i browserify).

So just to start, I'm asking (pretty please) for help with the above 2) hurdles. Does anyone know where to save the file mentioned in 1) and what to call it? And does anyone know how to install and run browserify in order to bundle my app?

Thank you very much.

Answer 1

Most of those guides, besides the official docs, are outdated. If you see Grunt or especially Browserify in a tutorial or guide, it's probably obsolete. You've got two problems: upgrade from Angular 1 to Angular (whichever version you pick), and convert to TypeScript.

For the setup and config, you might consider just using the official CLI to generate a project, and replace the boilerplate with your code. This will give you TypeScript support. Renaming all your files from js to ts will result in a ton of compiler errors, but it's a starting point.

As for upgrading your actual Angular 1 code to Angular 16 (or whichever version), you may need to hunt down guides for each major version, cross-check with the changelogs in the repo, and do a lot of debugging; you're several years out of date, so it's going to take work. There are also codemods to help you out, but I haven't tested them and can't vouch for them.

As for specifics in your question, these are those "reference path" directives, there's no need to use Browserify at all (use the CLI to generate your config, including build steps), and browserify couldn't be found likely because the guide assumed you installed in globally (to run project npm dependencies with executables, prepend npx, as in npx browserify ....