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.
from Angular 6 - Is it possible to use two angular element components on the same page?
No comments:
Post a Comment