1

我正在玩自定义网络元素。目前，当我使用 NPM 时，我遇到了用角度显示自定义元素的问题。结果我没有任何错误，只有白屏。

当我手动尝试 customElement 时，它工作正常。只需将 TS 代码放在 Angular 项目 self 中，它就可以正常工作了。（当我使用 LitElement 框架尝试它时，我得到了相同的体验）。

有人可以帮助我并告诉我我缺少什么吗？

我使用一个空的角度项目进行测试。

向模块添加了 CUSTOM_ELEMENTS_SCHEMA。使用元素 ( ) 向文件添加了导入 import '@kireapp/viewer-test/src/hello-world-element';在模板文件中添加了自定义标签 ()

NPM 项目（基于网站https://www.thisdot.co/blog/how-to-setup-a-typescript-project-using-rollup-js）：

./src/hello-world-element.ts

class HelloWorldElement extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `<h1>Hello World.</h1>`
    }
}
customElements.define('hello-world', HelloWorldElement);

汇总配置

import merge from 'deepmerge';
import {createBasicConfig} from "@open-wc/building-rollup";

const baseConfig = createBasicConfig();

export default merge(baseConfig, {
  input: './out-tsc/src/hello-world-element.js',
  output: {
    dir: 'dist'
  }
});

tsconfig

{
  "compilerOptions": {
    "target": "es2018",                          
    "module": "esnext",
    "moduleResolution": "node",                     
    "noEmitOnError": true,
    "lib": ["es2017", "dom"],                            
    "strict": true,  
    "esModuleInterop": false,                 
    "outDir": "out-tsc",
    "rootDir": "./",
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  }
  ,
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

npm 在 Angular 项目中发布我使用 npm install @kireapp/viewer-test

当我将类更改为在 hello-world-element.ts 中导出并结合模板字符串使用 import {object} 时，结果是相同的。

4

0 回答 0