嵌套的 Angular 应用程序 - 有可能吗？答案

【问题标题】：Nested Angular Apps - Is It Possible?嵌套的 Angular 应用程序 - 有可能吗？
【发布时间】：2018-09-23 01:10:53
【问题描述】：

我很想知道是否可以将整个 Angular 应用程序相互嵌套。

想象一下，我将 app1 和 app2 作为两个独立的项目。我希望app2 能够独立运行。我的意思是我希望能够将该项目作为一个独立的应用程序来服务和构建。但是，我还希望能够将 app1 嵌套在 app2 的视图之一中。

对于目前存在的当前 Angular 架构，这是否可能。我知道 Angular 团队目前正在处理 Angular Elements 项目，我想知道这是否适合这类事情。

任何尝试过此操作的人的任何想法都将不胜感激。提前致谢！

【问题讨论】：

【解决方案1】：

在这种情况下，最容易让应用程序与 shell 保持一致，您可以从中延迟加载两个子应用程序的模块。这将使您能够延迟加载兄弟应用程序的模块（和路由）。我在一个应用程序上工作，它有 5 个独立的“应用程序”，每个都可以加载到我们的核心中，然后当用户转到另一个应用程序时，它会延迟加载到核心中。

【讨论】：

用 Webpack 作为构建工具？
是的，我最近通过我们的路由做了一些延迟加载模块的工作。可能必须在这里做同样的事情。只是想可能有另一种方式。

【解决方案2】：

对于您的情况，我们的想法是 app2 将是 app1 中使用的库。

简单的方法是使用 nx 扩展。 (https://nx.dev/angular) 或创建一个角度库并将 app2 移动到库中。

另一种方法是通过 npm build 进行自定义构建过程。您可以使用 ng-packager 为 app1 构建一个库。同时，您仍然可以使用 ng serve 或 npm run 在本地环境中测试 app2。

https://medium.com/self-learning/ng-packagr-

安装 ng-packagr

npm install ng-packagr --save-dev

创建 ng-package.json

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  }
}

创建 src/public_api.ts

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "./src/public_api.ts"
  },  
  "whitelistedNonPeerDependencies": ["."]
}

运行 ng-packagr 以将应用程序构建为库

node_modules\.bin\ng-packagr

【讨论】：