如何在Angular和TypeScript中訪問AngularJS的全局`angular`變量？

Question

我正在研究一個龐大的整體式AngularJS應用程序，並且想要添加一個Angular（如在Angular 4中）組件。不幸的是，AngularJS項目的構建系統在很大程度上是固定的，我唯一能做的就是調整項目的index.html，例如，添加額外的<script>標籤來加載我的Angular代碼。現在我的問題是如何訪問AngularJS的全球angular變量在我的角度項目的打字稿文件降級我的角度成分，使其接觸到AngularJS，沒有增加整個AngularJS庫作爲一個依賴於我的角項目，因爲它是在已經捆綁AngularJS項目的加載的index.html的JS文件。

說明情況多一點詳細：我跟着upgrade guide從角引導的AngularJS應用程序，就像這樣：

// 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項目。現在，我運行$ ng build --prod來生成生產就緒的JavaScript文件，我可以在上面提到的AngularJS項目的index.html中包含這些文件。 （具體來說，AngularJS文件是之後的加載器。）

現在我想讓AppComponent可供AngularJS使用。 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到我的角項目，並添加一行import * as angular from 'angular'。 （這將在降級代碼時導致Module not found: Error: Can't resolve 'angular'。）
3. 贊2），但添加一行/// <reference path="../../node_modules/@types/angular/index.d.ts" />到文件
4. 像2的頂部），但添加一行/// <reference types="angular" />到該文件的頂部。

3）和4）導致以下錯誤消息：

'角' 指的是一個全球UMD，但目前的文件是一個模塊。 請考慮添加一個導入。

後者似乎涉及到以下兩個問題在GitHub上：

• 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. 
);