Heroku error - MIME type ('text/html') is not executable

[kieranfraser]

I'm getting an error when trying to deploy the todo app to heroku. I've followed the wiki instructions, and the deployment is successful however the app does not show and the following error is in the console:

Refused to execute script from 'https://sonard.herokuapp.com/config.js?rev=@@hash' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. zone.js?rev=@@hash:461 Unhandled Promise rejection: SyntaxError: Unexpected token < Evaluating https://sonard.herokuapp.com/index.js Error loading https://sonard.herokuapp.com/index.js ; Zone: <root> ; Task: Promise.then ; Value: Error: SyntaxError: Unexpected token <(…)consoleError @ zone.js?rev=@@hash:461 zone.js?rev=@@hash:463 Error: Uncaught (in promise): Error: SyntaxError: Unexpected token <(…)consoleError @ zone.js?rev=@@hash:463

Any help would be much appreciated!

[ericmdantas]

Hello, @kieranfraser. That's a weird error.

Can you please share the content of .yo-rc.json - that's in the root of your app?

[kieranfraser]

Of course:

{ "generator-ng-fullstack": { "username": "kieranfraser", "appName": "sonardeezer", "stack": "fullstack", "server": "node", "client": "ng2", "transpilerServer": "typescript", "secure": false, "differentStaticServer": false } }

Also, it is working fine when I run locally, it's just the heroku deployment. I don't have huge experience with heroku, but I have spent a day on this and haven't made any progress or found any solutions anywhere else.

[ericmdantas]

Do you happen to have the config.js file in client/dist?

[kieranfraser]

I do indeed, is that correct? It was structured like that from the get go.

[ericmdantas]

Yup, that's correct.

I'm trying to see what could go wrong.

PS: by the way, are you trying to publish the todo app, or you already made it your own? If you changed, could you share the <scripts> imports in your index.html?

[kieranfraser]

Actually, did you mean the structure in the browser source? so config.js is in the client/dev/todo directory structure in Webstorm.. but in the browser:

Thanks for the help!

[ericmdantas]

So, client/dist/config.js doesn't exist?

[kieranfraser]

Yes, seems so.

[ericmdantas]

Alright, I see what might've happened.

Looks like you didn't run npm run build-dist - which creates the client/dist folder with the optimized files.

Here's what we have to do:

• Since we've got https://github.com/ericmdantas/generator-ng-fullstack/issues/101 going on, you'll have to go to tasks/client/build.js and comment the tasks.CLIENT_UNIT_TEST, line, because that'll fail and kill the build.
• After doing that, run npm run build-dist.
• Check if the dist folder is created under client.
• Commit/push the modifications to heroku.
• It should be fine now.

Let me know how it goes.

[kieranfraser]

Okay so I followed your instructions, here is the deployed source (made a fresh deployment):

However there is a new error - "Template parse error":

[ericmdantas]

Hmm, that's an error with the htmlmin, it seems. It's turning ngFormModel to ngformmodel. Care to capitalize by hand an try again?

You'll also have to do that for *ngfor, make it *ngFor.

[ericmdantas]

Actually, better yet.

Go to tasks/client/build_html.js and change the task to:

.pipe(htmlmin({collapseWhitespace: true, caseSensitive: true}))

So, it's:

import gulp from 'gulp';
import htmlmin from 'gulp-htmlmin';
import rev from 'gulp-rev-append';
import {path, tasks} from './const';

const VIEWS = path.DIST + '**/*.html';

gulp.task(tasks.CLIENT_VIEWS_DIST, () => {
  return gulp.src(VIEWS, {base: path.DIST})
             .pipe(rev())
             .pipe(htmlmin({collapseWhitespace: true, caseSensitive: true}))
             .pipe(gulp.dest(path.DIST));
});

I'll release a version with the fix.

[ericmdantas]

1.8.6 released.

[kieranfraser]

That's it! made the change to tasks/client/build_html.js and it's all working. Thanks for your help, very quick, cheers!

[ericmdantas]

Awesome!

Thanks for pointing it out and sticking by. I'll update the wiki on the heroku deployment.