Angular 17中youtube-player无法运行，报NG0203: inject()错误

错误原因分析 #

NG0203错误核心是在非依赖注入上下文中调用了inject()函数，常见于Angular17默认的独立组件模式下，旧教程的模块式配置不兼容，或者组件依赖的包版本与Angular17不匹配。

具体解决步骤 #

1. 确保组件包与Angular17版本兼容 #

如果你使用官方的@angular/youtube-player包，先更新到与Angular17匹配的版本：

npm install @angular/youtube-player@17.x.x

2. 适配独立组件的导入配置 #

Angular17默认创建独立组件，需在组件的imports数组中显式导入YouTubePlayerModule：

import { Component } from '@angular/core';
import { YouTubePlayerModule } from '@angular/youtube-player';

@Component({
  selector: 'app-youtube-player',
  standalone: true,
  imports: [YouTubePlayerModule], // 必须添加该模块
  template: `
    <youtube-player
      videoId="替换为你的视频ID"
      width="640"
      height="360"
    ></youtube-player>
  `,
})
export class YoutubePlayerComponent {}

如果仍使用模块式组件，需在对应NgModule的imports数组中添加YouTubePlayerModule。

3. 确保YouTube API脚本正确加载 #

在index.html中确保脚本异步加载，避免DOM未就绪时初始化播放器：

<script src="https://www.youtube.com/iframe_api" async></script>

若仍存在加载时机问题，可在组件中手动等待API加载完成后初始化：

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

@Component({
  selector: 'app-youtube-player',
  standalone: true,
  template: `<div #playerContainer></div>`,
})
export class YoutubePlayerComponent implements AfterViewInit {
  @ViewChild('playerContainer') playerContainer!: ElementRef;

  ngAfterViewInit(): void {
    const checkAPIReady = setInterval(() => {
      if ((window as any).YT?.Player) {
        clearInterval(checkAPIReady);
        new (window as any).YT.Player(this.playerContainer.nativeElement, {
          videoId: '替换为你的视频ID',
          width: 640,
          height: 360,
        });
      }
    }, 100);
  }
}

4. 规避非注入上下文使用inject() #

如果自定义了播放器相关的工具类或服务，禁止在静态方法、普通函数中调用inject()，仅在组件/服务的构造函数、或Angular允许的注入上下文（如工厂提供者）中使用该函数。

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