Non components ts files not generated

[vlio20]

Hi, I have the following gulp file:

const gulp = require('gulp');
const inlineTemplate = require('gulp-inline-ng2-template');
const tsc = require('gulp-typescript');
const less = require('less');
const sourcemaps = require('gulp-sourcemaps');
const merge = require('merge2');
const tsProject1 = tsc.createProject('tsconfig.json');
const tsProject2 = tsc.createProject('tsconfig.json');

const pluginOptions = {
  base: './src/app/',
  useRelativePaths: true,
  styleProcessor: (path, ext, file, cb) => {
    less.render(file, (e, out) => {
      cb(null, out.css);
    });
  }
};

gulp.task('build', () => {
  const src = gulp.src(['./src/**/*.ts', '!./src/**/*.spec.ts']);
  const dst = gulp.dest('./bin');

  const jsMap = src
    .pipe(inlineTemplate(pluginOptions))
    .pipe(tsProject1())
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('.'));

  const dts = src.pipe(tsProject2());

  return merge([
    jsMap.pipe(dst),   // writes .js and .map files
    dts.dts.pipe(dst)  // writes .d.ts files
  ]);
});

The problem is that the task doesn't generates js files for ts files which are not components (for components - js files are generated). Note that .d.ts file are generated (for both components and not component files) By removing .pipe(inlineTemplate(pluginOptions)) every thing is compiled with js files.

Is there something wrong with my configuration?

[gregjacobs]

Hey @vlio20,

Not sure what is wrong from looking at your config right off the bat. I did spot one issue with sourcemaps where the .pipe(sourcemaps.init()) call needs to be before .pipe(tsProject1()), but that's probably not the cause of your issue.

We have this working fine on our project though where all .ts files are compiled just fine after being piped through inlineTemplate (components, services, etc.), so I don't think it's an issue with gulp-inline-ng2-templates itself.

Our configuration is a little different with how gulp-typescript is used though. Using the latest version of gulp-typescript, this is recommended set up:

const tsProject = tsc.createProject('tsconfig.json');

const pluginOptions = {
  base: './src/app/',
  useRelativePaths: true,
  styleProcessor: (path, ext, file, cb) => {
    less.render(file, (e, out) => {
      cb(null, out.css);
    });
  }
};

gulp.task('build', () => {
  const tsResult = gulp.src(['./src/**/*.ts', '!./src/**/*.spec.ts'])
    .pipe(inlineTemplate(pluginOptions))
    .pipe(sourcemaps.init())  // note that sourcemaps.init() comes before tsProject()
    .pipe(tsProject())
    .pipe(sourcemaps.write('.'));

  return merge([
    tsResult.js.pipe(gulp.dest('./bin')),   // writes .js and .map files
    tsResult.dts.pipe(gulp.dest('./bin'))   // writes .d.ts files
  ]);
});

This way you only need one tsProject as well.

I'm not sure that the way you used streams was correct before. I don't know if you can share a writable stream like you did (gulp.dest()), and have it emit its 'finish' event correctly. Give the above setup a try instead - it might solve your issue right off the bat.

Otherwise, some possible points to look at:

1. Try adding a console.log() in your less.render() callback for e, and make sure no errors are generated.

   less.render(file, (e, out) => {
    console.log(e);  // I should always be either undefined or null
    cb(null, out.css);
   });

   If you see something there, you know something is wrong. May also want to console.log() the file in that function too, to make sure it's not trying to process any non-component files by accident.

2. Try commenting out your styleProcessor entirely and see if that helps. That may help narrow down the problem.

3. Add a transform stream right after your pipe to inlineTemplates() for purposes of seeing the files / output that are coming out of it. Here you can determine if all of the files you expect to be coming out of inlineTemplate() are in fact coming out of inlineTemplate() (or if something is going wrong inside inlineTemplate() itself). Here's an example using through2:

   const tsResult = gulp.src(['./src/**/*.ts', '!./src/**/*.spec.ts'])
      .pipe(inlineTemplate(pluginOptions))
      .pipe(through2.obj(function(file, enc, callback) {
          console.log('File: ', file.path);
          console.log('Contents: ', file.contents.toString());
          callback(null, file);
      } ) )
      // ...

4. Do any of your non-component files have the words 'templateUrl' or 'styleUrls' in them by any chance?

[vlio20]

@gregjacobs, thanks for the elaborate response, please take a look at this repo: https://github.com/vlio20/ng2-date-picker. Maybe it would be easier.
I have tried your configuration but it seems like tsResult.js & tsResult.dts are undefined. I am getting this error:

TypeError: Cannot read property 'pipe' of undefined
    at Gulp.<anonymous> (/Users/vioffe/personal/ng2-date-picker/gulpfile.js:27:16)

[vlio20]

ok, after playing with gulp here is what worked for me:

const gulp = require('gulp');
const inlineTemplate = require('gulp-inline-ng2-template');
const tsc = require('gulp-typescript');
const less = require('less');
const sourcemaps = require('gulp-sourcemaps');
const merge = require('merge2');
const tsProject = tsc.createProject('tsconfig.json');

const pluginOptions = {
  base: './src/app/',
  useRelativePaths: true,
  styleProcessor: (path, ext, file, cb) => {
    less.render(file, (e, out) => {
      cb(null, out.css);
    });
  }
};

gulp.task('build', () => {
  const tsResult = gulp.src(['./src/**/*.ts', '!./src/**/*.spec.ts'])
    .pipe(sourcemaps.init())
    .pipe(inlineTemplate(pluginOptions))

    .pipe(tsProject());

  return merge([
    tsResult.js
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('./bin')),
    tsResult.dts
      .pipe(gulp.dest('./bin'))
  ]);
});

Thanks for the help

[gregjacobs]

Hey @vlio20. My bad, I had you put sourcemaps.init() in the right place, but then I put sourcemaps.write() in the wrong place! Sorry about that!

Glad you got it working though 👍