Angular 2 component registered in Angular 1 app not rendering

Question

I have created an Angular 2 component that I want to use in my existing Angular 1 application. I followed the instructions on Angulars site here: https://angular.io/docs/ts/latest/guide/upgrade.html

The Angular 2 component is not rendering, and the app is not throwing any errors. Below are the files that have been added.

bootstrap.ts

import 'zone.js/dist/zone';
import 'reflect-metadata';
import { bootstrapCommon } from './../components/bootstrap.ts';
import { upgradeAdapter } from './../components/upgradeAdapter.ts';
import { A2Component } from './../components/a2component/a2.component.ts';

declare var angular: any;

angular.element(document).ready(function () {
    upgradeAdapter.bootstrap(document.documentElement, ['client'], { strictDi: true });

    angular.module('client')
        .directive('aTwoComponent',
        upgradeAdapter.downgradeNg2Component(A2Component));

});

a2.component.ts

/// <reference path="../../../node_modules/@angular/core/index.d.ts" />
/// <reference path="../../../node_modules/@angular/platform-browser/index.d.ts" />

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'a-two-component',
    template: '<h1>Angular 2 component!</h1>'
})
export class A2Component implements OnInit {

    constructor() {
        console.log('a2 component constructor');
    }

    ngOnInit() {
        console.log('a2 component oninit');
    }
}

Here is the current angular 1 registration of the 'client' module, which has not been modified.

(function () {
'use strict';

angular.module('client', ['ui.router', 'common', 'orders', 'reports', 'schedules']);

angular.module('client')
.config(config);

function config($stateProvider, $urlRouterProvider, $httpProvider) {
  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('home', {
      url: '/',
      title: 'Client Home',
      template: '<sb-client-home></sb-client-home>',
      data: {
        authorizedRoles: ['client']
      }
    });
}
})();

Finally the index.html, the only difference is ng-app has been removed from the html tag and I've added the angular 2 element (a-two-component).

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{title || 'Home'}}</title>
    <!--INJECT:vendor-css-->
    <!--END INJECT-->
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/client.css">

</head>
<body id="bootstrap-overrides">
    <sb-client-layout></sb-client-layout>

    <a-two-component></a-two-component>

    <!--INJECT:vendor-js-->
    <!--END INJECT-->
    <!--inject:js-->
    <!--endinject-->

</body>
</html>

Ryan Langton · Accepted Answer · 2016-08-10 16:39:41Z

1

The bootstrapping of the module should be done AFTER all components are downgraded and registered. Swapping those two lines of code in bootstrap.ts fixes the issue.

angular.module('client')
    .directive('aTwoComponent',
    <angular.IDirectiveFactory>upgradeAdapter.downgradeNg2Component(MyComponent));

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

answered Aug 10, 2016 at 16:39

Ryan Langton

6,18016 gold badges56 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 component registered in Angular 1 app not rendering

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related