0

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?

Varuzhan
  • 43
  • 7

1 Answers1

2

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

Alejandro Lora
  • 7,203
  • 3
  • 18
  • 34
  • I'v updated the question. Lets say we have set up the paths in tsconfig.json "paths": { "core/*": ["core/*"], } and in multiple places is used `import { ApiService } from 'core'; after `core` is moved to separate package in `npm` for example. On this case I'll change the reference to ` "core/*": ["node_modules/@projectName/api"]` or keep the core folder and inside `core/index.ts` file export the reference s from `@projectName/api`. Could you give an example please? – Varuzhan Jul 28 '17 at 11:01
  • As I mentioned before, if you move the folder to another place, you just need to update the absolute path on your mapping ts configuration, and that's it. it's simple and you always know where are you pointing to and change it without digging into the code. If you mix that with index, is even better, because even if you rename or change the structure folder inside, if you absolute path is pointing to the main index, you just need to update that one for the new folder name and voila, no changes are required within the code. – Alejandro Lora Jul 28 '17 at 14:22