Angular 1 and 2 hybrid app - "require is not defined"

[Matt Zalen]

I'm trying to upgrade a giant client-side app from Angular 1.x to Angular 2, and I've hit a really annoying roadblock.  I've recreated the issue with a dummy, light-weight project (files pasted below), but let me just explain the problem first.  

Basically, when my `tsconfig.json` specifies module as `commonjs`, I get the following error in my chrome dev console:

>app.module.ts:1Uncaught ReferenceError: require is not defined

When I switch the module to `system`, I get the following error:

>Uncaught TypeError: Invalid System.register call. Anonymous System.register calls can only be made by modules loaded by SystemJS.import and not via script tags.

And when I switch module to `umd`, everything works fine. But given that angular themselves suggest using `commonjs`, I'm concerned that `umd` is not the right answer. If I'm wrong about that, I'd love for somebody to explain why.

I've read a number of blogs about module loading and the differences between umd and amd and commonjs and node, but I have to admit, I'm still pretty confused.  So if somebody could also point me to a great, clear explanation about that, as well, I'd really appreciate it.  In the meantime, here's my code.  

tsconfig.json:

    {
      "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
     }
     ,
    "exclude": [
        "node_modules"
     ]
    }

typings.json:

    {
      "globalDependencies": {
      "angular": "registry:dt/angular#1.5.0+20160922195358",
      "core-js": "registry:dt/core-js#0.0.0+20160725163759",
      "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
      "jquery": "registry:dt/jquery#1.10.0+20160929162922",
      "node": "registry:dt/node#6.0.0+20160909174046"
      }
    }

systemjs.config.js :

    (function (global) {
       System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
             '@angular/ ': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs':                      'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
     });
    })(this);

package.json :

    {
     "name": "mattsApp",
     "version": "0.0.1",
     "dependencies": {
     "angular": "^1.5.8",
     "@angular/common": "~2.0.2",
     "@angular/compiler": "~2.0.2",
     "@angular/core": "~2.0.2",
     "@angular/forms": "~2.0.2",
     "@angular/http": "~2.0.2",
     "@angular/platform-browser": "~2.0.2",
     "@angular/platform-browser-dynamic": "~2.0.2",
     "@angular/router": "~3.0.2",
     "@angular/upgrade": "~2.0.2",
     "angular-in-memory-web-api": "~0.1.5",
     "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.0-beta.12",
     "systemjs": "0.19.39",
     "zone.js": "^0.6.25"
    },
    "devDependencies": {
      "concurrently": "^3.0.0",
      "lite-server": "^2.2.2",
      "typescript": "^2.0.3",
      "typings":"^1.4.0"
     },
     "scripts": {
      "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
      "lite": "lite-server",
      "postinstall": "typings install",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "typings": "typings"
     }
    }

app.js :

    angular.module('app', []);

app.module.ts :

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { upgradeAdapter } from './upgrade_adapter';


    @NgModule({
      imports:      [ BrowserModule ]
    })
    export class AppModule { }


    upgradeAdapter.bootstrap(document.body, ['app'], {strictDi: true});

appCtrl.ts :

    angular.module('app')
        .controller('appCtrl', ['$scope', function($scope) {
          $scope.hello = "howdy worldy";
        }]);

upgrade_adapter.ts : 

    import { UpgradeAdapter } from '@angular/upgrade';
    import {AppModule} from "./app.module";
    export const upgradeAdapter = new UpgradeAdapter(AppModule);

What am I missing?

[Ed Pelc]

You need to declare require. Take a look at the ts docs on declarations.

[Matt Zalen]

I appreciate the response, but if that were true, why does it work when I set the tsconfig.json module to "umd"?

[john sam]

Could you please share how did you achieve routing between angular 1 and 2 ?

[Alexander Golovan]

I created a sample app at GitHub that answers many questions: https://github.com/agolovan/AlexPhoneApp

Please check and let me know!

On Sunday, October 9, 2016 at 9:12:22 PM UTC-7, Matt Zalen wrote: