- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
TL;博士 :我正在尝试使用 Angular Elements 作为 Angular 应用程序的插件。如果我用 --prod
构建元素它适用于 ng serve
在我的应用程序(开发设置)上,但是当我将它与 ng serve --prod
一起使用时它会无限重新加载在我的应用程序上或在 ng build --prod
之后我的应用程序(生产设置)。
但是,如果我构建元素添加 --optimization=false
,适用于我的高效应用程序,但不适用于我的开发设置。
问题是,我期待用 --prod
构建一个 Angular 元素这两种情况都可以。
问题 : 有办法解决吗?
现在,长读。
在工作中,我们试图在我们的 Angular 站点中使用可配置的插件,其中服务器是告诉哪个插件处于事件状态的。
我们尝试动态加载 Angular 模块,但这是一个完全不同的问题,我们把它搁置一旁。
所以,我们接下来想要尝试的是 Angular Elements,它有点工作,除非我们按照它应该的方式构建所有东西。
首先,我开始学习本教程 https://scotch.io/tutorials/build-a-reusable-component-with-angular-elements/amp并忽略了有关 okta
的所有信息因为我的功能有所不同。
创建:
我使用下一个命令创建了我的核心应用程序,这将是托管插件的应用程序:
ng new core --routing --skip-git --style scss --skip-tests --minimal
ng new plugin --skip-git --style scss --skip-tests --minimal
polyfills.ts
中评论了这一行,我在这个网站的某个地方读到它解决了
NgZone
的问题。已经加载,这是真的:
// import 'zone.js/dist/zone'; // Included with Angular CLI.
tsconfig.json
我改了
"target": "es5"
至
"target": "es2015"
为了解决 Angular 如何创建元素的问题。不太确定这是如何工作的,但是 stackoverflow 建议了它并且它成功了。
app.module.ts
从教程和其他一些我失去链接的想法中变成这样的东西:
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
],
providers: [
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
],
entryComponents: [
AppComponent,
],
})
export class AppModule {
constructor(private injector: Injector) {
const elem = createCustomElement(AppComponent, { injector: this.injector });
customElements.define('my-plugin', elem);
}
ngDoBootstrap() {
}
}
CUSTOM_ELEMENTS_SCHEMA
因为我在某处找到了它,但它没有解决它(而且,我不确定它是做什么的)。
app.component.ts
我这样做是为了在其模板中显示一些属性:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
public content: any = {
a: 10,
b: '20',
}
}
app.component.html
看起来像这样:
Some content:
<pre>{{content | json}}</pre>
package.json
文件我有三个脚本来构建所有:
{
"scripts": {
"build": "npm run build:opt && npm run build:noopt",
"build:opt": "ng build --prod --output-hashing none && node build-elements.js",
"build:noopt": "ng build --prod --output-hashing none --optimization=false && node build-elements.noopt.js"
}
}
build-elements.js
看起来像这样(
build-elements.noopt.js
与不同的目标名称相同):
'use strict';
const concat = require('concat');
const fs = require('fs-extra');
const path = require('path');
(async function build() {
const files = [
'./dist/plugin/runtime.js',
'./dist/plugin/polyfills.js',
'./dist/plugin/scripts.js',
'./dist/plugin/main.js',
];
const destinationDir = path.join(__dirname, '../core/src/assets');
await fs.ensureDir(destinationDir);
await concat(files, path.join(destinationDir, 'my-plugin.js'));
})();
embedded
的组件。和默认路由去它。
embedded.component.html
使用一些 Bootstrap 类变成这样的东西:
<div id="embedded-container" class="container border border-primary rounded mt-5 p-3" #container>
<pre>Loading...</pre>
</div>
embedded.component.ts
以这样的方式结束以显示实际的加载机制:
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { environment } from '../../environments/environment';
@Component({
selector: 'app-embedded',
templateUrl: './embedded.component.html',
})
export class EmbeddedComponent implements OnInit {
@ViewChild('container') public container: ElementRef;
constructor(protected activatedRoute: ActivatedRoute) {
}
ngOnInit() {
this.activatedRoute.queryParams.subscribe((params: Params) => {
const script = document.createElement('script');
if (params['how-it-should-be'] !== undefined) {
script.src = environment.production ? '/assets/my-plugin.js' : '/assets/my-plugin-no-optimization.js';
} else {
script.src = environment.production ? '/assets/my-plugin-no-optimization.js' : '/assets/my-plugin.js';
}
document.body.appendChild(script);
const div = document.createElement('div');
div.innerHTML = '<my-plugin></my-plugin>';
this.container.nativeElement.innerHTML = '';
this.container.nativeElement.appendChild(div);
});
}
}
ng serve
并浏览到
http://localhost:4200
,页面加载没有问题,注入(inject)插件,将新元素添加到 DOM 并显示来自我的插件的消息。
/assets/my-plugin.js
,专为生产而设计。除了调试之外,这不会成为问题。
ng serve --prod
(或为生产而构建)它也可以正常工作,但它会加载
/assets/my-plugin-no-optimization.js
,为“调试”而构建的。
http://localhost:4200/?how-it-should-be
,它会尝试加载
ng serve --prod
的优化插件和调试一个
ng serve
.请注意,这会让您无限重载,打开浏览器开发人员工具即可查看。
--optimization=false
的有点修复它,好吧,我试图调试这个问题(事实证明这是不可能的),突然它加载了。
最佳答案
我找到了解决方案!
事实证明,问题在于在同一上下文中运行多个 webpack 项目。我对这个问题的理解本质上是当你使用 webpack 构建项目时,它们会在运行时进行一些 webpack 引导,并依赖于全局上下文中定义的某个函数( webpackJsonp
)。当多个 webpack 配置尝试在同一个 DOM 上下文中执行此引导时,它会创建此处定义的症状。 (更详细的解释在这里找到 - https://github.com/angular/angular/issues/23732#issuecomment-388670907)
这个 GitHub 评论描述了一个解决方案,但没有描述操作方法 - https://github.com/angular/angular/issues/30028#issuecomment-489758172 .下面我将展示我是如何具体解决它的。
我们可以使用 webpack 配置为我们的 web 组件重命名 webpackJsonp,这样两个 Angular 项目(或任何使用 webpack 构建的项目)不会相互干扰。
解决方案
首先,我们安装 @angular-builders/custom-webpack 包,使我们能够在 Angular CLI 中修改内置的 webpack 配置。npm install --save-dev @angular-builders/custom-webpack
接下来,我们更新 angular.json 文件以使用我们的新构建器和名为 customWebpackConfig
的选项中的新属性值。 .这包括我们将要创建的新文件的路径和一个合并策略。此合并策略表示我们要将配置附加到 output
webpack 配置部分。
angular.json
...
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js",
"mergeStrategies": { "output": "append"}
},
...
extra-webpack.config.js
文件到包含 angular.json 的同一目录。该文件仅包含以下内容:
module.exports = {
output: {
jsonpFunction: '<webcomponent-prefix>-webpackJsonp'
}
}
jsonpFunction
的值默认为
webpackJsonp
,如果您将其更改为其他任何内容,则它会起作用。我决定保留函数名称,但为我的 Web 组件应用程序添加前缀。理论上你可以在同一个 DOM 上下文中运行 N 个 webpack 配置,只要每个配置都有唯一的
jsonpFunction
关于javascript - Angular 应用程序中的 Angular 元素在优化时会产生无限重新加载问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55398196/
比较代码: const char x = 'a'; std::cout > (0C310B0h) 00C3100B add esp,4 和 const i
您好,我正在使用 Matlab 优化求解器,但程序有问题。我收到此消息 fmincon 已停止,因为目标函数值小于目标函数限制的默认值,并且约束满足在约束容差的默认值范围内。我也收到以下消息。警告:矩
处理Visual Studio optimizations的问题为我节省了大量启动和使用它的时间 当我必须进行 J2EE 开发时,我很难回到 Eclipse。因此,我还想知道人们是否有任何提示或技巧可
情况如下:在我的 Excel 工作表中,有一列包含 1-name 形式的条目。考虑到数字也可以是两位数,我想删除这些数字。这本身不是问题,我让它工作了,只是性能太糟糕了。现在我的程序每个单元格输入大约
这样做有什么区别吗: $(".topHorzNavLink").click(function() { var theHoverContainer = $("#hoverContainer");
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: What is the cost of '$(this)'? 我经常在一些开发人员代码中看到$(this)引用同一个
我刚刚结束了一个大型开发项目。我们的时间紧迫,因此很多优化被“推迟”。既然我们已经达到了最后期限,我们将回去尝试优化事情。 我的问题是:优化 jQuery 网站时您要寻找的最重要的东西是什么。或者,我
所以我一直在用 JavaScript 编写游戏(不是网络游戏,而是使用 JavaScript 恰好是脚本语言的游戏引擎)。不幸的是,游戏引擎的 JavaScript 引擎是 SpiderMonkey
这是我在正在构建的页面中使用的 SQL 查询。它目前运行大约 8 秒并返回 12000 条记录,这是正确的,但我想知道您是否可以就如何使其更快提出可能的建议? SELECT DISTINCT Adve
如何优化这个? SELECT e.attr_id, e.sku, a.value FROM product_attr AS e, product_attr_text AS a WHERE e.attr
我正在使用这样的结构来测试是否按下了所需的键: def eventFilter(self, tableView, event): if event.type() == QtCore.QEven
我正在使用 JavaScript 从给定的球员列表中计算出羽毛球 double 比赛的所有组合。每个玩家都与其他人组队。 EG。如果我有以下球员a、b、c、d。它们的组合可以是: a & b V c
我似乎无法弄清楚如何让这个 JS 工作。 scroll function 起作用但不能隐藏。还有没有办法用更少的代码行来做到这一点?我希望 .down-arrow 在 50px 之后 fade out
我的问题是关于用于生产的高级优化级联样式表 (CSS) 文件。 多么最新和最完整(准备在实时元素中使用)的 css 优化器/最小化器,它们不仅提供删除空格和换行符,还提供高级功能,如删除过多的属性、合
我读过这个: 浏览器检索在 中请求的所有资源开始呈现 之前的 HTML 部分.如果您将请求放在 中section 而不是,那么页面呈现和下载资源可以并行发生。您应该从 移动尽可能多的资源请求。
我正在处理一些现有的 C++ 代码,这些代码看起来写得不好,而且调用频率很高。我想知道我是否应该花时间更改它,或者编译器是否已经在优化问题。 我正在使用 Visual Studio 2008。 这是一
我正在尝试使用 OpenGL 渲染 3 个四边形(1 个背景图,2 个 Sprite )。我有以下代码: void GLRenderer::onDrawObjects(long p_dt) {
我确实有以下声明: isEnabled = false; if(foo(arg) && isEnabled) { .... } public boolean foo(arg) { some re
(一)深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录。微软的SQL SERVER提供了两种索引:聚集索引(clustered index,也称聚类索引、簇集索引)和非聚集索引(no
一、写在前面 css的优化方案,之前没有提及,所以接下来进行总结一下。 二、具体优化方案 2.1、加载性能 1、css压缩:将写好的css进行打包,可以减少很多的体积。 2、css单一样式:在需要下边
我是一名优秀的程序员,十分优秀!