I am faced with the challenge of organizing files and folders within an Angular 4 project in a way that allows for easy reorganization. Currently, my approach looks like this:
├───core
│ │ core.module.ts
│ │ index.ts
│ │
│ ├───models
│ │ │ index.ts
│ │ │
│ │ ├───api
│ │ │ api-response-list.interface.ts
│ │ │ api-response.interface.ts
│ │ │ index.ts
│ │ │ page-search-params.interface.ts
│ │ │
│ │ └───auth
│ │ auth-token.interface.ts
│ │ index.ts
│ │ token-type.type.ts
│ │
│ └───services
│ api.service.ts
│ auth-token.service.ts
│ auth.service.ts
│ crud.service.ts
│ index.ts
│ local-storage.service.ts
│
In each logical folder container, I have an index.ts file that serves as an export point. This setup allows for seamless movement of files. For example, if I were to relocate services/api.service.ts to services/api-service/api.serivce.ts folder, I only need to update the reference in index.ts while other parts utilizing the service remain unchanged.
//core/models/api/index.ts
export { APIResponse } from './api-response.interface';
export { APIResponseList } from './api-response-list.interface';
export { PageSearchParams } from './page-search-params.interface';
--
//core/models/auth/index.ts
export { AuthToken } from './auth-token.interface';
export { TokenType } from './token-type.type';
--
//core/models/index.ts
export { AuthToken, TokenType } from './auth';
export { APIResponseList, APIResponse, PageSearchParams } from './api';
--
//core/index.ts
export { ApiService, CRUDService } from './services';
export { CoreModule } from './core.module';
export { AuthToken, TokenType, APIResponseList, APIResponse, PageSearchParams } from './models';
Due to limitations with the Angular compiler, I cannot use export * everywhere, necessitating the manual re-exporting of components. Is there a more efficient method than using typescript barrels for ensuring safe migrations? Any suggestions are welcome.