angular 应用程序上的多个根模块

Question

我正在 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, I will upload the client part, while with http://mywebsite.com/admin 我会使用登录屏幕加载管理部分。

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

ng build --prod

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

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

WARNING in Lazy routes discovery is not enabled. Because there is neither an entryModule nor a statically analyzable bootstrap code in the main file.

Answer 1

这不是错误。当你运行 ng build --prod 你运行它与 AOT compilation on. It means it compiles the app before the build to make sure everything set correctly. It seems like you are loading different Modules while bootstrapping your app and I'm not sure AOT compilation will agree to that. You can change to use Lazy Loaded modules 并将你的应用程序分开到 2 个不同的模块。

如果您真的想要，请尝试 ng build --prod --aot=false 或 ng build --prod --aot false。

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

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

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

Advantages There are a number of potential advantages to a monorepo over individual repositories:

Ease of code reuse – Similar functionality or communication protocols can be abstracted into shared libraries and directly included by projects, without the need of a dependency package manager.

Simplified dependency management – In a multiple repository environment where multiple projects depend on a third-party dependency, that dependency might be downloaded or built multiple times. In a monorepo the build can be easily optimized, as referenced dependencies all exist in the same codebase.

Atomic commits – When projects that work together are contained in separate repositories, releases need to sync which versions of one project work with the other. And in large enough projects, managing compatible versions between dependencies can become dependency hell.[5] In a monorepo this problem can be negated, since developers may change multiple projects atomically.

Large-scale code refactoring – Since developers have access to the entire project, refactors can ensure that every piece of the project continues to function after a refactor.

Collaboration across teams – In a monorepo that uses source dependencies (dependencies that are compiled from source), teams can improve projects being worked on by other teams. This leads to flexible code ownership.

Limitations and disadvantages

Loss of version information – Although not required, some monorepo builds use one version number across all projects in the repository. This leads to a loss of per-project semantic versioning.

Lack of per-project security – With split repositories, access to a repository can be granted based upon need. A monorepo allows read access to all software in the project, possibly presenting new security issues.

希望对您有所帮助

Answer 2

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

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

这 guide 帮助我开始了。

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

angular 应用程序上的多个根模块

Multiple root modules on angular application

production

angular