Configuration Files:

tsconfig.json

Path Alias:

They represent shortcuts for our files, with them we can implement imports in a more comfortable and short way.

"paths":{
   "@src/*":[
      "src/*"
   ],
   "@assets/*":[
      "src/assets/*"
   ],
   "@shared/*":[
      "src/app/shared/*"
   ]
}

angular.json

stylePreprocessorOptions:

It expects a json with the following property “includePaths” that declares shortcuts for our style files in the same that path alias, the only difference is that it doesn’t need an “@” to use it on your scss files.

"stylePreprocessorOptions": {
   "includePaths": ["src/app/shared/styles"]
 }

Configurations:

Each one of the configurations available for our project to use on our compilation.

I recommend the following for development and production:

"configurations": {
            "local": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.local.ts"
                }
              ],
              "optimization": false,
              "outputHashing": "all",
              "sourceMap": true,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": false,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
}

Structure:

Barrels:

To organize our project imports we are going to use the concept of “Barrels”, the main idea is to add a file called “index.ts” to each one of our folders that contain an .ts file. Inside of it we are going to export each exportable variable to the outside of all the .ts files creating this way a hidden hierarchy which is going to help us hiding long deep paths at our imports.

Example:

Index.ts inside “components” folder

export * from './component-folder-1';
export * from './component-folder-2';

Import at module