Javascript 如何为本地运行的所有angular项目共享公共资源？

我正在尝试设置一个本地环境，以便使用公共/共享资源从一个目录运行多个应用程序

我有以下目录结构（本地）：

然后我在根目录中使用lite server，因此我将systemjs.config.js中的路径修改为：

  paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'App2/app',

现在，当我加载App1 zone.js时，无法找到我的大部分组件：

我在网上找不到任何指向同一主题的话题

---

想法是避免重复所有资源。

在systemjs.config.js中执行类似操作：

    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      'angularstuffhere':'angularstuffhere'
    },
packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }

在Index.html中

<app-root>Loading Client...</app-root>

<app1-root>Loading Client...</app1-root>
<app2-root>Loading Client...</app2-root>

在Index.html中

<app-root>Loading Client...</app-root>

<app1-root>Loading Client...</app1-root>
<app2-root>Loading Client...</app2-root>

由于存在编译问题，请在package.json中更改以下内容：

"scripts": {
    "build": "tsc -p dirofyourapp/",
    "build:watch": "tsc -p dirofyourapp/ -w",
    "build:e2e": "tsc -p e2edirofyourapp/",

您将无法使用一组脚本运行到不同的应用程序，您必须在package.json中创建自己的自定义脚本

如果你想要一个可重用的代码，那么创建一个可重用的独立模块，并通过导入而不是创建一个复杂的不可维护的开发环境在你的应用程序中使用它

如何创建可供许多应用程序使用的可重用模块的示例：

---

终于成功了，发布了答案，以便搜索者得到帮助

解决方案是首先有一个空文件夹（主文件夹），用于保存所有角度项目的所有公共库

在主文件夹中添加一个package.json，并提及将在所有角度项目中使用的所有依赖项

（理想的依赖项）https://github.com/angular/quickstart/blob/master/package.json)

现在，请确保您有一个lite服务器的全局安装（

https://github.com/johnpapa/lite-server

）这将有助于主持/运行所有项目

现在在根目录中创建一个

bs config.json

，这样我们就可以定义localhost的范围，换句话说，告诉它运行哪个项目

一旦你有了它，你就可以继续使用child dir来处理你想在它下面使用的所有应用。无需更改任何应用程序中的任何路径

---

一切都应顺利进行。Hello@Gary您是否建议在根目录中使用1个systemjs.config.js并在其中声明映射？只是想告诉您如何使用不同的获取文件夹。制作两个应用程序完全是你的选择。但是，如果您打算使用App1文件夹和App2文件夹，那么最好使用子模块，而不是基于文件夹的隔离。

您是否建议在根目录中使用1个systemjs.config.js并在其中声明映射

是如果App1和App2是不同的应用程序，那么这就是方法。否则使用子模块。记住，您必须在ngmodule中声明它们。没有出路。您可以选择是在子模块中还是在父模块中执行。我已根据您的需要更改了代码。不幸的是，无法运行@gary Browsersync或lite server在传输时出现问题，并且在线上对此主题的可用性不高。这不是许多人构建应用程序的方式。这个问题与路径有关，但与应用程序的结构无关。我想让您检查的下一个地方是bsconfig.json，并更改它所服务的文件夹名称。这是您应该做的，我相信

“baseDir”：“changetodirtobeserved”，

不明白您已经有了一个package.json。您现在主要拥有两个不同的项目。为什么要重新发明轮子。使用两种不同的快速入门！应该只保留一个package.json，在根目录中，只需将baseDir参数更改为要运行的项目的名称。另外，tsconfig.json也应该保存在root中。你为什么要这么做？你的问题是如何停止重复所有资源。这是一个无法维护的解决方案。如果节点模块是您所说的资源复制，而不是应用程序的代码资源复制，那么您可能会浪费太多未知的时间来更改路径。只需创建两个项目。即使使用ng cli 130 mb依赖项，您也有项目清洁度，在当今的gb和tb世界中，mb比您的时间更便宜。

"scripts": {
    "build": "tsc -p dirofyourapp/",
    "build:watch": "tsc -p dirofyourapp/ -w",
    "build:e2e": "tsc -p e2edirofyourapp/",