Angular引入外部JS后使用chart-controller提示未知元素如何解决

问题根因 #

Angular 默认只会识别内置HTML标签和项目内声明的Angular组件/指令，你用到的chart-controller是第三方Web Component，没有在Angular中注册也不属于原生标签，所以模板编译时会抛出「不是已知元素」的错误。

解决方案 #

步骤1：在模块中添加自定义元素支持 #

打开你声明AppComponent的app.module.ts文件，导入CUSTOM_ELEMENTS_SCHEMA并加入到模块的schemas配置中，代码示例：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  // 新增以下配置，允许Angular识别非Angular的自定义标签
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

步骤2：延迟Angular启动时机（可选但推荐） #

避免Web Component还没加载完成就渲染Angular模板，修改main.ts代码，等待Web Component加载完成后再启动Angular：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

// 监听Web Component加载完成事件再启动应用
document.addEventListener('WebComponentsReady', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

常见问题排查 #

• 打开浏览器控制台的网络标签，确认index.html中引入的webcomponents-loader.js和chart-controller.html资源加载正常，没有404、跨域错误
• 如果你使用的是Angular 11及以上版本，注意原生HTML Import特性已经被浏览器废弃，如果上述方案无效可以检查GIVE官方是否提供了ES模块格式的引入方式，替换旧的link rel="import"写法

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