Angular 6升级后出现Runtime compiler未加载错误求助

你遇到的问题是Angular版本升级后的典型场景——Angular 6及更高版本默认启用**AOT（提前编译）**模式，而你的HtmlOutlet指令依赖的JIT（即时编译）编译器在这种模式下不会被打包进应用，所以调用compileModuleAndAllComponentsAsync时会触发报错。

下面给你两种可行的解决方案：

方案1：启用JIT编译模式 #

如果你必须保留动态编译组件的逻辑，需要调整项目配置来启用JIT：

1. 修改项目构建配置
   打开angular.json，找到你的项目配置，在build和serve的options中修改以下参数：

   "projects": {
     "your-project-name": {
       "architect": {
         "build": {
           "options": {
             "aot": false,
             "buildOptimizer": false,
             // 其他原有配置...
           }
         },
         "serve": {
           "options": {
             "aot": false,
             // 其他原有配置...
           }
         }
       }
     }
   }
   

   • aot: false：关闭AOT编译，启用JIT模式
   • buildOptimizer: false：防止构建优化器移除JIT相关的核心代码

2. 确认启动代码使用JIT平台
   检查main.ts，确保使用platformBrowserDynamic（JIT专用的应用启动平台）：

   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { AppModule } from './app/app.module';
   
   platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));
   

   如果之前用的是platformBrowser，替换成上面的代码即可。

方案2：改用静态HTML插入（无需JIT） #

如果你的外部HTML只是静态内容（不包含Angular指令、组件或数据绑定），可以直接用DomSanitizer处理后插入DOM，这种方式不需要JIT，性能更好且包体积更小：

修改HtmlOutlet指令如下：

import { Directive, Input, ViewContainerRef, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Directive({ selector: 'html-outlet' })
export class HtmlOutlet implements OnInit {
  @Input() html: string;

  constructor(
    private vcRef: ViewContainerRef,
    private http: HttpClient,
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit() {
    if (!this.html) return;
    this.http.get(this.html, { responseType: 'text' }).subscribe(rawHtml => {
      const safeHtml = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
      // 清空容器并插入处理后的HTML
      this.vcRef.clear();
      const div = document.createElement('div');
      div.innerHTML = safeHtml as string;
      this.vcRef.element.nativeElement.appendChild(div);
    });
  }
}

这种方式不会编译Angular相关语法，但如果只是加载静态HTML页面，完全可以满足需求，还能避免JIT带来的包体积增大问题。

额外提示 #

• JIT编译模式会显著增加应用包大小，且首次加载速度变慢，建议只在开发环境使用，生产环境优先考虑方案2或其他预编译方案。
• 如果你的外部HTML包含Angular组件/指令，那必须使用方案1，因为只有JIT才能动态编译这些Angular代码。

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