Neolithic Directory Structure

– Tom H Anderson <tom.h.anderson@gmail.com>

This is an alternative to the primary directory structure this repository promotes.

About

This directory structure corrects ng creation of all files inside the app directory. The default ng structure forces all code to exist as a subdirectory to app without giving a clear space for files which should exist beneath the app dir.

This directory structure moves ~/src/app to ~/src/module/app then creates a symlink from ~/src to ~/src/app (not shown and hidden from vscode) so ng will still place new files where they belong. By moving app to a subdirectory of the module directory it clears space for files which truly belong under the app module. This removes the requirement of a core module.

All modules exist in the same directory. This removes the special handling for the app module and flattens the modules making them all equally important.

Tree Structure

.
├── e2e
│   └── src
├── media
└── src
    ├── assets
    ├── environments (@env) [@env links to environment file]
    ├── module (@module)
    │   ├── app (@app)
    │   ├── [custom module 1]
    │   │   └── layout
    │   ├── [custom module 2]
    │   │   └── layout
    │   ├── [more custom modules...]
    │   ├── data (@data)
    │   └── shared (@shared)
    └── styles
        └── themes

Install

These instructions are to install this directory structure to a brand new ng version 9 or below created application:

mkdir media
mkdir src/module
mkdir src/styles && mkdir src/styles/themes
mv src/app src/module
cd src && ln -s . app & cd .
sed -i .bak 's/.\/app/.\/module\/app/g' src/main.ts
ng generate module module/Shared
ng generate module module/Data
json --version || sudo npm install -g json
json -f tsconfig.json -I -c "this.baseUrl = './'"
json -f tsconfig.json -I -c "this.compilerOptions.paths = {}"
json -f tsconfig.json -I \
  -e "this.compilerOptions.paths['@app/*'] = ['src/module/app/*']" \
  -e "this.compilerOptions.paths['@shared/*'] = ['src/module/shared/*']" \
  -e "this.compilerOptions.paths['@module/*'] = ['src/module/*']" \
  -e "this.compilerOptions.paths['@env'] = ['src/environments/environment']" \
  -e "this.compilerOptions.paths['@data/*'] = ['src/module/data/*']"
mkdir -p .vscode
test -f .vscode/settings.json || echo "{}" > .vscode/settings.json
json -f .vscode/settings.json -I -e "this['files.exclude'] = {'**src/app': true}"

These instructions are to install this directory structure to a brand new ng version 10 or above created application. Before you can execute these instructions you must remove the comments from the tsconfig.base.json file because comments in a json file are not valid json:

mkdir media
mkdir src/module
mkdir src/styles && mkdir src/styles/themes
mv src/app src/module
mkdir src/module/app/layout
cd src && ln -s . app & cd .
sed -i .bak 's/.\/app/.\/module\/app/g' src/main.ts
ng generate module module/Shared
ng generate module module/Data
json --version || sudo npm install -g json
json -f tsconfig.base.json -I -c "this.baseUrl = './'"
json -f tsconfig.base.json -I -c "this.compilerOptions.paths = {}"
json -f tsconfig.base.json -I \
  -e "this.compilerOptions.paths['@app/*'] = ['src/module/app/*']" \
  -e "this.compilerOptions.paths['@shared/*'] = ['src/module/shared/*']" \
  -e "this.compilerOptions.paths['@module/*'] = ['src/module/*']" \
  -e "this.compilerOptions.paths['@env'] = ['src/environments/environment']" \
  -e "this.compilerOptions.paths['@data/*'] = ['src/module/data/*']"
mkdir -p .vscode
test -f .vscode/settings.json || echo "{}" > .vscode/settings.json
json -f .vscode/settings.json -I -e "this['files.exclude'] = {'**src/app': true}"

This is documentation for angular-folder-structure. If you find this useful please add your ★ star to the project.