I'm currently integrating an Angular 4 component into a large monolithic AngularJS application. The challenge I face lies in the restrictions of the AngularJS project's build system, which limits me to only modifying the project's index.html. This means that my only option is to include additional <script> tags to load my Angular code. My main concern now is how to access the global angular variable within my Angular project's TypeScript files so I can downgrade the Angular component and make it compatible with AngularJS. It's crucial for me to achieve this without adding the entire AngularJS library as a dependency to my Angular project since it's already bundled within the AngularJS project's JS files that are loaded by the index.html.
To provide more context on the issue at hand: I have followed the steps outlined in the upgrade guide to bootstrap the AngularJS app from Angular. Here's a snippet from the app.module.ts file of the Angular project:
// 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
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
// Bootstrap AngularJS app
this.upgrade.bootstrap(document.documentElement, ['my-angularjs-app']);
}
}
The configuration files src/main.ts and src/app/app.component.ts remain unchanged compared to a default $ ng new my-app project. Upon running $ ng build --prod to generate production-ready JavaScript files, I can then embed these files in the AngularJS project's index.html as described earlier. (It's worth noting that the Angular files are loaded after the AngularJS files.)
My goal now is to expose AppComponent to AngularJS. According to this section of the guide, I should add the following lines to the existing 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 TypeScript compiler throws errors due to the absence of the angular variable. I've attempted various solutions but none have been successful:
- Adding a line like
declare var angular: anyorlet angular = window.angularresulted in aCannot find namespace 'angular'error when including the downgrade code. - Including
@types/angularas a dependency and having a line such as
produced aimport * as angular from 'angular'
error when adding the downgrade code.Module not found: Error: Can't resolve 'angular' - Including a line
at the top of the file also led to issues./// <reference path="../../node_modules/@types/angular/index.d.ts" /> - Similarly, using
didn't resolve the problem either./// <reference types="angular" />
The errors resulting from options 3) and 4) were along the lines of:
'angular' refers to a UMD global, but the current file is a module. Consider adding an import instead.
These issues seem to be connected to discussions on GitHub regarding:
Is there a definitive solution to this problem? The upgrade guide lacks clarity on this specific matter.