AngularとTypeScriptでAngularJSのグローバルな 'angular'変数にアクセスするにはどうすればよいですか？

Question

私は大きなモノリシックなAngularJSアプリケーションに取り組んでおり、Angular（Angular 4のように）コンポーネントを追加したいと考えています。残念ながら、AngularJSプロジェクトのビルドシステムは主に固定されており、プロジェクトのindex.htmlを調整し、例えば、<script>タグを追加してAngularコードをロードするだけです。私の質問は、AngularJSのグローバルangular変数にアクセスしてAngularプロジェクトのTypeScriptファイルにアクセスして、Angularコンポーネントをダウングレードし、AngularJSにアクセスできるようにする方法です。 AngularJSライブラリ全体がAngularプロジェクトに依存していますindex.htmlがロードするAngularJSプロジェクトのJSファイル。

詳細にもう少し状況を説明するために：、私は角からAngularJSアプリをブートストラップするupgrade guideを追ってきたので、のように：

// src/app/app.module.ts of the Angular project 
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { UpgradeModule } from '@angular/upgrade/static'; 

import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    UpgradeModule 
    ], 
    providers: [], 
}) 
export class AppModule { 
    constructor(private upgrade: UpgradeModule) { } 
    ngDoBootstrap() { 
    // Bootstrap AngularJS app 
    this.upgrade.bootstrap(document.documentElement, ['my-angularjs-app']); 
    } 
} 

ファイルsrc/main.tsとsrc/app/app.component.tsがデフォルト$ ng new my-appに比べて変化していませんプロジェクト。今、私は上記のようにAngularJSプロジェクトのindex.htmlに含めることができるプロダクション対応のJavaScriptファイルを作成するために$ ng build --prodを実行します。 （AngularJSファイルのの後に、Angularファイルのローダーはです）

ここでAngularJSにAppComponentを提供したいと思います。 This section of the guideは、私が上記app.module.tsに次の行を追加することを示唆している：

import { downgradeComponent } from '@angular/upgrade/static'; 

angular.module('my-angularjs-app') 
    .directive(
    'my-ng2-component', 
    downgradeComponent({ component: AppComponent }) as angular.IDirectiveFactory 
); 

しかし、明らかにangular変数が利用できないと活字体のコンパイラはそれについて不平を言います。それをどうやって変えるの？私は無駄に以下のことを試してみた：

1. はラインdeclare var angular: anyまたはラインlet angular = window.angularを追加します。上記のダウングレードコードを追加すると、Cannot find namespace 'angular'になります。
2. @types/angularをAngularプロジェクトの依存関係として追加し、行番号import * as angular from 'angular'を追加します。 2枚
3. （ダウングレードコードを追加するとき、これは。Module not found: Error: Can't resolve 'angular'もたらす））が、ファイル2枚
4. の上部に行/// <reference path="../../node_modules/@types/angular/index.d.ts" />を追加）が、ファイルの先頭に行/// <reference types="angular" />を加えます。

3）及び4）は、次のエラーメッセージが表示さ： '角度'

グローバルUMDを意味するが、現在のファイルがモジュールです。 代わりにインポートを追加することを検討してください。

後者はGitHubの上で次の2つの問題に関連すると思わ：

• Built-in support for UMD module definitions
• Consider allowing access to UMD globals from modules

実際に動作しますどのような方法がありますか？残念ながらアップグレードガイドは非常に曖昧です。

Answer 1

多くの試行錯誤の末、私は最終的には動作するような変形を見つけました。私はapp.module.tsに次の行を追加しました：

import { downgradeComponent } from '@angular/upgrade/static'; 

declare var angular: any; // <-- Added declaration 

angular.module('my-angularjs-app') 
    .directive(
    'my-ng2-component', 
    downgradeComponent({ component: AppComponent }) // <-- Note that there's no type conversion here anymore. 
);