1
私は既存の角度1のアプリケーションで使用したい角度2のコンポーネントを作成しました。私はここのアンギュラサイトの指示に従いました：https://angular.io/docs/ts/latest/guide/upgrade.html角度2のコンポーネントが角度1のアプリにレンダリングされていません
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を、唯一の違いはNG-アプリケーションは、HTMLタグから削除され、Iは、角2要素（二成分）を追加しました。
<!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>