blocks|key|99538|text|我认为你不应该在一个网站上使用2个angular。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|99539|解决方案可以是：|99540|99541|在Angular中构建整个站点。代码的其他部分可以添加到应用程序中。|unordered-list-item|99542|使用子模块，并将两个应用程序与父路由器合并。|99543|对每个角度组件使用iframe。则ngzone将不会冲突。|99544|99545|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|G|7|S|8|@]|9|@]|A|$]]|$1|J|3|K|5|G|7|T|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

I think you should not use 2 angular on one site.

Solutions can be:

<ul>
<li>Build the whole site in Angular. Other parts of the code can be added to the app.</li>
<li>Use submodules and merge the two app with a parent router. </li>
<li>Use iframe for each Angular component. Then ngzone will not collide.</li>
</ul>

blocks|key|99618|text|谷歌的聚合物可能就是你要找的，而不是angular：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|99619|https://www.polymer-project.org/|offset|length|99620|聚合物库提供了一组用于创建自定义图元的功能。这些功能旨在使定制元素更容易、更快地像标准DOM元素一样工作|99621|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|W|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

Google's Polymer may be what you're looking for instead of angular:

<a href="https://www.polymer-project.org/" rel="nofollow noreferrer">https://www.polymer-project.org/</a>

The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements

blocks|key|2629649|text|这是一个在angular+5%2B上完美工作的解决方案。对于angular+6，我还没有这样做。我已经为一个巨大的CMS项目做了这件事，我在几个页面中插入了组件，甚至在一个页面中插入了2个相同的角度模块。您可以使用一个angular项目。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2629650|在您的站点中，编写组件标记。|2629651|您需要创建另一个模块(例如mainHelper)来导出每个选定的角度标记。|2629652|import+{NgModule,+ApplicationRef,+ComponentFactoryResolver}+from+'@angular/core';
import+{FirstModule}+from+'YOUR+MODULE+PATH';
import+{FirstComponent}+from+'YOU+COMPONENT+PATH';
import+{SecondModule}+from+'YOUR+MODULE+PATH';
import+{SecondComponent}+from+'YOU+COMPONENT+PATH';


@NgModule({
++imports:+[
++++FirstModule,
++++SecondModule
++],
})

export+class+MainHelper+{
++constructor(private+resolver:+ComponentFactoryResolver)+{
++}
++components+=+[
FirstComponent,
SecondComponent
++];


++ngDoBootstrap(ref:+ApplicationRef)+{
++++this.components.forEach((component)+=>+{
++++++const+factory+=+this.resolver.resolveComponentFactory(component);
++++++const+elements+=+document.getElementsByTagName(factory.selector);+//get+angular+tags+on+your+main+website
++++++if+(elements.length+>+0)+{
++++++++if+(elements.length+>+1)+{
++++++++++const+selector+=+factory.selector;
++++++++++for+(let+i+=+0;+i+<+elements.length;+i%2B%2B)+{
++++++++++++elements[i].id+=+selector+%2B+'-'+%2B+i;
++++++++++++(<any>factory).factory.selector+=+'#'+%2B+elements[i].id;
++++++++++++ref.bootstrap((<any>factory).factory);
++++++++++++//+elements[i].id+=+'';
++++++++++}
++++++++++(<any>factory).factory.selector+=+selector;
++++++++}+else+{
++++++++++ref.bootstrap(component);
++++++++}
++++++}
++++});
++}
}|code-block|syntax|javascript|2629653|在您的main.ts中，您可以导入MainHelper模块并引导MainHelper。|2629654|你的FirstModule应该是这样的：|2629655|import+{NgModule}+from+'@angular/core';
import+{CommonModule}+from+'@angular/common';
import+{BrowserModule}+from+'@angular/platform-browser';+
import+{FirstComponent}+from+'./first.component';
import+{AnotherComponent}+from+'./another/another.component';
@NgModule({
++imports:+[
++++CommonModule,
++++BrowserModule,
++],
++providers:+[
++++SampleService+//+you+need+provide+your+services+for+all+the+modules
++],
++declarations:+[
++++FirstComponent,
++++AnotherComponent,
++],
++bootstrap:+[FirstComponent]+//+important
})
export+class+ECommerceModule+{
}|2629656|我希望这对你有帮助。|2629657|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|H|7|10|8|@]|9|@]|A|$I|J]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

This is a solution that works perfectly on angular 5+. for angular 6 i have not done this.
I have done this for a huge CMS project and I inserted components in several pages and even 2 same angular module in one page. You can use one angular project.

in your site, write component tags.

You need to create another module (for example mainHelper) to export each selected angular tags. 

<pre><code>import {NgModule, ApplicationRef, ComponentFactoryResolver} from '@angular/core';
import {FirstModule} from 'YOUR MODULE PATH';
import {FirstComponent} from 'YOU COMPONENT PATH';
import {SecondModule} from 'YOUR MODULE PATH';
import {SecondComponent} from 'YOU COMPONENT PATH';


