Angular 4 easy folder structure change architecture

Question

The question is how to organize files and folders in Angular 4 project to be able to easily move them. Now I'm trying 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
│

I have index.ts file in every logical folder container that exports If I decide to move services/api.service.ts to services/api-service/api.serivce.ts folder I'll change only reference in index.ts and other parts using this service will not be changed.

//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';

Here I cannot use export * because of angular compiler. So everywhere I need to re-export the things?

The main idea is to be safe when migrating something to somewhere, in this example I'm using typescript barrels, but maybe there is a better approach? Any ideas?

Answer 1

I would suggest you one of this two approaches (or both together) depending what you are actually looking for.

Use the index export pattern which means that for every folder you create a index file exporting the files within that scope, starting from the deepest level going up, so at some point you can end up referencing the models folder and having all the entities from there so in one line, you can do like:

import { AuthToken, TokenType.... } from './models/index'; // you don't necessary need to point to index but to the folder.

mapping paths by typescript so you get absolute paths and when you move the sctucture or rename the folders, just one place to go and modify. To go for this approach, I suggest you to visit this link:

How to use paths in tsconfig.json

and the link to the doc here:

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

you can combine both approaches together.

Hope it helps