CODEWITHSUNDEEP
angularasp.net-core
Set
Set

Reputation: 49789

Project Structure. May Angular 2 app folder locates directly in wwwroot?

I have faced with 2 different approaches how project structure may be organized for ASP.NET Core project with Angular 2:

  1. create Angular app folder in root project folder, and then use scripts/task runners (like gulp) to copy app folder content to wwwroot folder during deploy.

  2. Angular app folder can be created directly in wwwroot folder. No additional actions like gulp copy task.

For me the first option was considered as better one, as you have more flexible way to control wwwroot final content using gulp copy task. But over last few days I found different examples used second approach. Moreover, the aspnetcore-angular2 yo generator also places app folder directly to wwwroot and does not use gulp. So what is the best prectice?

Upvotes: 1

Views: 1254

Answers (1)

Tseng
Tseng

Reputation: 64288

I wouldn't put stuff into wwwroot directly and it's wise to exclude wwwroot from checking into source code management (git/svn/etc.), this way you can recreate the content of wwwdata depending on your build configuration (i.e. create minimized files or don't minimize for development.

So less junk in SCM, easier publishing since you always start with a clean wwwroot folder when the build/publishing process starts.

For development you can (and maybe should to keep your SCM cleaner), just save the compiled files into wwwroot and only have the TypeScript (*.ts) files in the project's app folder (not inside wwwroot), then you won't need to run gulp tasks after every change to the source code of your files.

There are two options you need to set.

  1. compileOnSave to true, so the *.ts gets transpiled on each save
  2. Set the outDir to wwwroot/app so the transpiled *.js files get saved in wwwroot/app folder (and subfolders, relative to your project root)

Here an example tsconfig.json I use. 

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noEmitOnError": true,
    "noImplicitAny": false,
    "removeComments": false,
    "outDir": "wwwroot/app",
    "strictNullChecks": false
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

This way for development its enough to just save the *.ts files and reload the webpage (assuming your web project runs in the background while you write angular2 code, as there is no need to restart it after every change).

And keep the gulp tasks for build and publishing or to copy over the libraries to wwwroot/node_modules or wwwroot/lib folder.

My project structure looks something like 

ProjectRoot
| wwwroot
| | app
| | | components
| | | services
| App
| | components
| | services
...

Upvotes: 2

Related Questions