标签: angular-elements

我被一个无法解决的问题困住了几个小时。我创建了一个组件并将其捆绑为一个 js 文件。我想将此js文件加载到另一个项目中。到目前为止，一切都很好。但是我创建了一个带有 @Input() 装饰器的组件。现在，当我在另一个项目的 html 中添加我的自定义组件并直接传递 @Input() 属性时，仍然一切正常。但我希望这个属性不直接在 html 文件中传递，我想将它绑定到这个组件中。说得够多了，让我们一步一步地看看我到目前为止所做的

已安装的库和依赖项

npm i @angular/elements @webcomponents/custom-elements fs-extra concat --save

导入的脚本

"scripts":
[
"node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"node_modules/@webcomponents/custom-elements/src/native-shim.js"
]

创建组件

打字稿文件

@Component({
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  @Input() subtitle: string;
}

html文件

<h1>Any Title<h1/>
<h4>{{subtitle}}</h4>

将组件注册在 AppModule.ts

export class AppModule {constructor(private injector: Injector) {  }

ngDoBootstrap() {
  const widgetName = createCustomElement(AppComponent, {injector: this.injector});
  customElements.define('widget-name', widgetName);
}

现在我可以在 index.html 中添加这个自定义组件，ng serve并且一切正常。

我有一个构建脚本，它将组件捆绑到一个 js 文件中。这对这段代码非常有效。这是我添加到另一个项目中的内容。

工作示例

<widget-name subtitle="Subtitle of this …

我一直在尝试使用 Angular Elements 并试图实现最佳的浏览器兼容性。但是我似乎遇到了死胡同，因为当我为 Shadow DOM 添加一个 IE polyfill 时，它破坏了 chrome 中的元素。

最初我遇到了错误“无法构建 HTML 元素”，因此我将 tsconfig.json 中的“目标”更改为 es2015/es6。

配置文件

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

成分

// @dynamic
@Component({
    selector: 'flexybox-cardmanagement',
    templateUrl: './card-management.component.html',
    styleUrls: ['./card-management.component.scss'],
    encapsulation: ViewEncapsulation.ShadowDom
})

更改目标碰巧破坏了 IE，因为不支持 es2015/es6+。所以我碰巧在@webcomponents 包中找到了 custom-elements-es5-adapter，它包装了 ES5，为需要它的浏览器提供必要的 ES6 功能。然后我还必须添加对自定义元素的支持。

polyfills.ts

/*****************************************************************************************
 * APPLICATION …

我正在使用微前端架构创建一个 UI 应用程序。我有三个应用程序：1.micro -app-a（用角度编写）2.micro -app-b（用角度编写）3.shell应用程序（用角度编写）

我的微应用程序-a有自己的角度路由器来管理路由，类似地，微应用程序-b也有自己的角度路由器，它们单独按预期工作，但当我将这两个微应用程序组合为一个时，我无法管理路由Web 组件（@angular/element）集成到单个 shell 应用程序中。我不知道如何管理路由。请有这方面知识的人帮助我。:)

当使用默认设置创建角度元素时，影子根处于打开状态。有谁知道是否可以创建具有封闭阴影根的角度元素？

尝试在 NX 工作区中构建一套角度元素（Web 组件）。

我首先尝试作为库，但无法“构建”。我作为应用程序重试 - 但我无法为其创建故事书，因为它不是一个库。

和平之路是什么？

我正在使用Angular Element （版本 13）构建一个 Web 组件，我有一个关于捆绑的问题。

是否可以以所有 js 包（main.js、runtime.js 和 polyfills.js）以及 /assets 文件夹中的 css 和 svg 图标都位于单个 js文件中的方式构建 Web 组件在最后？

我现在正在做的是 ng build --configuration element --output-hashing none && node build.js在 build.js 包含的地方运行：

const fs = require('fs-extra');
const concat = require('concat');

(async function build() {
  const files = [
    './dist/runtime.js',
    './dist/polyfills.js',
    './dist/main.js'
  ];

  await concat(files, './dist/webcomp-ecar-friendly-accommodations.min.js');
  await fs.remove('./dist/runtime.js')
  await fs.remove('./dist/polyfills.js')
  await fs.remove('./dist/main.js')
})();

有没有办法将 css 文件和 /assets 也捆绑在同一个 js 包中？我确实知道它是在其他应用程序中使用 Webpack 完成的，但我不确定如何使用 Angular CLI 来完成此操作。

任何意见将不胜感激！