Ilya Chernomordik Ilya Chernomordik - 1 year ago 102
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

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

    • 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
    folder outside of
    (then we'd better rename it to
    or something like that.

    • Benefits: no duplication, all in one place

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

In case 2
becomes like a
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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download