混合AngularJS/Angular 6应用模块依赖问题排查求助

看起来你遇到的这个问题是混合应用降级组件的典型坑，我来帮你拆解下可能的原因和解决方案：

1. 先看最核心的错误提示 #

错误No component factory found for NavBarDirective本质是Angular层面的问题：AngularJS尝试调用降级组件时，Angular侧还没准备好该组件的工厂实例。而你的LandingComponent（Angular降级的）能正常用NavBar，是因为它本身就是Angular组件，Angular内部模块依赖已经打通了，但AngularJS原生组件调用降级组件时，需要Angular的模块完全初始化才行。

2. 逐一排查可能的问题点 #

（1）确保降级组件已加入Angular模块的entryComponents

在Angular 6中，降级组件属于动态创建的组件，必须在所在模块的entryComponents中声明，Angular才会提前编译它的工厂：

// core.module.ts
@NgModule({
  declarations: [NavBarComponent],
  entryComponents: [NavBarComponent], // 这行不能少！
  exports: [NavBarComponent]
})
export class CoreModule {}

（2）必须用UpgradeModule正确启动混合应用

不要单独启动AngularJS，而是让Angular先初始化所有模块，再通过UpgradeModule启动AngularJS。这样Angular的组件工厂会在AngularJS渲染前就准备好：

// app.module.ts
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
  imports: [BrowserModule, CoreModule, UpgradeModule],
  declarations: [LandingComponent],
  entryComponents: [LandingComponent]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    // 这里启动你的根AngularJS模块
    this.upgrade.bootstrap(document.body, ['yourRootAngularJSModule'], { strictDi: true });
  }
}

（3）AngularJS模块必须正确依赖包含降级指令的模块

你的AngularJS workflows模块、landing模块（包括里面的<test>组件）都要显式依赖AngularJS的core模块，这样才能找到t-nav-bar指令：

// workflows.module.js
angular.module('workflows', ['core']);

// landing.module.js
angular.module('landing', ['core']);

（4）避免懒加载降级组件所在的Angular模块

如果你的CoreModule是通过loadChildren懒加载的，那AngularJS组件调用降级组件时，该模块还没被加载，自然找不到组件工厂。确保CoreModule是被AppModule直接导入的（非懒加载）。

3. 验证简化场景的关键点 #

针对你提到的“AngularJS的landing模块下的<test>组件无法使用<t-nav-bar>”，重点检查：

• AngularJS的landing模块是否确实依赖了core模块
• 应用是否通过UpgradeModule启动（而非单独启动AngularJS）
• CoreModule的entryComponents是否包含NavBarComponent

按照上面的步骤调整后，应该就能解决组件工厂找不到的问题了。

内容的提问来源于stack exchange，提问作者Jacob