Angular 8 Dependency Injection Without TypeScript?

Question

I'm currently following tutorials for migrating an AngularJS (1.5.x) app to an AngularJS / Angular 8 hybrid. It's been decided that we will not use TypeScript just yet, and will stick to JavaScript transpiling with Babel. I can't seem to find anything about dependency injection in Angular without TypeScript.

app.module.js

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import AppComponent from './app.component';
import angularJsModule from '../app/scripts/app';

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ]
})

export default class AppModule {
    constructor(upgrade) {
        console.log('angular 8 plz?');
    }

    ngDoBootstrap() {
        this.upgrade.bootstrap(document.body, [angularJsModule.name], { strictDi: true });
    }
}

Upon running the application, I receive Uncaught Error: Can't resolve all parameters for AppModule: (?).

I assume this is because the UpgradeModule isn't being injected because of the lack of TypeScript? https://angular.io/guide/dependency-injection#dependency-injection-tokens

I've tried setting this.upgrade = upgrade inside the constructor, but this is never reached because Angular doesn't know what upgrade is.

Is there a way to inject UpgradeModule without TypeScript?

Or is the error I'm encountering because of something different?

`...not use TypeScript just yet` ← What? Why? You can use typescript for your "new" angular code without having to rewrite your angularjs code. It does not have to be all or none. — Igor, Oct 16 '19 at 15:19
All JS code is valid TypeScript code. TypeScript is only a JS superset, what you mean by not use typescript ? Angular is a framework, not a lib, it requires TS (or Dart if you use AngularDart). Why are you trying to inject a module into `AppModule` ? — Florian, Oct 16 '19 at 15:29

score 1 · Accepted Answer · answered Oct 16 '19 at 15:24

1

You have to use Inject

Import:

import { NgModule, Inject } from '@angular/core';

Changed constructor:

constructor(@Inject(UpgradeModule) upgrade) {
  this.upgrade = upgrade;
}

answered Oct 16 '19 at 15:24

Igor

60,821
10
100
175

You can inject a module into AppModule ?! – Florian Oct 16 '19 at 15:27
@Florian - yup. See also https://angular.io/guide/upgrade#bootstrapping-hybrid-applications, code section for `app.module.ts` – Igor Oct 16 '19 at 15:45
@Igor Thank you. Sorry for the delay, was running into Babel issues with the decorator as a function parameter. Needed to add `babel-plugin-parameter-decorator`. – KyTrol Oct 16 '19 at 19:44

Angular 8 Dependency Injection Without TypeScript?

1 Answers1