CODEWITHSUNDEEP
angularangular-cli
Mike Devenney
Mike Devenney

Reputation: 1845

Changing directory structure in an angular-cli project

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?

Our folder structure:

Upvotes: 4

Views: 8101

Answers (2)

André
André

Reputation: 12737

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

Upvotes: 3

Madhu Ranjan
Madhu Ranjan

Reputation: 17894

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!!

Upvotes: 6

Related Questions