Angular2 和 Webpack 上的模块结构

Question

我有一个项目，逻辑上分为两部分：授权用户和非授权用户。

这是我的结构：

• 授权
• 未经授权
• 服务
• app.component.ts
• vendor.ts
• boot.ts

app.component:

@Component({
               selector  : "body",
               template  : `<router-outlet></router-outlet>`,
               directives: [ROUTER_DIRECTIVES],
               providers : [AuthService, DefaultService, LoggerService]
           })
@Routes([
            {
                path     : "/auth/login",
                component: AuthComponent
            },
            {
                path     : "/",
                component: DefaultComponent
            }
        ])
export class AppComponent {}

我希望将未经授权和授权的模块相互分离和封装。 目录服务对于两个模块（日志记录等）都是通用的。 我使用了 Webpack。

问题是如何重新制作 app.component 以便 Webpack 知道何时需要加载另一个模块？

来自 webpack.config.js：

entry: {
          "vendors": "./project/app/vendors.ts",
          "auth"   : "./project/app/unauthorized/auth.component.ts",
          "unauth" : "./project/app/authorized/default.component.ts",
          "style"  : "./project/sass/application.scss"
        }

插件：

new CommonsPlugin({
    minChunks: Infinity,
    name     : "common",
    chunks   : [
        "vendors",
        "auth",
        "unauth"
    ]
})

构建后我有 4 个文件：

- auth.js
- unauth.js
- vendors.js
- common.js

Common 仅具有默认的 webpack 结构，供应商拥有所有供应商代码。 但是 auth.js 和 unauth.js 不仅有它们的代码，而且几乎所有的 angular2 结构都应该在 vendor.js 中

Answer 1

我的建议是构建两个独立的应用程序。如果用户登录，他们将被重定向到登录的应用程序。如果用户注销，他们将被重定向到已注销的应用程序。

我已经完成了单片应用程序，在 Angular 1 中使用路由登录，这是一场噩梦。 Angular 2 可能会更好，但将它们分开似乎要简单得多。