ionic-team/stencil-site

Docs: Missing import in Angular documentation for Stencil Config Setup

johanbove opened this issue · 1 comments

johanbove commented

When following the guidelines in the "angular.md" documentation page, my terminal returned the following error:

[04:10.9]  @stencil/core
[04:11.1]  v2.7.0 🌟

[ ERROR ]  ReferenceError: angularValueAccessorBindings is not defined at
           Object.<anonymous>

Code with the fault in it:

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

export const config: Config = {
  namespace: 'demo',
  outputTargets: [
    angularOutputTarget({
      componentCorePackage: 'component-library',
      directivesProxyFile: '../component-library-angular/src/directives/proxies.ts',
      valueAccessorConfigs: angularValueAccessorBindings,
    }),
    {
      type: 'dist',
    },
  ],
};

The correction I had to use was:

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

export const config: Config = {
  namespace: 'demo',
  outputTargets: [
    angularOutputTarget({
      componentCorePackage: 'component-library',
      directivesProxyFile: '../component-library-angular/src/directives/proxies.ts',
      valueAccessorConfigs: angularValueAccessorBindings,
    }),
    {
      type: 'dist',
    },
  ],
};

My package.json dependencies:

"dependencies": {
    "@stencil/core": "^2.7.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@stencil/angular-output-target": "^0.0.7",
    "@storybook/addon-actions": "^6.3.7",
    "@storybook/addon-docs": "^6.3.7",
    "@storybook/addon-essentials": "^6.3.7",
    "@storybook/addon-links": "^6.3.7",
    "@storybook/addon-notes": "^5.3.21",
    "@storybook/addon-viewport": "^6.3.7",
    "@storybook/html": "^6.3.7",
    "@storybook/theming": "^6.3.7",
    "@storybook/web-components": "^6.3.7",
    "@types/jest": "^26.0.24",
    "babel-loader": "^8.2.2",
    "case": "^1.6.3",
    "jest": "^26.6.3",
    "jest-cli": "^26.6.3",
    "npm-run-all": "^4.1.5",
    "puppeteer": "^10.0.0",
    "storybook": "^6.3.7",
    "workbox-build": "^4.3.1"
  },

After this the build process succeeded again.

$ npm run build

> basf-components-stencil@0.0.1 build
> stencil build --docs

[05:15.1]  @stencil/core
[05:15.3]  v2.7.0 🌟
[05:17.3]  build, my-comps, prod mode, started ...
[05:17.3]  transpile started ...
[05:19.9]  transpile finished in 2.64 s
[05:19.9]  copy started ...
[05:19.9]  generate custom elements bundle started ...
[05:19.9]  generate hydrate app started ...
[05:19.9]  generate lazy started ...
[05:20.6]  copy finished (0 files) in 667 ms
[05:20.8]  generate custom elements bundle finished in 862 ms
[05:21.2]  generate hydrate app finished in 1.26 s
[05:21.6]  generate lazy finished in 1.66 s
[05:21.6]  generating angular-library started ...
[05:21.6]  generate angular-library finished in 4 ms
[05:21.6]  build finished in 4.36 s

Versions:

node: v14.16.0
npm: 7.20.5
OS: MacOS 11.5.2 (20G95)