Ionic-framework: bug: Stencil component importing @ionic/core is breaking @ionic/angular application that has tabs.

[sanaadostmuhammad]

Bug Report

Ionic version:


[x] 4.11.2

Current behavior:
Breaking change (ion-tabs) - @ionic/core is fetching tabs list using the 'ion-tab' selector which does not exist in ionic/angular

Expected behavior:
On application load, the ionic/core tabs.entry.js file code is executed. The list of tabs is retrieved using the 'ion-tab' selector which is not part of ionic 4.

Steps to reproduce:

1. Clone repo
2. npm install
3. ionic serve

Open console to check the tabs exception being thrown by the tabs.entry.js file.

Stencil
@stencil/core: 1.7.3
Stencil component code

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.4 (C:\Users\Sanaa\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. Is this the same issue as https://github.com/ionic-team/ionic/issues/19690?

[sanaadostmuhammad]

Yes it is but I didn't know the exact cause at that time

[liamdebeasi]

Ok thanks. I am going to close the old issue and link these two issues together.

[jdnichollsc]

Hello guys, I'm having issues with other components like side menus when I try to use stencil components extending Ionic components, do you know why? can we have a meeting to investigate the cause of this?
Thanks in advance! 👍

[corysmc]

We're seeing this issue as well. Creating a component that is meant to be used inside an ionic app - so I was hoping to only include ionic components as dev dependencies. but it looks like it's being included in the build - which causes conflicts in the angular app.

[jdnichollsc]

I'm pending of this issue because I want to publish commercial components :)

[adrianfalleiro]

I think I've been able to find workarounds to this issue for both library authors and consumers.

For library consumers
You can exclude components from being bootstrapped at runtime by the stencil component loader by passing some additional params to the defineCustomElements() function as follows.

defineCustomElements(window, {
  exclude: ['ion-tabs', 'ion-tab'],
});

I've got a working version of the reference repo from @sanaadostmuhammad https://github.com/adrianfalleiro/stencil-ionic-angular

For library authors
It looks like there is a little documented config property named excludeUnusedDependencies. Enabling this excludes unused components chunks from being emitted and excludes them from being added to the lazy loader.

This is my stencil.config.js.

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

export const config: Config = {
  namespace: 'test',
  taskQueue: 'async',
  excludeUnusedDependencies: true,
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader'
    },
    {
      type: 'docs-readme'
    },
    {
      type: 'www',
      serviceWorker: null // disable service workers
    },
  ]
};

I'm not a library author, so can't 100% vouch for this, but you can see my example project. https://github.com/adrianfalleiro/stencil-exclude-unused-dependencies