title: Avoid using document.write() occurs when trying to load a dashboard page in Chrome
body: <p>So I have been stuck on this problem for longer than i'd care to admit but as a Angular newbie I am completely baffled.</p>
  
  <p>So I am following some online tutorials in order to implement Gulp into an application I am working on and whenever I run the Gulp tasks I get an error in Chrome which states: </p>
  
  <blockquote>
    <p><strong>"[Violation] Avoid using document.write().(anonymous) @ (index):13"</strong></p>
  </blockquote>
  
  <p>and: </p>
  
  <blockquote>
    <p><strong>//\/script>".replace("HOST",
    location.hostname)); //]]></strong></p>
  </blockquote>
  
  <p>I am even more confused as the index.html doesn't actually contain a document.write reference before execution. Also despite mostly following a tutorial when integrating Gulp I cannot seem to have the CSS background changes reflected on screen, could this be related to the previously mentioned error?</p>
  
  <p><strong>index.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"&gt;
      &lt;title&gt;SmartSystemOverviewWeb&lt;/title&gt;
      &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;link href="app/css/styles.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;sso-dashboard&gt;  
      Loading...    
    &lt;i class="fa fa-spinner fa-spin"&gt;&lt;/i&gt;
  &lt;/sso-dashboard&gt;
  
    &lt;script type="text/typescript" src="app/vendor.ts"&gt;&lt;/script&gt;
    &lt;!-- &lt;script src="app/app.component.js"&gt;&lt;/script&gt; --&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>gulpfile.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var gulp = require('gulp');
  var sass = require('gulp-sass');
  var sourcemaps = require('gulp-sourcemaps');
  var tsc = require('gulp-typescript');
  var tslint = require('gulp-tslint');
  var tsProject = tsc.createProject('tsconfig.json');
  var config = require('./gulp.config')();
  
  var browserSync = require('browser-sync').create();
  var superstatic = require('superstatic');
  var useref = require('gulp-useref');
  var uglify = require('gulp-uglify');
  var gulpIf = require('gulp-if');
  var minifyCSS = require('gulp-minify-css');
  var imagemin = require('gulp-imagemin');
  var cache = require('gulp-cache');
  var del = require('del');
  var runSequence = require('run-sequence');
  
  /*
  -- TOP LEVEL FUNCTIONS --
  gulp.task - Define tasks
  gulp.src - point to files to use
  gulp.dest - point to folder to output
  gulp.watch - watch files + folders for changes
  */
  
  // Logs Message
  gulp.task('message', function(){
      return console.log('Gulp is running...');
  });
  
  gulp.task('ts-lint', function() {
      console.log('ts-lint task running...');
      return gulp.src(config.allTs)
          .pipe(tslint())
          .pipe(tslint({
              formatter: "verbose"
          }))
          // .pipe(tslint.report("verbose"))
  })
  
  gulp.task('compile-ts', function() {
      console.log('compile-ts task running...');
      var sourceTsFiles = [
          config.allTs,
          config.typings
      ];
  
      var tsResult = gulp
      .src(sourceTsFiles)
      .pipe(sourcemaps.init())
      .pipe(tsProject())
  
      return tsResult.js
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(config.tsOutputPath));
  });
  
  gulp.task('sass', function(){
      console.log('sass is running...');
      // return gulp.src('src/app/styles.scss')
      return gulp.src('src/app/**/*.scss')
        .pipe(sass()) // Using gulp-sass
        .pipe(gulp.dest('src/app/css'))
        .pipe(browserSync.reload({
          stream: true
        }))
      });
  
  gulp.task('browserSync', function() {
      console.log('browserSync is running...');
      
      browserSync.init({
          // port: 4200,
          // file: ['index.html', '**/*.js'],
          // injectChanges: true,
          // logFileChanges: true,
          // logLevel: 'verbose',
          // notify: true,
          // reloadDelay: 0,
        server: {
          baseDir: 'src',
          middleware: superstatic({debug: false})
        },
      })
  })
  
  gulp.task('watch', ['browserSync', 'sass'], function(){
      gulp.watch('src/app/**/*.scss', ['sass']); 
      gulp.watch('src/app/component/**/*.scss', ['sass']); 
      // Reloads the browser whenever HTML or JS files change
      gulp.watch('src/app/**/*.html', browserSync.reload);
      gulp.watch('src/app/component/**/*.html', browserSync.reload);
      gulp.watch('src/app/**/*.js', browserSync.reload);
      gulp.watch('src/app/component/**/*.js', browserSync.reload);    
      gulp.watch('src/*.html', browserSync.reload);    
  })
  
  gulp.task('useref', function() {
   var assets = useref.assets();
  
   return gulp.src('app/*.html')
    .pipe(assets)
    .pipe(gulpIf('*.css', minifyCSS()))
    .pipe(gulpIf('*.js', uglify()))
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(gulp.dest('dist'))
  });
  
  gulp.task('images', function() {
   return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
   .pipe(cache(imagemin( {
    interlaced: true
   })))
   .pipe(gulp.dest('dist/images'))
  });
  
  gulp.task('fonts', function() {
   return gulp.src('app/fonts/**/*')
   .pipe(gulp.dest('dist/fonts'))
  });
  
  // Cleaning
  gulp.task('clean', function(callback) {
   del('dist');
   return cache.clearAll(callback);
  })
  
  
  gulp.task('clean:dist', function(callback) {
   del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
  });
  
  // Build Sequences
  gulp.task('build', function (callback) {
   runSequence('clean:dist',
    ['sass', 'useref', 'images', 'fonts'],
    callback
    )
  })
  
  gulp.task('default', function (callback) {
   runSequence(['message', 'ts-lint', 'sass', 'browserSync', 'watch'],
    callback
    )
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>styles.css</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.testing {
    width: 71.42857%; }
  
  .head {
    background: red; }
  
  .body {
    background: #177794; }
  
  .html {
    background: green; }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any tips or advice to solve these issues would be greatly appreciated! </p>
  
  <p>Thanks in advance!</p>