@NgModule({
 imports: [
 FirstModule,
 SecondModule
 ],
})

export class MainHelper {
 constructor(private resolver: ComponentFactoryResolver) {
 }
 components = [
FirstComponent,
SecondComponent
 ];


 ngDoBootstrap(ref: ApplicationRef) {
 this.components.forEach((component) =&gt; {
 const factory = this.resolver.resolveComponentFactory(component);
 const elements = document.getElementsByTagName(factory.selector); //get angular tags on your main website
 if (elements.length &gt; 0) {
 if (elements.length &gt; 1) {
 const selector = factory.selector;
 for (let i = 0; i &lt; elements.length; i++) {
 elements[i].id = selector + '-' + i;
 (&lt;any&gt;factory).factory.selector = '#' + elements[i].id;
 ref.bootstrap((&lt;any&gt;factory).factory);
 // elements[i].id = '';
 }
 (&lt;any&gt;factory).factory.selector = selector;
 } else {
 ref.bootstrap(component);
 }
 }
 });
 }
}
</code></pre>

in your main.ts, you can import MainHelper module and bootstrap the MainHelper.

and your FirstModule would be something like this:

<pre><code>import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {BrowserModule} from '@angular/platform-browser'; 
import {FirstComponent} from './first.component';
import {AnotherComponent} from './another/another.component';
@NgModule({
 imports: [
 CommonModule,
 BrowserModule,
 ],
 providers: [
 SampleService // you need provide your services for all the modules
 ],
 declarations: [
 FirstComponent,
 AnotherComponent,
 ],
 bootstrap: [FirstComponent] // important
})
export class ECommerceModule {
}
</code></pre>

I hope this helps you.

blocks|key|99814|text|因此，我的想法是基于我们之前的讨论。因为使用元素创建的每个包都加载到zone.js中，所以会收到错误消息：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|99815|Uncaught+Error:+Zone+already+loaded.|code-block|syntax|javascript|99816|您可以而且应该考虑的是不要将'./dist/elementsApp/polyfills.js'连接到捆绑包中(对于您捆绑产生的每个元素)。相反，使用polyfill.js文件作为单独的导入到您的超文本标记语言中，并在导入任何和所有要导入的元素包之前导入它。|99817|entityMap^0|Y|7|0|0|E|X|22|B|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

So here's my thoughts based on our earlier discussion. Because each bundle you create with an element is loading in <code>zone.js</code> you're getting error messages:

<pre><code>Uncaught Error: Zone already loaded.
</code></pre>

What you can and should consider is NOT concatinating the <code>'./dist/elementsApp/polyfills.js'</code> into your bundle (for each element you bundle you produce). Instead use the <code>polyfill.js</code> file as a separate import into your HTML, and import it before any and all element bundles you're importing.

I'm trying to host independent angular elements that I can drop into a non-angular webpage. It's working great when I have just one.. but when I load two or more on the same page I get this error:

<blockquote>
 Uncaught Error: Zone already loaded.
</blockquote>

I'm using a build script to concatenate my dist files into one js file.. and then dropping that into my project

<pre><code>const fs = require('fs-extra')
const concat = require('concat')


const files = [
 './dist/elementsApp/runtime.js',
 './dist/elementsApp/polyfills.js',
 './dist/elementsApp/scripts.js',
 './dist/elementsApp/main.js',
]


fs.ensureDir('elements')
.then(() =&gt; {
 console.log('success!')
 concat(files, 'elements/include-me-somewhere-else.js')
})
.catch(err =&gt; {
 console.error(err)
})
</code></pre>

I can only have one of these js files on one page. I understand angular 7 will make this whole process easier but I'm wondering how I can accomplish this right now. 

I've also tried wrapping my exported js file in a self-executing function to try and limit scope.. Doesn't fix anything unfortunately.

Any ideas?

People seem confused about what angular elements are. For clarification you can watch this video <a href="https://www.youtube.com/watch?v=4u9_kdkvTsc" rel="noreferrer">https://www.youtube.com/watch?v=4u9_kdkvTsc</a>. the last few mins in particular show an angular element being exported and included on a non angular page. I'm trying to include multiple elements on the same page.

Angular 6 - Is it possible to use two angular element components on the same page?

路由器

路由

我正在尝试托管独立的angular元素，这些元素可以放入非angular的网页中。当我只有一个的时候，它工作得很好。但是当我在同一页上加载两个或更多时，我得到这个错误：未捕获错误:区域已加载。我正在使用一个构建脚本将dist文件连接到一个js文件中。然后把它放到我的项目中const fs = require('fs-e...

问Angular 6-是否可以在同一页面上使用两个angular元素组件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular 6-是否可以在同一页面上使用两个angular元素组件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular 6-是否可以在同一页面上使用两个angular元素组件？
EN