Question 302546 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – hybrid angularjs and angular17+ application

I am trying to run angularjs and angular17+ side by side in a hybrid setup. I followed all guidelines and created a custom webpack config to be able to pack my angularjs files and my angular files. The app seems to work but as soon as i am trying to load an angular component using the downgrade guideline at https://angular.io/guide/upgrade#using-angular-components-from-angularjs-code i get the following error:

> angular.js:13708 NullInjectorError: R3InjectorError(Ng2AppModule) 
[ComponentFactoryResolver$1 -> ComponentFactoryResolver$1]: 
NullInjectorError: No provider for ComponentFactoryResolver$1!
at NullInjector.get (core.mjs:5605:1)
at R3Injector.get (core.mjs:6048:1)
at R3Injector.get (core.mjs:6048:1)
at NgAdapterInjector.get (static.mjs:1209:1)
at doDowngrade (static.mjs:771:1)
at static.mjs:798:1
at SyncPromise.then (static.mjs:633:1)
at Object.link (static.mjs:798:1)
at angular.js:1240:1
at invokeLinkFn (angular.js:9814:1)

Seems like the dependency injection is not working properly? any ideas how to solve this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found out the issue:
    Downgrading the Angular 2+ components should be done in the Angular 2+ main.ts file and not in the AngularJs module.

    You should put all downgrades after bootstraping Angular 2+ and before bootstrapping your AngularJs module.

    Make also sure that the bundled js file of your angularjs code is put before the bundled Angular js file in your index.html.

    See the downgradecomponent part below: Example of your angular2+ main.ts:

    import '@angular/compiler';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Ng2AppModule } from './app/ng2.app.module';
import {UpgradeModule, downgradeInjectable, downgradeComponent} from '@angular/upgrade/static';
import angular from 'angular';
import {Angular2Component} from "./app/core/components/Angular2Component";

platformBrowserDynamic().bootstrapModule(Ng2AppModule).then(platformRef => {
 const upgrade = platformRef.injector.get(UpgradeModule);
 const appSettingsService = platformRef.injector.get(AppSettingsService);
 angular.module('angularjsMainModule').directive('angularJsDirective', downgradeComponent({component: Angular2Component}));

 upgrade.bootstrap(document.body, ['angularjsMainModule']); // Bootstrap AngularJS
 
}).catch(err => console.error(err));

  2. 0

    to work properly provide *ComponentFactoryResolver* inside app.config.ts

    import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration(), provideHttpClient()  // import here]
};

    focus on providers section

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search