问题描述
我尝试按照教程在 Angular 中生成我自己的第一个自定义组件/网络组件：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 并且我的 style.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 中生成文件的路径：
结果：
但是我不能使用绝对路径，我如何让它与相对路径一起工作？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）