I'm working on a big monolithic AngularJS application and want to add an Angular (as in Angular 4) component. Unfortunately, the AngularJS project's build system is largely fixed and the only thing I can do is adjust the project's index.html and, for instance, add additional <script> tags to load my Angular code. My question now is how I access AngularJS' global angular variable in my Angular project's TypeScript files to downgrade my Angular component and make it accessible to AngularJS, without adding the whole AngularJS library as a dependency to my Angular project since it's already bundled in the AngularJS project's JS files that the index.html loads.
To explain the situation a bit more in detail: I've followed the upgrade guide to bootstrap the AngularJS app from Angular, like so:
// 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']);
}
}
The files src/main.ts and src/app/app.component.ts are unchanged compared to a default $ ng new my-app project. Now, I run $ ng build --prod to produce production-ready JavaScript files that I can include in the AngularJS project's index.html as mentioned above. (Specifically, the Angular files are loader after the AngularJS files.)
Now I would like to make AppComponent available to AngularJS. This section of the guide suggests that I add the following lines to the above app.module.ts:
import { downgradeComponent } from '@angular/upgrade/static';
angular.module('my-angularjs-app')
.directive(
'my-ng2-component',
downgradeComponent({ component: AppComponent }) as angular.IDirectiveFactory
);
However, the angular variable obviously is not available and the TypeScript compiler complains about that. How do I change that? I've tried the following things to no avail:
- Add a line
declare var angular: anyor a linelet angular = window.angular. This results inCannot find namespace 'angular'when adding the downgrade code from above. - Add
@types/angularas a dependency to my Angular project and add a lineimport * as angular from 'angular'. (This results inModule not found: Error: Can't resolve 'angular'when adding the downgrade code.) - Like 2) but add a line
/// <reference path="../../node_modules/@types/angular/index.d.ts" />to the top of the file - Like 2) but add a line
/// <reference types="angular" />to the top of the file.
3) and 4) result in the following error message:
'angular' refers to a UMD global, but the current file is a module. Consider adding an import instead.
The latter seems to be related to the following two issues on GitHub:
Is there any way that actually works? The upgrade guide, unfortunately, is very vague when it comes to this.