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)

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

现在在根目录中创建一个bs-config.json，这样我们就可以定位localhost，换句话说就是告诉它运行哪个项目。

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

一切顺利。

添加更多项目：

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

2 个答案: