角度应用程序上的多个根模块答案

【问题标题】：Multiple root modules on angular application角度应用程序上的多个根模块
【发布时间】：2019-08-27 12:54:02
【问题描述】：

我正在用 Angular 开发一个网站。这个应用程序分为两部分：客户端部分和管理员部分。后者可通过登录屏幕访问。这个机制的核心是通过这两个文件来完成的：

main.ts:

import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app/app.module';
import {environment} from './environments/environment';
import {AdministrationModule} from "./administration/administration.module";

if (environment.production) {
    enableProdMode();
}

if (window.location.href.indexOf("admin") != -1) {
    platformBrowserDynamic().bootstrapModule(AdministrationModule);
}

else {
    platformBrowserDynamic().bootstrapModule(AppModule);
}

index.html:

<!doctype html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <title>MyWebsite</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="icon.ico">
</head>
<body>
<app-root></app-root>
<app-administration></app-administration>
</body>
</html>

基本上，如果我正常指向网站http://mywebsite.com，我将上传客户端部分，而使用http://mywebsite.com/admin，我将使用登录屏幕加载管理部分。

我的问题是，如果我使用这些命令编译应用程序，一切正常：
ng build 或 ng serve
而当我编译它进行生产时它不起作用：

ng build --prod

我现在有两个问题：这是一个角度错误吗？简单地使用ng build 而不是ng build --prod 命令投入生产是否可靠？我已经用ng build（在生产中）进行了测试，一切正常。

啊，一件事：在编译过程中出现以下警告：

延迟路由发现中的警告未启用。因为有既不是 entryModule 也不是静态可分析的引导代码主文件。

【问题讨论】：

我的假设是因为在执行--prod 时它使用aot 而ng serve 和ng build 使用jit
好吧……而且……为什么会有一些不同？
Ahead-of-Time (AOT)，在构建时编译您的应用程序。即时 (JIT)，在运行时在浏览器中编译您的应用程序。
@penleychan 是的，我知道。但它们之间的本质区别在哪里？为什么即时编译器工作正常而 AOT 没有？无论如何谢谢你

标签： angular production

【解决方案1】：

您的 Angular 项目中可以有多个应用程序，这就是我解决类似情况的方法。

https://angular.io/cli/generate#application-command

这个guide 帮助我开始了。

这里是另一个guide，有一些很好的例子。

【讨论】：

【解决方案2】：

这不是错误。当您运行 ng build --prod 时，您将在 AOT 编译的情况下运行它。这意味着它会在构建之前编译应用程序以确保一切设置正确。似乎您在引导您的应用程序时正在加载不同的模块，我不确定 AOT 编译是否会同意这一点。您可以更改为使用 Lazy Loaded modules 并将您的应用程序分成 2 个不同的模块。

如果你真的想要，那么试试ng build --prod --aot=false 或ng build --prod --aot false。

由于它看起来像是一个可扩展的应用程序，我认为对您来说最好的解决方案是使用 MonoRepo 模式。您将拥有多个带有库的应用程序，它们都将位于同一个项目下。您可以利用大量的可重用性，并且维护会更容易。

检查Nrwl/Nx Angular Here 他们为此提供了很好的工具。它通过使用原理图来支持 Angular cli。我想这会对你有很大帮助。也许您需要将您的应用程序部署到不同的地方，或者为每个应用程序使用一些不同的环境，而这个 monorepo 非常适合实现这一点。

更多关于monorepos的信息来自Wikipedia：

优势单一回购有许多潜在优势 单个存储库：

易于代码重用 - 类似的功能或通信协议可以抽象成共享库并直接包含在项目，无需依赖包管理器。

简化的依赖管理 – 在多存储库环境中多个项目依赖于第三方依赖，即依赖可能会被多次下载或构建。在 monorepo 中构建可以轻松优化，因为引用的依赖项都存在于相同的代码库。

原子提交 – 当项目一起工作时包含在单独的存储库中，版本需要同步哪个一个项目的版本与另一个项目一起工作。而且足够大项目，管理依赖项之间的兼容版本可以成为依赖地狱。 [5]在 monorepo 中，这个问题可以被否定，因为开发人员可以自动更改多个项目。

大规模代码重构 – 由于开发人员可以访问整个项目，因此重构可以确保项目的每一部分都继续重构后的功能。

跨团队协作 – 在 monorepo 中使用源依赖项（从源），团队可以改进其他团队正在进行的项目。这导致灵活的代码所有权。

限制和缺点

版本信息丢失 - 虽然不是必需的，但一些 monorepo 构建在存储库中的所有项目中使用一个版本号。这会导致每个项目的语义版本丢失。

缺乏每个项目的安全性 - 使用拆分存储库，访问存储库可以根据需要给予。 monorepo 允许读取所有项目中的软件，可能会带来新的安全问题。

希望对你有帮助

【讨论】：

谢谢。我还需要指定 --build-optimizer false