Angular 1 구성 요소에 등록 된 Angular 2 구성 요소가 렌더링되지 않음

기존의 Angular 1 응용 프로그램에서 사용하려는 Angular 2 구성 요소를 만들었습니다. 여기 Angulars 사이트의 지침을 따랐습니다 : https://angular.io/docs/ts/latest/guide/upgrade.html Angular 1 구성 요소에 등록 된 Angular 2 구성 요소가 렌더링되지 않음

Angular 2 구성 요소는 렌더링되지 않으며 응용 프로그램에서 오류를 발생시키지 않습니다. 다음은 추가 된 파일입니다.

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'); 
    } 
}

여기 변형되지 않은 "클라이언트 모듈의 현재 각도 1 등록된다.

(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'] 
     } 
    }); 
} 
})();

마지막 index.html을는 유일한 차이점은 겨-앱 HTML 태그로부터 제거되었고, I는 각 소자 2 (a-이성)을 첨가했다.

<!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>

출처

2016-08-10 Ryan Langton

모듈의 부트 스트래핑은 모든 구성 요소가 다운 그레이드되고 등록 된 후에 수행되어야합니다. bootstrap.ts에서 두 줄의 코드를 바꿔 놓으면 문제가 해결됩니다.

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

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

출처

2016-08-10 16:39:41

Angular 1 구성 요소에 등록 된 Angular 2 구성 요소가 렌더링되지 않음

답변

관련 문제