Running Angular and AngularJS frameworks side by side

Question

I have found resources that describe how to integrate Angular (2) components into AngularJS, but all of these have involved setting up the AngularJS project like an Angular project, requiring a transpiler from TypeScript, requiring ES6, requiring import statements. I want to simply use Angular components in my AngularJS application without disrupting my existing workflow. Is this possible, and if so how do I implement it? I thought that this was the purpose of the upgrade module, but all the tutorials I have seen require import statements in the AngularJS application, which requires a transpiler. If the Angular application needs to be transpiled ahead of time, that is ok, but the AngularJS application cannot be transpiled because it is running on a django server, and I don't want to run another server with a transpiler.

To be clear, my current AngularJS application is being served by django. I want to include some Angular components. These won't be touched during development, so they can be transpiled ahead of time without affecting workflow. Is there a way of adding these components into the AngularJS app without adding a transpiler to the AngularJS app?

Answer 1

Incrementally upgrade an AngularJS application to Angular.

One of the keys to a successful upgrade is to do it incrementally, by running the two frameworks side by side in the same application, and porting AngularJS components to Angular one by one. This makes it possible to upgrade even large and complex applications without disrupting other business, because the work can be done collaboratively and spread over a period of time. The upgrade module in Angular has been designed to make incremental upgrading seamless.

For more information, see Angular 2 Guide - Upgrading from AngularJS to Angular

The DEMO on PLNKR

See also,

• Migrating AngularJS to Angular 4,5 (with DEMO)

---

I don't want to run another server with a transpiler.

The transpiler can be run client-side. It is possible but not recommended.

<script src="https://unpkg.com/[email protected]?main=browser"></script>
<script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
  System.import('main.js').catch(function(err){ console.error(err); });
</script>

systemjs.config.js

/**
 * WEB ANGULAR VERSION
 * (based on systemjs.config.js in angular.io)
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      // Copy of compiler options in standard tsconfig.json
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": ["es2015", "dom"],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    paths: {
      // paths serve as alias
      'npm:': 'https://unpkg.com/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
      '@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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

      // other libraries
      'rxjs':                      'npm:[email protected]',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'ts':                        'npm:[email protected]/lib/plugin.js',
      'typescript':                'npm:[email protected]/lib/typescript.js',

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.ts',
        defaultExtension: 'ts',
        meta: {
          './*.ts': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });

})(this);

For more information, see Angular 2 TypeScript QuickStart

---

Convert Angular TypeScript examples into ES6 and ES5 JavaScript.

Anything you can do with Angular in TypeScript, you can also do in JavaScript. Translating from one language to the other is mostly a matter of changing the way you organize your code and access Angular APIs.

For more information, see Angular 2 Developer Cookbook - TypeScript to JavaScript