Module structure on Angular2 and Webpack

Question

I have a project that is logically divided into 2 parts: for authorized users and not authorized.

There is my structure:

• authorized
• unauthorized
• services
• 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 {}

I want unauthorized and authorized modules be separated and encapsulated from each other. The directory services are common for both modules (logging, etc.) I used Webpack.

The question is how to remake app.component so Webpack knew when he needed to load another module?

From 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"
        }

plugins:

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

After build I have 4 files:

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

Common has default webpack structure only, vendors has all vendors code. But auth.js and unauth.js have not only theire code but almost all angular2 structure which should be in vendors.js

Answer 1

My recommendation would be to build two separate apps. If a user logs in, they are redirected to the logged in app. If a user logs out they are redirected to the logged out app.

I have done the monolithic app with login in angular 1 with routing and it was a nightmare. Angular 2 could be better, but it seems much less complex to just divide them.