Stencil: Angular output taget doesn't contain anything, component not found

[GeofoxCoding]

Hi, I've tried to follow the online resources I've found to get a minimalistic nx Angular example working with a stencil web component. But the official nxext doumentation only lists commands but not how they are intended to use in a simple scenario.

To Reproduce I have latest nx angular workspace with an Angular app and a builable Angular library containing a single Angular component which is used in app.component.

Now I create a new stencil library nx g @nxext/stencil:lib web-components --tags='ui' --style='scss'

I make it buildable with choosing scss: nx g @nxext/stencil:make-lib-buildable web-components --importPath='@hwrm/web-components'

I add angular ouput targets: nx g @nxext/stencil:add-outputtarget web-components --outputType='angular'

Now I have two new folders below libs: web-components (contains one prebuilt component ) web-components-angular

tsconfig.base.json looks as follows: "paths": { "@hwrm/example-form": ["libs/fis-hwrm/example-form/src/index.ts"], "@hwrm/material": ["libs/shared/material-design/src/index.ts"], "@hwrm/root": ["libs/fis-hwrm/root/src/index.ts"], "@hwrm/web-components": ["dist/libs/web-components"], "@hwrm/web-components/loader": ["dist/libs/web-components/loader"], "@nx-hwrm/web-components": ["libs/web-components/src/index.ts"], "@nx-hwrm/web-components-angular": [ "libs/web-components-angular/src/index.ts" ]

I'm importing the angular module into my consuming angular module: import { WebComponentsAngularModule } from '@nx-hwrm/web-components-angular'; imports: [..., WebComponentsAngularModule]

Expected behavior Now I think inside of an component in my consuming Angular module I can do: <my-component first="Stencil" last="'Don't call me a framework' JS">

But the component is not recognized and doesn't get rendered.

Additional I also have to mention that the generated WebComponentsAngularModule doesn't contain any angular components. Also I'm not sure if this is what I want to achieve. Inside Nx I want my stencil project to compile and to create plain web components. These components I want to consume in my Nx angular libraries and apps. I don't want to wrap them for or witn angular, otherwise I could use Angular Elements right away, or not?

[DominikPieper]

Hey @GeofoxCoding,

how did your stencil.config.ts look like? There should be a 'generated' folder in your angular lib with a proxies.ts file containing the angular proxies

[GeofoxCoding]

Hello @DominikPieper,

unfortunately no. First my generated stencil config file:

import { Config } from '@stencil/core';

import { sass } from '@stencil/sass';

const angularValueAccessorBindings: ValueAccessorConfig[] = [];

import {
  angularOutputTarget,
  ValueAccessorConfig,
} from '@stencil/angular-output-target';

export const config: Config = {
  namespace: 'web-components',
  taskQueue: 'async',
  plugins: [sass()],
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
      dir: '../../dist/libs/web-components/dist',
    },
    {
      type: 'www',
      dir: '../../dist/libs/web-components/www',
      serviceWorker: null, // disable service workers
    },

    angularOutputTarget({
      componentCorePackage: '@nx-hwrm/web-components',
      directivesProxyFile:
        '../../../libs/web-components-angular/src/generated/directives/proxies.ts',
      valueAccessorConfigs: angularValueAccessorBindings,
    }),
  ],
};

My stencil library "web-components" content is the following:

The generated folder is missing in the auto generated angular target lib "web-components-angular" although the stencil lib has the dummy web component inside.

Are my commands okay or could you please provide a few test commands which I can follow to see if the results are the same?

I'm using @nxext/stencil 13.1 with nx workspace 13.3.1. Could this be a problem? Should I downgrade?

[DominikPieper]

@GeofoxCoding I agree with the relative path. Probably I have to take a look at the path generation here again, but it should be correct. It should generate the proxies file into 'libs/web-components-angular/src/generated/directives/'.

The Version is right. Cause there's no better way to match it, the major version have to match So Nx 12 -> Nxext 12, Nx 13 -> Nxext 13, and so on.

