typescript - Angular 4 easy folder structure change architecture -


the question how organize files , folders in angular 4 project able move them. i'm trying 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 exports if decide move services/api.service.ts services/api-service/api.serivce.ts folder i'll change reference in index.ts , other parts using service not changed.

//core/models/api/index.ts     export { apiresponse } './api-response.interface';     export { apiresponselist } './api-response-list.interface';     export { pagesearchparams } './page-search-params.interface'; 

--

//core/models/auth/index.ts     export { authtoken } './auth-token.interface';     export { tokentype } './token-type.type'; 

--

//core/models/index.ts     export { authtoken, tokentype } './auth';     export { apiresponselist, apiresponse, pagesearchparams } './api'; 

--

//core/index.ts     export { apiservice, crudservice } './services';     export { coremodule } './core.module';     export { authtoken, tokentype, apiresponselist, apiresponse, pagesearchparams } './models'; 

here cannot use export * because of angular compiler. everywhere need re-export things?

the main idea safe when migrating somewhere, in example i'm using typescript barrels, maybe there better approach? ideas?

i suggest 1 of 2 approaches (or both together) depending looking for.

use index export pattern means every folder create index file exporting files within scope, starting deepest level going up, @ point can end referencing models folder , having entities there in 1 line, can like:

import { authtoken, tokentype.... } './models/index'; // don't necessary need point index folder. 

mapping paths typescript absolute paths , when move sctucture or rename folders, 1 place go , modify. go approach, suggest visit link:

how use paths in tsconfig.json

and link doc here:

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

you can combine both approaches together.

hope helps


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -