标签: angular-elements
如何调试角度元素？
我使用angular元素构建了一个项目，并设法成功地将组件嵌入到另一个应用程序中。我现在想做的是能够从包含它的应用程序中调试原始组件。
该组件的所有逻辑都在一个文件中，该文件是Angular在构建期间创建的4个文件的串联-runtime.js，polyfills.js，scripts.js，main.js。
这四个文件的js.map文件也是在构建过程中创建的，我可以成功地在原始main.ts文件中放置并命中一个断点（将jsmaps与元素的输出文件一起包含在目录中之后）。但是，我一直找不到从使用它的应用程序中调试实际component.ts文件的方法。该js.map该组件还包括在集合，我可以查看通过Chrome的DevTools的component.ts文件，但如果我把所有的断点，他们将永远不会被击中。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { FormsModule } from "@angular/forms";
import { FirstWebElementComponent } from './first-web-element/first-web-element.component';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { ScenarioSelectorComponent } from './scenario-selector/scenario-selector.component';
@NgModule({
declarations: [
AppComponent,
ScenarioSelectorComponent
],
imports: [ …推荐指数
解决办法
查看次数
Zone.js检测到ZoneAwarePromise`（window | global）.Promise`已被自定义元素覆盖
我使用角度自定义元素功能（element.js）创建了一个小应用程序，将那个element.js文件导入到index.html中的另一个angular（parent）应用程序中，在开发服务器（ng serve）元素功能正常，但是在生产模式下（ng build --prod）在element.js文件中得到此错误。
@ angular / core“：”〜8.1.3“，@ angular / elements”：“ ^ 8.1.3”
element (angular custom element code)
polyfills.ts
import 'zone.js/dist/zone'; // Included with Angular CLI.
import "@webcomponents/custom-elements/src/native-shim";
import "@webcomponents/custom-elements/custom-elements.min";
app.module.ts
export class AppModule {
constructor(private injector: Injector) { }
ngDoBootstrap() {
const el = createCustomElement(NotificationElementComponent, {
injector: this.injector
});
// using built in the browser to create your own custome element name
customElements.define('test-card', el);
}
}
angular (parent app)
index.html
<!doctype html>
<html lang="en">
<body>
<app-root></app-root>
<script src="./assets/elements.js"></script>
</body> …推荐指数
解决办法
查看次数
Angular ng-if 指令破坏了使用 Angular 元素导出的 Web 组件
我会拼命寻求帮助来检查这是否是 Angular 问题、Angular 元素问题或我引起的问题。
介绍
在我们的客户项目中，我们借助 Angular 元素将组件导出为 Web 组件。在某些用例中，我面临着将一个 Web 组件堆叠在另一个 Web 组件内的问题。让我通过向您提供我推送到 github 的测试项目的片段来详细介绍：https://github.com/aetzlecx/angular-elements-stacking/（测试项目非常简化，仅演示问题并省略其他不必要的细节或项目相关细节）
旁注：我在 Angular 版本 10、11 和 12 上尝试过此操作；）。
父组件
父组件使用内容投影在 的帮助下包含子组件ng-content。按钮只需切换子内容：
<button (click)="triggerButtonClicked()">Toggle</button>
<p>Child content:</p>
<div *ngIf="childVisible">
<ng-content></ng-content>
</div>
export class ParentComponent {
childVisible = true;
triggerButtonClicked(): void {
this.childVisible = !this.childVisible;
}
}
在 Angular 应用程序内部，当我将一个元素堆叠到组件中时，它可以正常工作，没有任何问题，并且单击按钮会使子内容按预期切换。
子组件
然而，当我现在也将其他 Angular 组件导出为 Web 组件并将它们堆叠在父组件下时，我会遇到以下测试代码的困难。wc-child只是一个在无序列表 ( ul> li) 中显示给定项目的组件。然而，Web 组件的类型并不重要（简单组件与复杂组件）。
第一个用例：
<wc-parent>
<wc-child items="A,B,C"></wc-child>
</wc-parent>
这会导致 Web …
推荐指数
解决办法
查看次数
在 angular 项目中使用多个 angular 元素作为 web 组件
鉴于3个@angular项目全部使用v6.1.9： ，host，alpha和beta
alpha并beta使用 @angular/elements 创建和定义一个 web 组件，如下所示：
constructor(private injector: Injector) {}
ngDoBootstrap() {
const config: NgElementConfig = { injector: this.injector };
const component= createCustomElement(component, config);
customElements.define("alpha-component", component); // beta-component respectively
}
alpha并beta使用ng build --prod --output-hashing none构建，然后运行后构建脚本以按以下顺序连接生成的文件：scripts.js, styles.js, runtime.js, main.js。
polyfills.js 被跳过，因为main.ts在加载库时会检查所使用的 polyfills 是否已经定义（例如避免尝试重新定义 zone.js）。
得到的束是alpha-component.bundle.js和beta-component.bundle.js。
host引用了上述束<head>的index.html与<script defer>标签。
如果以alphathen的顺序引用包beta，我会看到 …
推荐指数
解决办法
查看次数
为什么角度元素会吞咽错误？
我在一个角度项目中拥有最简单的角度元素。我在属于角度元素的组件中抛出错误，如下所示：
仪表板tile.component.ts用户如<dashboard-tile a="100" b="50" c="25"></dashboard-tile>在index.html的
ngOnInit() {
throw "this is an error";
}
但是我看不到Chrome控制台出现错误。有人可以请教吗？
编辑：
测试：
- 我已经在chrome和firefox中对其进行了测试。两者均可重现。
- 如果我把上述像（具有正常成分组分
<app-dashboard-tile><app-dashboard-tile/>中app.component.ts），异常示于控制台
一张纸条：
这个问题与角度元素有关，而不与规则的角度投影有关。这很容易忽略。
如果您可以克隆项目并在本地运行，那就太好了。它不会花费超过2分钟。
推荐指数
解决办法
查看次数
Angular Elements EventEmmitter：$event 未显示发出的值
我在使用自定义 Angular 元素时卡住了，每当我发出一个值 ie trueor 时false，它element在同一个 angular 项目中使用时都能正常工作，每当我通过创建其捆绑JS文件在其他项目中使用该元素时。它显示Inputs events在父组件中。
这是我在父组件中的 Angular 元素
<app-address [model]="address" [isAddressValid]="isValid"
(getValidity)="getValue($event)" placeholder="placeholder" label="label" isRequired="false" ></app-address>
在父组件中，我正在访问类似的值
getValue(data) {
console.log(data)
}
而不是显示发出的数据 ietrue或false它的显示我inputs事件。
这就是我导入文件的方式
import '../../../Elements/angular-address-element/elements/app-address-element'
子组件
@Output() getValidity = new EventEmitter<any>();
this.getValidity.emit(true)
我emit在change活动中调用它。
推荐指数
解决办法
查看次数
将 Angular Web 组件 EventEmitter 监听到 javascript 中
在本文的帮助下，我使用包含@Input和 的angular 元素创建了一个小型 Web 组件@Output。
我能够将数据传递给@Input属性，但监听@Output事件让我发疯，因为我无法弄清楚如何从回调事件参数中读取数据。
//Emitting the boolean data
likeEvent() {
this.likeNotify.emit(true);
}
在纯 javascript 中，我正在听像这样的 likeNotify 事件：
const el = document.querySelector('facebook-card');
el.addEventListener('likeNotify', e => {
console.log(e.currentTarget.data); // Not working
});
那么如何从从发射器传递的 e 对象中检索真/假值？
javascript web-component angular angular-event-emitter angular-elements
推荐指数
解决办法
查看次数
@ angular/elements如何在休息呼叫结束时更新我的自定义元素？
所以我有这个简单的组件:
import {
Component,
ViewEncapsulation,
OnInit,
} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'custom-element',
template: '<div>{{ chuckText$ | async }}</div>',
styleUrls: ['./button.component.css'],
encapsulation: ViewEncapsulation.Native
})
export class ButtonComponent implements OnInit {
public chuckText$ = new BehaviorSubject<string>('');
public constructor(
private http: HttpClient
) {
this.chuckText$.next('Default Text');
}
ngOnInit() {
// nothing too fancy, just for testing purpose
this.http.get('https://api.chucknorris.io/jokes/random')
.subscribe((data: any) => {
console.log(data.value);
this.chuckText$.next(data.value);
});
}
}
构建我的组件并将其添加到一个简单的angularJS应用程序后,(我需要将一个自定义元素添加到旧应用程序)我在控制台中使用默认文本和http.get结果获取我的元素,但我的组件尚未被更新,如图所示.
我显然遗漏了一些对我来说不太明显的事情.有关为什么内容不更新的任何想法？作为提醒,这个功能已经发布,但处于实验状态,也许就是这样.
作为参考,这是我的app.module.ts:
import …推荐指数
解决办法
查看次数
Angular 元素 - 未捕获的类型错误：无法构建“HTMLElement”
我一直在尝试让 Angular 元素组件工作，因为我正在考虑在即将到来的项目中使用它们。
我遵循了许多教程（都非常相似），但无法让它们工作。教程之一是this one。
我有以下用于 Elements 项目的 package.json
{
"name": "angular-webcomponents-demo",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:elements": "ng build --prod --output-hashing none && node build-script.js"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/elements": "^7.2.15",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26",
"document-register-element": "^1.7.2"
},
"devDependencies": { …推荐指数
解决办法
查看次数
单页中使用 Angular 元素开发的多个自定义元素
我在不同的 Angular 元素项目中开发了 2 个自定义元素，当我尝试在单个 html 中使用它们时，出现错误“无法在‘CustomElementRegistry’上执行‘定义’：此名称已与此注册表一起使用”如何关注此链接开发https://medium.freecodecamp.org/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a
我知道它与加载两次打包在两个自定义元素中的库有关。如何解决这个问题？
谢谢
推荐指数
解决办法
查看次数
标签 统计
angular ×10
angular-elements ×10
javascript ×2
angular6 ×1
angular8 ×1
typescript ×1
zone.js ×1