The goal is to create a web components using angular and use it in an external html file.个
我创建了Web组件:‘my-web-Component’
(async () => {
const app: ApplicationRef = await createApplication(appConfig);
// Define Web Components
const MyComponent = createCustomElement(MyComponentComponent, { injector: app.injector });
customElements.define('my-web-component', MyComponent);
})();
我发球了(NG发球)，定制元素起作用了！ 因此，我构建我的项目时获得了3个文件:main.js、Polyfis.js和index.html(/dist). 我用Live Server测试了dist/index.html，但Custom元素仍然有效.
<!doctype html>
<html lang="en" data-critters-container>
<head>
<meta charset="utf-8">
<title>WebComponentClean</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles-5INURTSO.css"></head>
<body>
<my-web-component></my-web-component>
<script src="polyfills-RT5I6R6G.js" type="module"></script>
<script src="main-QVCUGX7F.js" type="module"></script>
<script src="prova.js"></script>
</body>
</html>
Now there is the problem个 我在这个项目中创建了第二个index2.html，但是在src文件夹之外，并且我测试了我的Web组件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/dist/web-component-clean/browser/styles-5INURTSO.css">
</head>
<body>
<my-web-component></my-web-component>
<script src="/dist/web-component-clean/browser/main-QVCUGX7F.js" type="module"></script>
<script src="/dist/web-component-clean/browser/polyfills-RT5I6R6G.js" type="module"></script>
<script src="/dist/web-component-clean/browser/prova.js"></script>
</body>
</html>
