Search code examples
angulartypescriptasp.net-coreproject-structure

Where should .html, .css, etc. files for Typescript + Angular 2 + ASP.Net Core 1.0 be located?


Typescript tutorial to create ASP.Net Core application (with or without Angular 2) suggests that we create a folder Scripts and use gulp task to copy only the .js files to wwwroot folder, e.g. during the build.

Now that makes sense, but what do we do with all the .html, .css, etc. files that angular 2 can utilize. It seems that there are generally two way of doing it:

  1. Adding them to wwwroot folder.

    • Benefits: no need to add gulp task for these static files

    • Drawbacks: we'll have to duplicate the folder structure and do operations of copy/rename/etc twice

  2. Keeping them in the Scripts folder outside of wwwroot (then we'd better rename it to Source or something like that.

    • Benefits: no duplication, all in one place

    • Drawbacks: we'll have to copy them to wwwroot in gulp task

In case 2 wwwroot becomes like a bin folder for ordinary application.

Are there any official guidelines/advices on the topic (I was not able to find any) that I can use as a reference?


Solution

  • Generally people use method 2, though most people (me included) call the folder "app" rather than "source" or "scripts" and copy them via gulp.

    One reason for doing so is that we can exclude wwwroot folder from source control management. Another being that for production you want to bundle your files (both html, css and the resulting *.js files), so your wwwroot folder will contain different set of data, depending on if you are developing or deploying it.

    And since it's content will change often (with each build/bundling) and it may generate fairly large and minified flies, its less suitable for source control anyways (minified/uglified/concated files are hard/difficult/impossible to create diffs for).

    For angular in specific you want to keep the *.html, *.ts, *.js and *.css (only the ones related to components) in the same location/subfolder. Visual Studio will automatically group them together (i.e. sample.component.html, sample.component.ts,sample.component.css and sample.component.js will be grouped together and you can unfold them by pressing the little triangle next to the grouped name) and it works well for bundling as angular2 css/template can be made to use component relative path, if you use a module loader (recommended!).