如何在Angular 18项目中使用Spline Viewer？报错解决及支持咨询

云原生阿岚

2026-6-18

在Angular中使用Spline Viewer的解决方案

当前Spline官方并未提供Angular原生的NgModule或独立组件支持，你需要通过Web Component的方式来集成Spline Viewer，具体步骤如下：

安装依赖
确保已安装Spline Viewer包：
```
npm install @splinetool/viewer
```

允许Angular识别自定义元素
如果是独立组件，在组件装饰器中添加CUSTOM_ELEMENTS_SCHEMA：

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-spline-wrapper',
  standalone: true,
  imports: [CommonModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<spline-viewer url="你的Spline场景URL"></spline-viewer>`,
})
export class SplineWrapperComponent {}

如果是NgModule项目，在对应模块的装饰器中添加CUSTOM_ELEMENTS_SCHEMA：

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

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent],
})
export class AppModule {}

导入Spline Viewer的Web Component定义
在项目入口文件（如main.ts）中导入Spline Viewer，让Angular能识别<spline-viewer>标签：

import '@splinetool/viewer';
// 其他启动代码
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);