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

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

[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.

[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