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

Question

我正在尝试托管可以放入非 Angular 网页的独立 Angular 元素。当我只有一个时它工作得很好..但是当我在同一页面上加载两个或更多时我得到这个错误:

Uncaught Error: Zone already loaded.

我正在使用构建脚本将我的 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 文件包装在一个自执行函数中，以尝试限制范围。不幸的是，没有解决任何问题。

有什么想法吗？

人们似乎对什么是 Angular 元素感到困惑。如需说明，您可以观看此视频 https://www.youtube.com/watch?v=4u9_kdkvTsc .最后几分钟特别显示了一个 Angular 元素被导出并包含在一个非 Angular 页面上。我正在尝试在同一页面上包含多个元素。

Answer 1

我认为你不应该在一个站点上使用 2 angular。

解决方案可以是:

• 使用 Angular 构建整个网站。代码的其他部分可以添加到应用中。
• 使用子模块并将两个应用程序与父路由器合并。
• 为每个 Angular 组件使用 iframe。那么ngzone就不会碰撞了。