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结构都应该在vendors.js中

Answer 1

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

我已经完成了使用路由的角度1登录的单片应用程序，这是一场噩梦。 Angular 2可能会更好，但分割它们似乎要复杂得多。

Angular2和Webpack上的模块结构

1 个答案: