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

Question

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

我有这个目录结构（本地）：

|AngularApps
|-App1
|-App2
    |---app
    |---index.html
    |---tsconfig.json
    |---tslint.json
    |---typings.json
    |---systemjs.config.js
|-node_modules
|-package.json

然后我在 root 中使用 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 无法找到我的大部分组件：

我在网上找不到任何指向相同的主题。

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

Answer 1

在 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>

现在在 app 文件夹中创建您的 app.module 并引用 app/App1/app 和 app/App2/app；它可能有组件，也可能是模块本身。这是您可能需要的。

如果您想要两个不同的不相关应用程序，请在您的 systemjs.config.js 中执行以下操作（不需要两个 systemjs.config）：

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: 'App1/app',
          app2: 'App2/app',
          'angularstuffhere':'angularstuffhere'
        },
    packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          }
        }

在 Index.html 中

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

更新：

尝试将 bsconfig.json 的服务文件夹更改为以下内容：

"baseDir": "dirofyourapp",

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

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

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

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

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

https://github.com/primefaces/primeng/blob/master/src/app/components/chart/chart.ts

Answer 2

终于成功了，发布答案以便寻求者得到帮助。

解决方案是首先有一个空文件夹（Home），以保存所有 Angular 项目的所有公共库。

在 Home 文件夹中添加一个 package.json 并提及您将在所有 Angular 项目中使用的所有依赖项(an ideal one https://github.com/angular/quickstart/blob/master/package.json)

现在确保你有一个 -global 安装的 lite-server (https://github.com/johnpapa/lite-server) 这对于托管/运行所有项目很有用

现在在根目录中创建一个bs-config.json，这样我们就可以确定本地主机的范围，换句话说就是告诉它要运行哪个项目。

一旦你有了它，你就可以继续为你想在它下使用的所有应用程序使用子目录。无需在任何应用中更改任何路径。

一切都会顺利进行。 ?

添加更多项目：