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

Question

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:

Uncaught Error: Zone already loaded.

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

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(() => {   console.log('success!')   concat(files, 'elements/include-me-somewhere-else.js') }) .catch(err => {   console.error(err) }) 

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 https://www.youtube.com/watch?v=4u9_kdkvTsc. 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.

Answer 1

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

Solutions can be:

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