4

I can't understand where to place my ts and scss files? wwwroot folder is for static files, but ts and scss files are compiled. Should I hold similar folder structure in wwwroot and outside it and then copy css and js files to wwwroot?

For example: enter image description here

Wouldn't it be too complicated? It seems it's very hard to maintain and navigate.

enter image description here

3
  • 1
    use angular-cli do a prod build, copy the contents of dist folder in wwwroot and you are good to go. Commented Jul 25, 2016 at 20:23
  • 1
    If you are using your own build system, then there should be an dist/output folder in that system. you need to copy that. Angular does not need ts and scss files Commented Jul 25, 2016 at 20:24
  • Yes, I agree. It's just in every tutorial I've seen before. Install angular2 using Bower and then copy the library to lib folder. I guess I should discovery this question deeper. Thanks. Commented Jul 26, 2016 at 6:29

1 Answer 1

2

Should I hold similar folder structure in wwwroot and outside it and then copy css and js files to wwwroot? [sic]

Yes. That is a good idea.

Once you have a handle on that, do more complicated tasks like bundling and minification.

Your question has many, many possible answers. That said, your screenshots show a gulpfile.js and you can use gulp to do the following:

  1. build your TypeScript and put the *.js output into wwwroot.
  2. build your SCSS and put the *.css output into wwwroot.

Here are some resources to get you started.

Here is an example gulpfile.js for you to modify based on your specific needs.

'use strict';

var gulp = require('gulp');
var tsb = require('gulp-tsb');
var sass = require('gulp-sass');

// create and keep compiler 
var compilation = tsb.create({
    target: 'es5'
});

gulp.task('tsc', function() {
    return gulp.src('./scripts/**/*.ts')
        .pipe(compilation()) // <- new compilation 
        .pipe(gulp.dest('./wwwroot/appScripts'));
});

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./wwwroot/css'));
});

You will need to have some understanding of npm and gulp. Basically, from the command line you will run the following gulp tasks.

gulp tsc     // to build typescript
gulp sass    // to build sass

They will find your *.ts and *.scss files, build them, and save them into the specified destinations.

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

3 Comments

Thanks for the answer. I tried to use both gulp and npm. It's ok, I don't have questions about it. It's just about identical folder structures. Please, see update of the question.
Have a look at github.com/sirajc/angular2-starter - It uses gulp, ts and sass - This will help you get started with what you want to achieve
@shkiper The question about how to setup your folder structure is really subjective. siraj provides a good suggestion: look at canonical samples, then emulate one that you like.

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.