2

在我更新了 angular13 组件中的 angularJS 控制器并尝试通过 angularJS + downgradeComponent 调用它后，页面上的标记不再显示，并且控制台中出现此类错误。有没有人遇到过类似的？我可以错误地连接和使用新组件吗？

错误日志

angular.js:15635 NullInjectorError: R3InjectorError(AppModule)[ComponentFactoryResolver$1 -> ComponentFactoryResolver$1 -> ComponentFactoryResolver$1]: 
  NullInjectorError: No provider for ComponentFactoryResolver$1!
    at NullInjector.get (vendor.js:101314)
    at R3Injector.get (vendor.js:101509)
    at R3Injector.get (vendor.js:101509)
    at R3Injector.get (vendor.js:101509)
    at NgAdapterInjector.get (vendor.js:133218)
    at doDowngrade (static.mjs:771)
    at eval (static.mjs:801)
    at SyncPromise.then (static.mjs:631)
    at Object.link (static.mjs:801)
    at angular.js:1391 '<text class="ng-scope">'

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    textComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    UpgradeModule,
    CommonModule,
  ],
  providers: [
    ...upgradedServices,
  ],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }

  public ngDoBootstrap(ref: ApplicationRef) {
    ref.bootstrap(AppComponent);

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

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver
  ){
  }
}

ajs-升级-providers.ts

export const upgradedServices = [

    {
        provide: 'routeProvider',
        deps: ['$injector'],
        useFactory(i){return i.get('routeProvider')},
    }
    {
        provide: '$rootscope',
        deps: ['$injector'],
        useFactory(i){return i.get('$rootscope')},
    },

    {
        provide: 'CurrentUser',
        deps: ['$injector'],
        useFactory(i){return i.get('CurrentUser')},
    },

    {
        provide: '$routeProvider',
        deps: ['$injector'],
        useFactory(i){return i.get('$routeProvider')}
    },

]

text.component.ts

@Component({
  selector: 'text',
  templateUrl: './text.component.html',
  styleUrls: ['./text.component.sass']
})
export class textComponent implements OnInit {
  isLoggedIn: boolean;
  termsOfUseUrl: any;
  termsOfUseText: any;

  constructor(
    //AJS upgraded services
    @Inject('routeProvider') public routeProvider: any,
    @Inject('$rootscope') public $rootscope: any,
    @Inject('CurrentUser') public CurrentUser: any,
    @Inject('$routeProvider') public $routeProvider: any,
    private componentFactoryResolver: ComponentFactoryResolver
  ) { 
  }

  ngOnInit(): void {
    this.isLoggedIn = this.CurrentUser.isAuthenticated()
    this.$rootscope.view.footer = !this.isLoggedIn
    this.$rootscope.view.isPublic = !this.isLoggedIn
  }

}

ajsModule.ts

angular.module('angularjsmodule', [
  'common.Route',
  'config',
  'ngRoute',
  'user.services.currentUser',
])
.directive('text', downgradeComponent({component: textComponent}) as angular.IDirectiveFactory)
.config(AngularJsModuleConfig);

AngularJsModuleConfig.$inject = ['$routeProvider', 'routeProvider'];
function AngularJsModuleConfig($routeProvider, routeProvider) {
  $routeProvider
  .when(routeProvider.bootstrapModule.text, {
    title: 'Text',
    template: '<text></text>',
    reloadOnSearch: false,
    controllerAs: 'view',
    options: {
      bypassAuth: true,
    },
  });
}
4

0 回答 0