チュートリアルに従って、Angular で最初の独自のカスタム コンポーネント/Web コンポーネントを生成しようとしました: https://indepth.dev/posts/1116/angular-web-components-a-complete-guide
2020 年からなので、比較的アップしているはずです。現在まで。他のツッツも試してみたのですが、いつも同じで、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 内の生成されたファイルへのパスを絶対パスに置き換えることでした。
結果：
しかし、絶対パスを使用することはできません。相対パスで動作させるにはどうすればよいですか?