这个报错是Angular模板编译器的规则导致的——它只允许原生的void元素（比如<img />、<br />）和foreign元素（比如SVG标签）使用自闭合写法，而<climate-clock>属于自定义Web Component，不在允许范围内。下面是一步步的解决方法：

1. 修复模板标签写法 #

把你HTML里的自闭合标签：

<climate-clock />

改成成对的闭合标签：

<climate-clock></climate-clock>

这一步就能直接解决当前的模板解析报错。

2. 配置Angular允许自定义元素 #

Angular默认会把未知标签当成Angular组件来解析，所以我们需要告诉它忽略对这个自定义Web Component的组件检查。在使用该组件的模块（比如AppModule）里添加CUSTOM_ELEMENTS_SCHEMA：

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],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 添加上这个配置
})
export class AppModule { }

3. 优化脚本加载顺序（可选但推荐） #

你原来用async加载两个脚本，可能会出现widget-v2.js先加载完成但flatten.js还没加载的情况，导致组件无法正常初始化。可以在组件的ngAfterViewInit钩子中动态按顺序加载脚本：

import { AfterViewInit, Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const loadScript = (src: string): Promise<void> => {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.async = false; // 取消async，保证加载顺序
        script.onload = () => resolve();
        script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
        document.body.appendChild(script);
      });
    };

    // 先加载flatten.js，再加载widget-v2.js
    loadScript('https://climateclock.world/flatten.js')
      .then(() => loadScript('https://climateclock.world/widget-v2.js'))
      .catch(err => console.error('Climate Clock脚本加载失败:', err));
  }
}

这样能确保依赖脚本按正确顺序加载，避免组件初始化失败的问题。

完成以上步骤后，你的Climate Clock Widget应该就能正常在Angular项目中显示了。

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