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?

Madhu Ranjan · Accepted Answer · 2016-10-31 14:35:31Z

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, 2016 at 14:35

Madhu Ranjan

18k7 gold badges65 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mike Devenney Over a year ago

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

Madhu Ranjan Over a year ago

have you tried giving the name of your webfolder, also you have to keep in mind all the path are relative to root variable.

Mike Devenney Over a year ago

Is the root path entry relative to the angular-cli.json file?

Mike Devenney Over a year ago

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!

Alexander Ciesielski Over a year ago

Have you tried setting "root": "./" ? This should do it in your case if it in fact accepts relative paths.

|

André · Accepted Answer · 2017-02-05 23:25:11Z

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

Collectives™ on Stack Overflow

Changing directory structure in an angular-cli project

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related