2

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?

Improve this question

2 Answers 2

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the comprehensive answer. I was thinking that way too, then our wwwroot becomes really analogue of bin folder that we never want in source control. As you mentioned the bundling which is a good idea to have, I was wondering if you can help with the bundling the css. It's described all over how to bundle html, but bundling css I cannot find at all (we can't use ordinary css file bundle, since angular needs to process them). Have made a separate question stackoverflow.com/questions/40283535/… but did not get an answer there.
0

I don't feel gulp as a helpfull tool, so don't use it in my template(ng2+material+asp.net core). but need to remember to run "npm start" to compile any ng2 changes before run "dotnet run".

here is my solution template you can try: https://github.com/Longfld/ASPNETCoreAngular2

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.