Injecting file with inject results in copying endtag

[jrrewers]

Hi,
in my index.html I have:

<!-- inject:./themes/light/src/partials/header.html -->
<!-- endinject -->

in partials/header.html I have:

<!-- inject:./themes/light/src/components/component1.html -->
<!-- endinject -->

In my gulpfile I inject files in this way:

injectFile =  function (name, component = false) {
        let type;
        component ? type = 'components' : type = 'partials';
        return inject(gulp.src(`./themes/light/src/${type}/${name}.html`), {
            starttag: `<!-- inject:./themes/light/src/${type}/${name}.html -->`,
            transform: function (filePath, file) {
                return file.contents.toString('utf8');
            }
        })
    }

gulp.task('compileLayoutHTML', ['compileHeaderComponents'], () => {
    return gulp.src('./index.html'dex)
        .pipe(injectFile('header'))
        .pipe(gulp.dest('./'));
});

gulp.task('compileHeaderComponents', () => {
    return gulp.src(headerPartial)
        .pipe(injectFile('component1', true))
        .pipe(gulp.dest(`./themes/light/src/partials`))
});

Everything is working as expected, expect I end up with multiple endtags in index.html:

<!-- inject:./themes/light/src/partials/header.html -->
<p>header</p>

<!-- inject:./themes/light/src/components/component1.html -->
<span>component 1</span>
<!-- endinject -->
<!-- endinject -->
<!-- endinject -->
<!-- endinject -->
<!-- endinject -->
<!-- endinject -->

I watch components/ and partials/ for changes and then recompile the whole thing (firstly partials and then index). Every change in component adds 2 new endtags in index.hml. Is there any way I can avoid it?