angular_framework_steps.sh

#!/bin/bash

set -euxo pipefail

# npm install --global lerna

lerna init

npm install

npm install typescript @types/node --save-dev

# In the packages/ directory, run the following commands to generate a Stencil
# component library:

cd packages

npm init stencil components stencil-library

cd stencil-library

npm install

cd ..

npx -p @angular/cli ng new angular-workspace --no-create-application

cd angular-workspace

npx -p @angular/cli ng generate library component-library

# delete unnecessary files
rm projects/component-library/src/lib/component-library.component.ts

rm projects/component-library/src/lib/component-library.service.ts

rm projects/component-library/src/lib/component-library.*.spec.ts

cd ../..

lerna add stencil-library --scope angular-workspace

cd packages/stencil-library

npm install @stencil/angular-output-target --save-dev

cat << EOF > stencil.config.ts
import { angularOutputTarget } from '@stencil/angular-output-target';

export const config: Config = {
  namespace: 'stencil-library',
  outputTargets: [
    // By default, the generated proxy components will
    // leverage the output from the \`dist\` target, so we
    // need to explicitly define that output alongside the
    // Angular target
    {
      type: 'dist',
    },
    angularOutputTarget({
      componentCorePackage: 'stencil-library',
      directivesProxyFile: '../angular-workspace/projects/component-library/src/lib/stencil-generated/components.ts',
      directivesArrayFile: '../angular-workspace/projects/component-library/src/lib/stencil-generated/index.ts',
    }),
  ],
};
EOF

npm run build