Angular2和Webpack上的模塊結構

Question

我有一個項目，該項目在邏輯上分為兩部分：授權用戶和非授權用戶。

有我的結構：

• 授權的
• 未經授權
• 服務
• app.component.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不僅具有其代碼，而且幾乎所有應在vendor.js中的angular2結構

Answer 1

我的建議是構建兩個單獨的應用程序。 如果用戶登錄，他們將被重定向到已登錄的應用程序。 如果用戶注銷，他們將被重定向到注銷的應用程序。

我已經完成了用路由以角度1登錄的整體應用程序，這是一場噩夢。 Angular 2可能會更好，但是將它們分開似乎不那么復雜。