Angular 6-是否可以在同一页面上使用两个angular元素组件？
我正在尝试托管独立的angular元素，这些元素可以放入非angular的网页中。当我只有一个的时候，它工作得很好。但是当我在同一页上加载两个或更多时，我得到这个错误：
未捕获错误:区域已加载。
我正在使用一个构建脚本将dist文件连接到一个js文件中。然后把它放到我的项目中
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)
})我在一个页面上只能有一个这样的js文件。我知道angular 7会让整个过程变得更容易，但我想知道我现在如何才能做到这一点。
我还尝试将导出的js文件包装在一个自动执行的函数中，以尝试限制作用域。不幸的是并不能解决任何问题。
有什么想法吗？
人们似乎对角元素是什么感到困惑。为了澄清这一点，你可以观看这段视频https://www.youtube.com/watch?v=4u9_kdkvTsc。最后几分钟特别显示了导出并包含在非angular页面上的angular元素。我正在尝试在同一页上包含多个元素。
回答 4
Stack Overflow用户
发布于 2018-05-21 17:32:29
我认为你不应该在一个网站上使用2个angular。
解决方案可以是：
- 在Angular中构建整个站点。代码的其他部分可以添加到应用程序中。
- 使用子模块，并将两个应用程序与父路由器合并。
- 对每个角度组件使用iframe。则ngzone将不会冲突。
Stack Overflow用户
发布于 2018-06-01 02:57:42
因此，我的想法是基于我们之前的讨论。因为使用元素创建的每个包都加载到zone.js中，所以会收到错误消息：
Uncaught Error: Zone already loaded.您可以而且应该考虑的是不要将'./dist/elementsApp/polyfills.js'连接到捆绑包中(对于您捆绑产生的每个元素)。相反，使用polyfill.js文件作为单独的导入到您的超文本标记语言中，并在导入任何和所有要导入的元素包之前导入它。
Stack Overflow用户
发布于 2018-05-22 20:23:34
谷歌的聚合物可能就是你要找的，而不是angular：
https://www.polymer-project.org/
聚合物库提供了一组用于创建自定义图元的功能。这些功能旨在使定制元素更容易、更快地像标准DOM元素一样工作
https://stackoverflow.com/questions/50398605
复制相似问题