Changing directory structure in an angular-cli project

Question

I have been noodling with angular-cli to decide if we want to use this as the basis for a new project we're starting. We're a long time Microsoft shop and have mostly server side knowledge so we're doing our best to learn the ins and outs of the client side framework world. We like the angular-cli project for it's built-in testing, bundling, tree shaking, etc and preserving these functions is what brings me to my question. We have come up against a need to change the default directory structure. We are using MVC to serve a single view that will basically be the index.html file of the angular application. If we do this with the standard angular-cli project folder structure, the app doesn't run or build because all path references are looking for .\src\app...

What I need to know is what do I need to change in the angular-cli setup so that the automated watch, build, bindling, testing, etc features of the cli continue to work with this new structure, or, is this not something we want to dig into as it will just break in the future?

score 6 · Answer 1 · answered Oct 31 '16 at 14:35

6

There are lot of customization option available in angular-cli, you may do the same by updating angular-cli.json file.

    "root": "src",
    "outDir": "dist",
    "assets": [
        "assets"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "",
      "mobile": false,
      "styles": [

      ],
      "scripts": [

      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }

most of the configurations are self explanatory, you may play with these to achieve what you need.

Hope this helps!!

answered Oct 31 '16 at 14:35

Madhu Ranjan

17,334
7
60
69

Madhu, I think this will help, but when I tried modifying the value of the 'root' configuration element I started getting errors during build. I set it to the root folder name "bt2.web". The error is: C:\dev\ph\git\BT2\bt2.web\bt2.web\main.ts doesn't exist – Mike Devenney Oct 31 '16 at 14:42
have you tried giving the name of your webfolder, also you have to keep in mind all the path are relative to root variable. – Madhu Ranjan Oct 31 '16 at 14:46
Is the root path entry relative to the angular-cli.json file? – Mike Devenney Oct 31 '16 at 14:47
After quite a few attempts I've come to the conclusion that the angular-cli assumes the default project folder structure in too many places for me to easily change this. I'm not saying it's not possible, it's just not as straightforward as changing the name of the root folder in the config. Thanks for the help Madhu! – Mike Devenney Oct 31 '16 at 15:19
Have you tried setting `"root": "./"` ? This should do it in your case if it in fact accepts relative paths. – Alexander Ciesielski Oct 31 '16 at 15:57
Yep, that was my second attempt. It resulted in an error that read something like, "Invalid action on directory". I could have the wording of the error wrong, but it was similar. The path given in the error included a double slash (assuming it tried to append an empty directory name for some reason?) path looked like this: BT2\bt2.web\\main.ts. – Mike Devenney Oct 31 '16 at 16:03
But you can't change `app` – bhantol Aug 21 '17 at 21:54

score 3 · Answer 2 · answered Feb 05 '17 at 23:25

Did you try ng init --source-dir?

PS C:\Users\andre\Workspace\myproject> ng init --help

ng init <glob-pattern> <options...>
  Creates a new angular-cli project in the current folder.
  aliases: u, update, i
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --link-cli (Boolean) (Default: false)
    aliases: -lc
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-git (Boolean) (Default: false)
    aliases: -sg
  --skip-tests (Boolean) (Default: false)
    aliases: -st
  --skip-commit (Boolean) (Default: false)
    aliases: -sc
  --name (String) (Default: )
    aliases: -n <value>
  --source-dir (String) (Default: src)
    aliases: -sd <value>
  --style (String) (Default: css)
  --prefix (String) (Default: app)
    aliases: -p <value>
  --routing (Boolean) (Default: false)
  --inline-style (Boolean) (Default: false)
    aliases: -is
  --inline-template (Boolean) (Default: false)
    aliases: -it

Changing directory structure in an angular-cli project

2 Answers2

Linked