Angular 项目不适用于 @babylonjs/viewer

Posted 2023-03-13

【中文标题】Angular 项目不适用于 @babylonjs/viewer

【英文标题】：Angular project does not work with @babylonjs/viewer

【发布时间】：2021-08-13 00:45:01

【问题描述】：

我在全球范围内安装了@Angular/Cli@11.0.0。我使用命令行“ng new BabylonTest --routing false --style css --skip-git --skip-tests”创建了一个Angular项目。 CD 到文件夹“BabylonTest”，然后我通过键入“npm install @babylonjs/viewer --save”安装了@babylonjs/viewer 4.2.0。在打字稿文件“app.component.ts”中，我通过添加“import * as BabylonViewer from '@babylonjs/viewer”行来导入@babylonjs/viewer。在模板文件'app.component.html'中，我删除了所有内容，只添加了一个html元素，如下所示'，然后当我通过输入'ng serve'进行编译时，它返回以下错误：

错误：src/app/app.component.html:4:1 - 错误 NG8001：'babylon' 不是已知元素：

如果 'babylon' 是一个 Angular 组件，则验证它是该模块的一部分。 要允许任何元素将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”。

4

src/app/app.component.ts:8:16
  8   templateUrl: './app.component.html',
                   ~~~~~~~~~~~~~~~~~~~~~~
  Error occurs in the template of component AppComponent.

I am not sure what was wrong with my codes, was I missing something? I was using this link:
https://www.npmjs.com/package/@babylonjs/viewer to get the usage of @babylonjs/viewer. 

【问题讨论】：

对不起，我错过了添加的html元素是：“"

【参考方案1】：

由于巴比伦查看器项目导出的是 Web 组件而不是 Angular 组件，因此您需要将自定义元素架构添加到您的 @NgModule 定义中，如下所示：

import  NgModule, CUSTOM_ELEMENTS_SCHEMA  from '@angular/core';

@NgModule(
  declarations: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // <= this line
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
)

【讨论】：

是的，它有效。此外，似乎需要将“NO_ERRORS_SCHEMA”添加到@NgModule 谢谢！

很高兴为您提供帮助。