javascript - 将 Angular 应用程序与 Vanilla JS webapp 集成

标签 javascript angular webpack

我需要你的帮助。

背景 我们有一个遗留的 Vanilla JS webapp,我们打算用 Angular 替换它。由于时间限制,我们希望逐步进行此操作,我们一次替换一个独立的组件,但也将新功能添加为独立的 Angular 应用程序。

目标当然是能够在 6-12 个月的时间范围内完全迁移到 Angular。

问题 我一直在研究如何将 angular 应用程序与带有 webpack 的 vanilla js 无缝集成(我们已经在使用它来构建我们的应用程序)。 没有关于如何为 Angular 执行此操作的示例,而我已经看到了 React 的示例。 目的是为 Angular 创建一个单独的目录,然后在需要时在 vanilla JS 中引导该目录。我们希望在一个 aot js 中与其他内容一起构建 Angular 内容。

后果 我看到的结果当然是引导 Angular 应用程序的时间,但在使用 aot 时应该不会有太大问题。

解决方案?? 这是你们发挥作用的地方。我们如何轻松地将 Angular 应用程序与 vanilla js 应用程序一起构建?

理想情况下,我想以某种方式 ng build --prod angular 应用程序,然后将结果包含在 vanilla js webpack dist 中。

提前致谢。

最佳答案

如果我是你,我会做相反的事情:将 vanillaJS 应用程序集成到 Angular 中

正如 Lazar 所说,Angular 是一个平台。您使用 Typescript 编写应用程序代码。

好消息是,每个有效的 JS 代码都将是有效的 TS 代码。另一方面,反之则不然。

所以我会做的是,将我的旧应用程序逐 block 提取,然后将其放入新的 Angular 应用程序中。

而且我知道您正在使用 webpack,它可能对您非常有用,但我强烈建议您从头开始使用 CLI。不仅因为它也使用 Webpack,还因为它代表了 Angular 项目的 90%(任意数字,但离它不远),这意味着如果你有任何问题,整个社区都可以帮助你。

当然,没有提及所有功能,例如 i18n、服务器端渲染、AOT ...

关于javascript - 将 Angular 应用程序与 Vanilla JS webapp 集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48111272/

相关文章:

reactjs - 将 Grommet 与 ReactJS webpack 和 scss import 一起使用

javascript/react - 异步/等待 for 循环 POST 请求

javascript - 如何在 Svelte/Sapper 中加载外部 JS 库?

javascript - 具有半径(模糊?)的颜色选择器算法

javascript - 强制输入值( Angular )

javascript - 使用 webpack 从 angularjs 模块加载特定指令

javascript - 在创建的 div 中的文本旁边放置一个按钮

angular - 避免在 Angular 8 中使用 Mangle 类名

css - 如何CSS选择Angular-Material表tbody?

javascript - Eslint throws 被分配了一个值但从未使用过,webpack 模块