Problem to upgrade angular 1.x to angular2

Javier Montalvo

unread,

Jan 20, 2017, 3:50:46 PM1/20/17

to Angular

Good afternoon, I have a problem I'm migrating an app angular1 to angular2, for now I follow the tutorial on the official website all loads perfect but the drawback is when you merge angular 1 and 2 with the module ngUpgrade. In the 1 app I do not use ng-app for initial use: angular.bootstrap (document, [ApplicationConfiguration.applicationModuleName]); And in the documentation of angular 2 also ask to mention the name of ng-app but as I do not use it displays the error: [ng: btstrpd] App already bootstrapped with this element 'document' any idea?

Kyle Thomas

unread,

Jan 20, 2017, 4:09:01 PM1/20/17

to Angular

I've stripped out a lot of code but here is an example that I got to work:

main.ts

import { UpgradeAdapter } from '@angular/upgrade';
import { AppModule } from './app.module';

let upgradeAdapter = new UpgradeAdapter(AppModule);
angular.module('myApp')
.directive(
  'administration',
  upgradeAdapter.downgradeNg2Component(AdministrationComponent) as angular.IDirectiveFactory
);

upgradeAdapter.upgradeNg1Provider('Auth');  
upgradeAdapter.bootstrap(document.documentElement, ['myApp']);

index.html

<!doctype html>
<html lang="en">

<head>
   <base href="/">
   <meta charset="utf-8">
 <!-- Angular 1 app module -->
<script src="app.module.ng1.js"></script>
<!-- Configure System.js, our module loader -->
<script src="account/auth.module.js"></script>
<script src="account/auth.service.js"></script>
  <!-- angular 2 libraries -->
   <script src="../node_modules/core-js/client/shim.min.js"></script>
   <script src="../node_modules/zone.js/dist/zone.js"></script>
   <script src="../node_modules/reflect-metadata/Reflect.js"></script>
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
   <!-- System JS loader -->
  <script src="/systemjs.config.js"></script>
   <script>
      System.import('main.js');
    </script><body>

<body class="container-fullwidth">
  <div autoscroll="true">

      <div ui-view=''>
        <i class="center-fix main-spinner fa fa-spin fa-spinner"></i>
      </div>

  </div>

</body>

</html>

app.module.ng1.js

'use strict';
// Define the `myApp` Angular 1 module
angular.module('myApp', [
  'ngAnimate',  'ngRoute',  'ui.router', 'ui.select', 'ngResource', 'ngSanitize',   'myApp.auth'
])
.config(function ($stateProvider, $urlRouterProvider) {
.............
})
 .controller('TitlebarController', function () {
})
.directive('titlebar', function () {
  return {
    templateUrl: '/layout/titlebar.template.html',
    restrict: 'E',
    controller: 'TitlebarController',
    controllerAs: 'titlebar'
  }
})

Hopefully that helps guide you

Kyle Thomas

unread,

Jan 20, 2017, 4:09:55 PM1/20/17

to Angular

Also add this in your index.html

Reply all

Reply to author

Forward