Question

我刚刚完成了使用angular 4创建的应用程序的前端部分。我现在正在创建一个管理面板，该面板将具有单独的登录页面和两个或三个组件。起初我创建了一个新模块并使用路由器创建了一些“/ admin”路由。问题是app组件有标头，我不需要。使用* ngIf来检查当前的URL似乎太多了。管理页面的简单创建第二个角度应用程序会更好吗？什么是最好的方法？

Answer 1

问题相当广泛，但我会尝试用多个应用来涵盖这个案例。

拥有多个应用的优势：

管理员应用程序通常很重，用户的应用程序通常非常优化。因此，将代码拆分为两个应用程序非常有用：客户端只是不加载管理模块
您只能运行管理员或仅运行客户端应用程序 - 这确实可以节省项目变得足够重的时间
共享模块可以获得不同的全局配置，因为它们是在不同的应用程序中引导的。所以这更灵活

缺点：

初始配置步骤需要一些知识和时间投入

对于angular-cli，您可以使用以下方法。在.angular-cli.json中创建两个应用程序（请参阅json schema）。你应该有像

这样的东西

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "..."
  },
  "apps": [
    {
      "name": "default",
      "root": "src",
      "outDir": "ci/dist-default",
      "assets": [...],
      "index": "index.html",
      "main": "main-default.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [...],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "admin",
      "root": "src",
      "outDir": "ci/dist-admin",
      "assets": [...],
      "index": "index.html",
      "main": "main-admin.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [...],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  ...
}

为管理面板创建app-admin.module.ts和app-admin.component.ts，主要是复制粘贴原始模块。然后，您需要创建另一个main-admin.ts文件，该文件将导入app-admin.module.ts。

理想情况下，为app1和app2设置两个单独的文件夹会很好。

就是这样！现在，您有两个可以在一个项目中使用相同代码库的应用程序。

然后是时候调整你的package.json脚本了：

  "scripts": {
    "ng": "ng",
    "start-admin": "ng serve --proxy-config=proxy.conf.json --app=admin --base-href=/admin/ --port=4201",
    "start-default": "ng serve --proxy-config=proxy.conf.json --app=default",
    "start": "concurrently --kill-others 'npm run start-default' 'npm run start-admin'",
    "build-admin": "ng build --app=admin --base-href=/admin/",
    "build-default": "ng build --app=default",
    "build": "concurrently 'npm run build-default' 'npm run build-admin'",
    "build-prod": "concurrently 'npm run build-default -- -prod' 'npm run build-admin -- -prod'"
  },

一些解释：

app参数使用应用名称来构建
base-href用于在/admin路径下找到管理项目，请参阅base tag。这是必需的，因为在构建之后，您将拥有两个不同的应用程序，并且它们不能同时由相同的路径提供服务
我们有两个端口：4200和4201同时运行应用程序，如果同时运行这两个应用程序，则使用代理从4200提供/admin/部分

请参阅proxy.conf.json：

{
  "/admin": {
    "target": "http://localhost:4201",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/admin": ""
    }
  },
  "...": "..."
}

最后你有类似的东西

这需要一些技巧和对代理的理解。此外，您还需要使用/ admin路径的相同代理设置来配置实时服务器。然而，它确实值得，我使用它已经有一段时间了，不能称之为一个糟糕的解决方案

Answer 2

将application-nav-header移到单独的组件中。

application.component.html

<alert-component></alert-component>  <router-outlet></router-outlet>

public.component.html

<public-nav-header-component></public-nav-header-component>  <router-outlet></router-outlet>

admin.component.html

<admin-nav-header-component></admin-nav-header-component>  <router-outlet></router-outlet>

application.routes.ts

[ {path: "/", component: PublicComponent}, {path: "/admin", component: AdminComponent} ]

admin.routes.ts

[ {path: "/login", component: LoginComponent}, {path: "/user-listing", component: UserListingComponent} ]

public.routes.ts - 移动您当前的application.routes此处

角度正确的管理面板实现

2 个答案: