0

i am trying to use a litElement Webcomponent inside an Angular 8 Webapplication. I think i followed all instructions correctly to integrate a webcomponent inside an Angular project as everything is fine in newer Webapps using Angular Version > 12 (even in standard html files i can include this webcomponent correctly).

A short extract of the Error message

ERROR in ../../node_modules/@lit/reactive-element/reactive-element.d.ts:12:13 - error TS1005: '=' expected.
12 import type { ReactiveController, ReactiveControllerHost } from './reactive-controller.js';
../../node_modules/@lit/reactive-element/reactive-element.d.ts:12:65 - error TS1005: ';' expected.
12 import type { ReactiveController, ReactiveControllerHost } from './reactive-controller.js';
../../node_modules/@lit/reactive-element/reactive-element.d.ts:14:1 - error TS1128: Declaration or statement expected.
14 export type { ReactiveController, ReactiveControllerHost, } from './reactive-controller.js';
../../node_modules/@lit/reactive-element/reactive-element.d.ts:14:13 - error TS1005: ';' expected.
468 export type { EventPart };
../../node_modules/lit-html/lit-html.d.ts:474:1 - error TS1128: Declaration or statement expected.
474 export type { ElementPart };
../../node_modules/lit-html/lit-html.d.ts:474:13 - error TS1005: ';' expected.
474 export type { ElementPart };

Some technical Infos

The webcomponent has been built with this

"source": "src/index.ts",
"types": "dist/index.d.ts",
"main": "dist/index.js",
"module": "dist/index.js",
"type": "module",
"dependencies": {
    "lit": "^2.2.0"
},
"devDependencies": {
    "typescript": "^4.6.2",
    ...
}

Nothing special in the Angular (8.2.0). The Webcomponent is written in Typescript and beside the use of @property and some css. I am using rollup to do the build.

// rollup.config.js
import {copy} from '@web/rollup-plugin-copy';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import image from '@rollup/plugin-image';

export default {
    plugins: [
        typescript(),
        nodeResolve(),
        image(),
        copy({
            patterns: ['assets/**/*'],
            rootDir: 'src'
        })
    ],
    input: 'src/index.ts',
    output: {
        file: 'dist/index.js',
        format: 'es'
    },
    preserveEntrySignatures: 'strict',
};

here is the code of the webcomponent

// sidebar.ts
@customElement("sidebar")
export class Sidebar extends LitElement {

    @property({type: String})
    activeAppCode: string = '';

    @property()
    apps: Application[] = [];

    constructor() {
        super();
    }

    render() {
        return html`<nav> ... </nav>
    `;
}

// tsconfig.json 
{
  "compilerOptions": {
    "outDir": "dist",
    "target": "es2017",
    "module": "es2020",
    "strict": true,
    "declaration": true,
    "experimentalDecorators": true,
    "esModuleInterop": false,
    "importHelpers": true,
    "useDefineForClassFields": false,
    "moduleResolution": "node",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "include": [
    "./src"
  ]
}

Currently i think that the Angular 8 typescript version is not compatible with the version used inside the lit Component. But i wonder if this should be a problem (from my understanding webcomponents should not cause errors like that because they should be more or less independent from the consumer application (?) - but unfortunately i am new on the webcomponent topic) Is there a way to make it work without updating the Angular Project to newer versions ?(probably i am using it the wrong way),

thx in advance

Icecraft
  • 1
  • 1
  • It looks like your compilation is tripping up on an import statement in your dependency which uses syntax introduced in Typescript 3.8, but your devDependency for TypeScript is higher and should have no problem. Are you sure you're compiling using the TypeScript version declared in your devDependency? – Zircon Apr 27 '22 at 13:41
  • thx for your answer. I believe that it is somehow related to the older typescript version of Angular8 (as the maximum is 3.5.3 something) and the import of Lit inside the webcomponent which uses a newer version (!?) Could be possible that i do the build wrong ? I thought that after the compilation of the webcomponent there should no dependency to the consumer application written in Angular ? I found a really hacky way to make it work ... if i use lit as devdependencies in the webcomponent and set the tsconfig option to "skipLibCheck": true, in the angular 8 app it works fine, – Icecraft Apr 29 '22 at 19:05
  • ...but feels wrong – Icecraft Apr 29 '22 at 19:11

0 Answers0