CODEWITHSUNDEEP
angularjsexpressmeangzip
anon
anon

Reputation: 2343

Browser isn't reading gzipped file - MEAN app

I have a gulpfile that gzips my js:

gulp.task('angular', function() {
  return gulp.src(['public/app/*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(ngAnnotate())
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(gzip({ append: true}))            // Relevant line here
    .pipe(gulp.dest('public/app/dist'));
});

In my index.html file:

  <script src="app/dist/app.js.gz"></script>

When I comment out the line that does the gzipping, I don't have a problem. With it included, however, Angular outputs a message in the Chrome console:

Uncaught SyntaxError: Unexpected token ILLEGAL

The gzipped file has characters that appear to be diamonds, so maybe it wasn't gzipped properly and the browser isn't reading the characters.

Also one other issue, is that you can use compress with express 4.0. I have added it into my server file:

var compress = require('compression');

...

app.use(compress());                       // Relevant line here
app.use(bodyParser.json({limit: '1mb'}));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
app.use(bodyParser.json());

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
    next();
});

I don't know if this is in the correct spot and if this is the line of code that allows the browser to read .gz files.

Upvotes: 0

Views: 533

Answers (1)

7zark7
7zark7

Reputation: 10145

You shouldn't need to gzip both in gulp and in Express - 

app.use(compress());

would suffice for your static assets.

(Doesn't explain your exact error but sounds as if the browser is receiving a double gzipped file, and hence compressed output that it cannot read)

Upvotes: 1

Related Questions