Ilya Chernomordik Ilya Chernomordik - 1 month ago 10
TypeScript Question

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?

Answer

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