我尝试按照教程在 Angular 中生成我自己的第一个自定义组件/Web 组件：https ://indepth.dev/posts/1116/angular-web-components-a-complete-guide
它是从 2020 年开始的，所以它应该相对起来迄今为止。我也尝试过其他的 tuts，但总是一样，scripts.js 和 styles.js文件应该在之后放出来ng build...，但是它们丢失了。我什至在另一台笔记本电脑上尝试过。
完成教程中的所有步骤后，我得到以下文件作为输出：
$ ng build FirstWebComponent
- Generating browser application bundles...
√ Browser application bundle generation complete.
- Copying assets...
√ Copying assets complete.
- Generating index html...
√ Index html generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 2.13 MB
polyfills.js | polyfills | 143.32 kB
main.js | main | 7.49 kB
runtime.js | runtime | 6.15 kB
styles.css | styles | 119 bytes
| Initial Total | 2.28 MB
根据教程，我应该得到以下文件：
- favicon.ico
- index.html
- main.js
- main.js.map
- polyfills.js
- polyfills.js.map
- runtime.js
- runtime.js.map
- scripts.js
- scripts.js.map
- styles.js
- styles.js.map
- vendor.js
- vendor.js.map
所以我缺少scripts.js，而我的styles.js 实际上是一个以.css 结尾的styles.css文件。
我仍然尝试在 index.html 文件中使用它：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="polyfills.js"></script>
<script src="vendor.js"></script>
<script src="runtime.js"></script>
<script src="styles.css"></script>
</head>
<body>
<ui-button></ui-button>
</body>
</html>
但是在浏览器中打开时页面是空白的，并且没有任何内容记录到控制台。
我正在使用以下版本：
Angular CLI: 11.2.11
Node: 14.15.4
OS: win32 x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1102.11 (cli-only)
@angular-devkit/core 11.2.11 (cli-only)
@angular-devkit/schematics 11.2.11 (cli-only)
@schematics/angular 11.2.11 (cli-only)
@schematics/update 0.1102.11 (cli-only)
编辑： 我能够在没有 scripts.js 和 styles.js 文件的情况下使其工作。我发现的唯一方法是将 index.html 中生成文件的路径替换为绝对路径：
结果：
但是我不能使用绝对路径，如何让它与相对路径一起使用？