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.