what I want to do is separate the modules that I have created in my Angular project from the 'dist' folder when I build. I have tried to use WebPack but the truth could not be achieved, or I have not implemented it well. I've been stuck in this little problem for a while and I don't know what else to do.
I currently have this structure in my angular project.
. // <- project
├── ...
├── app
│ ├── ...
│ ├── modules
│ │ ├── app1
│ │ | ├── ...
│ │ | ├── components
│ │ | ├── services
│ │ | ├── shared
│ │ | ├── app1.module.ts
│ │ ├── app2
│ │ | ├── ...
│ │ | ├── components
│ │ | ├── services
│ │ | ├── shared
│ │ | ├── app2.module.ts
│ │ ├── app3
│ │ | ├── ...
│ │ | ├── components
│ │ | ├── services
│ │ | ├── shared
│ │ | ├── app3.module.ts
│ │ ├── ...
│ ├── ...
│ ├── app-routing.module.ts
│ ├── app.component.html
│ ├── app.component.scss
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── ...
I have the RoutingModule part set up like this.
.
.
.
const routes: Routes = [
{ path: 'App1', loadChildren: './modules/app1/app1.module#App1Module' },
{ path: 'App2', loadChildren: './modules/app1/app2.module#App2Module' },
{ path: 'App3', loadChildren: './modules/app1/app3.module#App3Module' },
...
];
@NgModule({
imports: [ RouterModule.forRoot(routes, { useHash: true })],
exports: [ RouterModule ]
})
export class AppRoutingModule { }
what I want is that when I do ... ng build --prod
.
I want the modules to be generated as follows.
. // <- project
├── ...
├── dist
│ ├── app
│ | ├── assets
│ | ├── main.js
│ | ├── polyfills.js
│ | ├── runtime.js
│ | ├── style.css
│ | ├── index.html
│ | ├── ...
│ ├── moduleApp1
│ | ├── ...
│ | ├── module-app1.js
│ ├── moduleApp2
│ | ├── ...
│ | ├── module-app2.js
│ ├── moduleApp3
│ | ├── ...
│ | ├── module-app3.js
How can I do to have this folder structure?.I want someone to help me, please.