angular-cli-ghpages: Deployed site: Uncaught SyntaxError: Unexpected token <

After building the site with:

ng build --prod --base-href "https;//<username>.github.io/<reponame>/

I can run the site with no issues on a local server.

However, after publishing via ngh, the online site just gives the following error 4 times:

SyntaxError: Unexpected token < (index):1

No other errors or information is given, so I have no idea what to do.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 18 (5 by maintainers)

Most upvoted comments

I was facing the same issue .This is due the creation of project directory inside the dist folder which is not being pointed by index.html. Fixed it by changing the base tag from <base href="/"> to <base href="/project-app/"> inside index.html file.

From my understanding, github pages require a _config.yml file, so the project structure I uploaded had to look like the following:

| assets/
+   | files
| _config.yml
| index.html
| inline/main/polyfills/styles/vendor.js

Until I had _config.yml, the site would constantly fail with the error in the original post. It worked as soon as the file was present.

Inside _config.yml I specified the base URL: baseurl: /ng2-parallaxscroll

Here’s the full project, check the origin/docs branch for the website source, and the gh-pages for the built output: https://github.com/TyrantWave/ng2-parallaxscroll

To add the _config.yml to the output, I added it to the angular.cli.json assets folder:

  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "_config.yml"
      ],
  ...
  ]

Ok, so the issue was by default angular doesn’t have the _config.yml file, which took a lot of digging around to find out was needed.

@JohannesHoppe I have resolved the issue. I moved app.listen(process.env.PORT || 8080); before all definitions of app.use and routes.

Which config file? Could you explain your solution in detail?! 😄

I bet this is related to you heroku deployment. Did you added the static pages buildpack? (https://github.com/heroku/heroku-buildpack-static). You could also go for a full SSR solution (express, see https://angular.io/guide/universal) This is what we do for https://angular-buch.com and https://angular.schule . Heroku automatically adds the buildpack for node.js.

I was facing the same issue .This is due the creation of project directory inside the dist folder which is not being pointed by index.html. Fixed it by changing the base tag from <base href="/"> to <base href="/project-app/"> inside index.html file.

This worked for me. Thanks

I am having this same issue with an app hosted on heroku. Works perfectly on my local system but remote builds on heroku throws the same error. A look at the generated .js files (vendor.hash.js, main.hash.js, inline.hash.js, scripts.hash.js & polyfills.hash.js) in the console shows HTML elements in the generated files.