[Bug] [Angular] proxies.ts: Incorrect relative import path

[JoCa96]

Versions:

• @stencil/core 1.15.0
• @stencil/angular-output-target 0.0.3
• tslib 1.13.0
• @angular/core 9.1.11
• @angular/common 9.1.11
• typescript 3.8.3

Our stencil.config.ts looks like this:

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

export const config: Config = {
  namespace: 'schwarz-core-ui',
  globalScript: 'src/global/global.ts',
  globalStyle: './src/assets/index.global.less',
  outputTargets: [
  ...
    angularOutputTarget({
      componentCorePackage: '@my/lib',
      directivesProxyFile: '../my-lib-angular-bindings/src/directives/proxies.ts',
      directivesArrayFile: '../my-lib-angular-bindings/src/directives/array.ts',
      directivesUtilsFile: '../my-lib-angular-bindings/src/directives/utils.ts',
      valueAccessorConfigs,
    }),
  ],
};

The proxy.ts import path tries to import the component types from the incorrect relative path ../my-lib-repo/dist/types/components/. Instead it should just reference the package directly (via package name @my/lib) like in the first line of this proxy.ts snippet:

// my-lib-angular-bindings/src/directives/proxies.ts
...
import { Components } from '@my/lib' // <= Uses library here correctly
import { MyAccordion as IMyAccordion } from '../my-lib-repo/dist/types/components/my-accordion/my-accordion'; // <= refernces original repo incorrectly
export declare interface MyAccordion extends Components.MyAccordion {}
@ProxyCmp({inputs: ['accordionStyle', 'disabled', 'open', 'toggleClickArea']})
@Component({ selector: 'my-accordion', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['accordionStyle', 'disabled', 'open', 'toggleClickArea'], outputs: ['myaccordiontoggle'] })
...

[crohrer]

I had a similar issue, but in my case it was

import { Components } from '@my/components'
import { Tag as ITag } from '../@my/components/dist/types/components/tags/tag';

[MBlanquett]

Dear Ionic-Team, dear @jthoms1 ,

we are a big business group located in Europe and we highly appreciate the stencil-framework and your contribution to the community. We would like to take advantage of "stencil-ds-output-targets" and further integrate it in our companys it-infrastructure. So we would like to fix this bug by ourself. Are there any guidelines or further instructions on how to contribute to the "stencil-ds-output-targets"-project?

[ZuBB]

All of #86, #95, #96 have one thing in common: incorrect pathes.

We solved it with next trick

added a post build hook (postbuild command to scripts section) with next internals

npx replace-in-file --configFile=replace-config.js

and replace-config.js file with next content in same dir

module.exports = {
    files: '../bindings/vlab-core-components-angular/src/directives/proxies.ts',
    from: /@vlab\/vlab-core-components\/dist\/custom-elements\/components/g,
    to: '@vlab/vlab-core-components/dist/types/components',
};

of course you need that package installed and adjust pathes/names to your case