我是 Angular 的新手，这是我的第一个项目，所以也许这个过程是显而易见的。我按照Shoelace Angular Integration中概述的步骤进行操作，但无法运行它。我注意到 npmjs.com 上也有一个可用的软件包，但我不想依赖它，因为它似乎可能被放弃并且适用于 v14。
如何使用我按照教程创建的 AppModule？ 我也读过类似的问题，但我无法解决它。
我尝试将
schemas: [CUSTOM_ELEMENTS_SCHEMA]如何导入它而不陷入依赖地狱？
这是我得到的：
X [ERROR] NG8001: 'app-drawer-example' is not a known element:
1. If 'app-drawer-example' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'app-drawer-example' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]
src/app/app.component.html:5:0:
5 │ <app-drawer-example></app-drawer-example>
╵ ~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
src/app/app.component.ts:11:15:
11 │ templateUrl: './app.component.html',
╵ ~~~~~~~~~~~~~~~~~~~~~~
X [ERROR] NG8001: 'sl-drawer' is not a known element:
1. If 'sl-drawer' is an Angular component, then verify that it is part of this module.
2. If 'sl-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]
src/app/app.component.ts:21:79:
21 │ ...r</button><sl-drawer #drawer label="Drawer" class="drawer-focus...
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
这是 stackblitz 上的一个工作示例，不是我写的，请注意它仅适用于
2.3.0CUSTOM_ELEMENTS_SCHEMAmain.ts
import 'zone.js';
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import '@shoelace-style/shoelace/dist/shoelace.js';
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<div>
<sl-tree selection="multiple">
<sl-tree-item expanded [selected]="treeItem.selected" (click)="treeItem.selected = true">
<sl-icon [name]="treeItem.iconId"></sl-icon>
{{treeItem.label}}
<sl-button size="small" (click)="onAddToContainer(treeItem, $event)">
<sl-icon name="plus"></sl-icon> button
</sl-button>
<sl-tree-item>test</sl-tree-item>
</sl-tree-item>
</sl-tree>
</div>
`,
})
export class App {
name = 'Angular';
treeItem = {
selected: false,
label: 'test',
iconId: 'github',
};
onAddToContainer(treeItem, e) {
e.stopPropagation();
alert(treeItem);
}
}
bootstrapApplication(App);
index.html
<html>
<head>
<title>My app</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css"
/>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>