3

I tried following tutorial to generate my first own custom component / web component in Angular: https://indepth.dev/posts/1116/angular-web-components-a-complete-guide It's from 2020, so it should be relatively up to date. I also tried other tuts, but it's always the same, the scripts.js and styles.js files are supposed to be put out after ng build..., but they are missing. I even tried it on a different laptop.

After doing all the steps in the tutorial I get following files as output:

$ 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

my files

According to the tutorial I should get following files:

 - 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

So I'm missing scripts.js and my styles.js is actually a styles.css file with ending .css.

I still tried to use it in a index.html file:

<!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>

But the page is blank when opened in browser and nothing is logged to the console.

I'm using following versions:

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)

EDIT: I was able to make it work without the scripts.js and styles.js files. The only way I found was replacing the path to the generated files in the index.html with the absolute path:

enter image description here

Result:

enter image description here

But I can't use the absolute paths, how do I get it working with relative paths?

Boommeister
  • 1,591
  • 2
  • 15
  • 54
  • Any solution on this? In my project also not generating `styles.js` file when build is generated – Pathik Vejani Mar 10 '22 at 09:16
  • 1
    I can't really remember anymore, but I think I solved it by following this tutorial and using the ngx-build-tool-plus that they present there: http://www1.angulararchitects.io.dedi1415.your-server.de/aktuelles/angular-elements-part-i/ – Boommeister Apr 04 '22 at 07:53
  • So I completely started a new custom element following the tutorial and then I just copied the logic code that I already had into it. – Boommeister Apr 04 '22 at 07:56

0 Answers0