Entering Angular 1 Services in Angular 4

Question

Using the process described here , I am trying to introduce Angular 1 services into an Angular 4 application. The application loads in hybrid mode (and works because I have several Angular 4 components and services).

Whenever I try to enter an Angular 1 service, I get I can not read the "get" property from undefined .

upgraded-providers.ts:

import {LinksService} from "./+services/links/links"; export function linksServiceFactory(i: any) { return i.get('bfLinksService'); // <--- Errors here! } export const linksServiceProvider = { provide: LinksService, useFactory: linksServiceFactory, deps: ['$injector'] }; 

My Angular 4 service, which is trying to use LinksService, looks like this:

 @Injectable() export class EntityService { constructor ( private http: Http, private links: LinksService ) { } get(id: string): Observable<OrgDetails> { // Do something } } 

Finally, the LinksService (an Angular 1 service written in Typescript) looks like this:

 export class LinksService { static $inject = ["$log", "$location", PROPERTIES_SERVICE]; private contentHost : string; private thisAppHost : string; constructor (private $log : ng.ILogService, private $location : ng.ILocationService, private props : IPropertiesService) { this.init(); } // Service functions elided } 

Loading material and module:

 @NgModule({ imports: [ BrowserModule, HttpModule, UpgradeModule, ], declarations: [ AppComponent, OrgSummaryComponent, ], providers: [ EntityService, linksServiceProvider ], bootstrap: [ AppComponent, ], }) export class AppModule { ngDoBootstrap() { // Does nothing by design. // This is to facilitate "hybrid bootstrapping" } } platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.body, [AppModuleName], {strictDi: false}); }); 

Angular 1 (legacy) everything works fine.

It seems that Angular cannot find the $ injector, but shouldn't it be there independently?

Thanks so much for any suggestions, Jeff

Answer 1

Two days of my life I will not return, but ...

Just found this:

https://github.com/angular/angular.io/issues/3317

Basically the documentation is incorrect. By adding constrcutor to the application module with the call to upgrade.bootstrap, everything works.

  export class AppModule {

     constructor (upgrade: UpgradeModule) {
         upgrade.bootstrap (document.body, [AppModuleName], {strictDi: true});
     }

     // Does nothing by design.
     // This is to facilitate "hybrid bootstrapping"
     ngDoBootstrap () {}
 }

 platformBrowserDynamic (). bootstrapModule (AppModule);

Thanks to those who answered.

Answer 2

Actually the best way to create an instance of AngularJS is:

 platformBrowserDynamic().bootstrapModule(AppModule) .then(platformRef => { const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.body, ['app'], { strictDi: false }); }) .catch(err => console.log(err));