Question

我确实有三个不同的应用程序彼此分开。现在我想将它们添加到一个项目/应用程序中，我也希望能够 - 在某种程度上 - 动态地更改布局/ css / scss。另一方面，应用程序应该有一些共同的服务。

我使用这种结构：

  /dashboard
     angular-cli.json
     ...
     /src
        /app
           app.component.css
           app.component.html
           app.component.spec
           app.component.ts
           app.module.ts
        /xxx
           xxx.component.css
           xxx.component.html
           xxx.component.spec
           xxx.component.ts
           xxx.module.ts
        /yyy
           yyy.component.css
           yyy.component.html
           yyy.component.spec
           yyy.component.ts
           yyy.module.ts
        /common-services
        main.ts

ng test --sm=false工作正常..没有错误，我还可以构建并启动应用，指定我想要投放哪个：ng serve xxx。

所以我现在面临的问题是：

如何在浏览器中为psecific应用程序提供服务..目前它会自动转到第一个应用程序，而不是xxx我使用ng serve
如何为所有三个应用创建公共服务以及应该在哪里创建他们会根据我的结构得到保存吗？
如何才能更改三个应用的布局在一种配置样式（css / scss）文件或类似的东西

angular-cli.json ：

    {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
      "name": "dashboard"
    },
    "apps": [
         {
            "name": "app",
            "root": "src",
            "outDir": "dist",
            "assets": [
                "assets",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.app.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        },
        {
            "name": "xxx",
            "root": "src",
            "outDir": "dist",
            "assets": [
                "assets",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.app.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        },
        {
            "name": "yyy",
            "root": "src",
            "outDir": "dist",
              "assets": [
                "assets",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.app.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "styles.css"
            ],
            "scripts": [],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "lint": [
      {
          "project": "src/tsconfig.app.json",
          "exclude": "**/node_modules/**"
      },
      {
          "project": "src/tsconfig.spec.json",
          "exclude": "**/node_modules/**"
      },
      {
          "project": "e2e/tsconfig.e2e.json",
          "exclude": "**/node_modules/**"
      }
    ],
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "css",
        "component": {}
    }
}

main.ts ：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { XxxModule } from './xxx/xxx.module';
import { YyyModule } from './yyy/yyy.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

Answer 1

我认为有几个命令的--app选项这是创建和构建多个应用https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/

的一个很好的示例

如何使用通用服务和动态样式在一个项目中构建多个应用程序？

1 个答案: