混合AngularJS和Angular17+应用程序

nr7wwzry  于 6个月前  发布在  Angular
关注(0)|答案(2)|浏览(76)

我尝试在混合设置中并行运行angularjs和angular17+。我遵循了所有指南并创建了一个自定义webpack配置,以便能够打包我的angularjs文件和angular文件。应用程序似乎可以工作,但当我尝试使用https://angular.io/guide/upgrade#using-angular-components-from-angularjs-code上的降级指南加载angular组件时,我得到以下错误:

> 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)

字符串
依赖注入似乎不能正常工作?有什么想法可以解决这个问题吗?

zbdgwd5y

zbdgwd5y1#

要正常工作,请在 * app.config.ts * 中提供*ComponentFactoryResolver*

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]
};

字符串
关注供应商部分

iyfjxgzm

iyfjxgzm2#

我发现了问题:
降级Angular 2+组件应该在Angular 2+ main.ts文件中完成,而不是在AngularJs模块中。
您应该在引导Angular 2+之后和引导AngularJs模块之前放置所有降级。
还要确保angularjs代码的捆绑js文件放在index.html中捆绑的Angular js文件之前。
请参阅下面的降级组件部分:你的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));

字符串

相关问题