LitElement in Angular 8 - error TS1005: ';' expected. TS1128: Declaration or statement expected

Question

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