Did you added the loader fo the Angular app? Could you try to add: import { defineCustomElements } from '@nx-hwrm/web-components/loader'; to the main.ts of the Angular application. Like here: https://github.com/nxext/nxext-demo/blob/main/apps/angular-client/src/main.ts

Did that help?

[GeofoxCoding]

Hi @DominikPieper,

I did it once again a few seconds ago. Still the same, both libs are generated but inside the -angular lib I don't get a "generated" folder.

I will add the loader. What is the purpose of this loader import?

Thank you so much for your effort! Great work!

[DominikPieper]

The Loader is generated by Stencil and is something like a startup script for the components. To register them and make them known to the browser.

Are you on Windows or Mac?

Danke und immer gern.

[GeofoxCoding]

I'm on a Windows Server 2019 virtual machine.

[DominikPieper]

I'll add some e2e tests later to see what my windows worker node says. Unfortunately, I don't have any windows machines here to test

[pranav-js]

Hi @DominikPieper,

I did it once again a few seconds ago. Still the same, both libs are generated but inside the -angular lib I don't get a "generated" folder.

I will add the loader. What is the purpose of this loader import?

Thank you so much for your effort! Great work!

for me it is working fine with latest version. purpose of loader is to defineCustomElement for browser to know incoming tag is web component, very much similarly to what react loader does

[CptnAngular]

Hi @DominikPieper,

for me it's still the same under nrwl/cli 13.4.4 and nxext/stencil 13.1.2. I don't get a generated folder. Could you pls list the most basic cli commands to create an nx angular workspace with stencil component. I would like to reproduce your workflow on my windows system to make sure I'm not doing something wrong.

@pranav-js The problem for me is that I don't get generated folder and proxies so my angular app doesn't even get custom elements to load and therefore the loader itself won't make a difference.

[pranav-js]

@CptnAngular you must be missing some path configuration. I wrote a very detailed step by step blog for angular integration. check if you missed anything or compare your nx config setup.

https://pranavsarda.hashnode.dev/stenciljs-with-angular-app-directly

PS: I used vscode nxconsole directly to generate , worked fine for me

[CptnAngular]

@pranav-js I've read your blog twice and it seems to be working for stencils native angular integration. You are manualy briding between two projects, manually generating folders etc.

But my question is about nx and nx stencil extension and its generators. The generators should do that stuff out of the box and update project references inside the workspace.

So it would be extremely helpful to have a simple step by step example going from: npx create-nx-workspace --preset=angular

[pranav-js]

@CptnAngular show your stencil.config.ts

[DominikPieper]

@CptnAngular can you show your stencil.config.ts?

[pranav-js]

I didn't check commands really. used Nx Console UI directly

[DominikPieper]

I try to break this problem down, seems like a windows problem. I added some e2e tests for that and was able to see it. Now I take a look at how to take this down.

[pranav-js]

makes sense. I am using mac lol

[DominikPieper]

@pranav-js same here. That's why I struggle to break it down. No windows at all ^^' Could be a path problem maybe. Had a lot of path issues with windows and stencil ^

[CptnAngular]

It's working for me now but give me some time to figure out what exactly I was missing.

[CptnAngular]

It was simply a problem with the order of my commands (and no matter if via nx gui or cli !).

Inside fresh Angular workspace I did:

1. Create stencil lib
2. Make lib buildable
3. Do build => this way I don't get generated folder
4. Add Angular output-targets

But it had to be:

1. Create stencil lib
2. Make lib buildable
3. Add Angular output-targets
4. Do build

Now I understand that I first need output-target and angular module to create the generated folder. Somehow I expected the add-output-targets generator to create the generated folder but its part of stencils own mechanisms to generate AND create angular output.

Now it's more clear to me. Thank you!

[DominikPieper]

@CptnAngular yes that makes sense. The add-outputtarget generator just adds the configuration into the stencil config and prepares the target library with angular/react. The generation itself is a Stencil mechanism. :-)