Question

我正在开发一个庞大的单片AngularJS应用程序，并希望添加一个Angular（如Angular 4中）组件。不幸的是，AngularJS项目的构建系统基本上是固定的，我唯一能做的就是调整项目的index.html，例如，添加额外的<script>标签来加载我的Angular代码。我现在的问题是如何在我的Angular项目的TypeScript文件中访问AngularJS的全局angular变量来降级我的Angular组件并使其可以被AngularJS访问，没有将整个AngularJS库添加为依赖项到我的Angular项目，因为它已经捆绑在AngularJS项目的JS文件中index.html加载。

更详细地解释一下情况：我已经跟随upgrade guide从Angular引导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中，如上所述。（具体来说，Angular文件是 AngularJS文件后的加载器。）

现在我想向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变量显然不可用，TypeScript编译器抱怨这一点。我该如何改变？我尝试过以下几点无济于事：

添加一行declare var angular: any或一行let angular = window.angular。从上面添加降级代码时会产生Cannot find namespace 'angular'。

将@types/angular作为依赖项添加到我的Angular项目中，并添加一行import * as angular from 'angular'。（添加降级代码时会产生Module not found: Error: Can't resolve 'angular'。）

喜欢2）但在文件顶部添加一行/// <reference path="../../node_modules/@types/angular/index.d.ts" />

喜欢2）但在文件顶部添加一行/// <reference types="angular" />。

3）和4）导致以下错误消息：

'angular'是指UMD全局，但当前文件是一个模块。请考虑添加导入。

后者似乎与GitHub上的以下两个问题有关：

Built-in support for UMD module definitions

Consider allowing access to UMD globals from modules

有什么方法可以实际运作吗？不幸的是，升级指南对此非常模糊。

Answer 1

经过大量的反复试验，我终于找到了一个似乎有效的变体。我在atod添加了以下几行：

<CalendarDatePicker DateFormat="{}{day.integer(2)}-{month.abbreviated}-{year.full}" />

如何在Angular和TypeScript中访问AngularJS的全局`angular`变量？

1 个答案: