Syntax Error in Angular App: Unexpected token <

Question

I have an Angular app which runs perfectly in my local and production environment.. After a tiny change I made, I ran the app locally and it works fine.. Then I built the pr

Answer 1

I had the same issue, very irritating. I tried several of the solutions found here, but none worked.

Adding the following in the Application Settings blade of the application in the Azure portal did the trick -

App Setting Name: WEBSITE_NODE_DEFAULT_VERSION Value: 6.9.1

> Before and after - excerpts from the deployment log.

remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 0.10.40.
remote: Selected npm version 1.4.28


remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 6.9.1.
remote: Selected npm version 3.10.8

Answer 2

.NET Core solution if you use SpaStaticFile service collection extension and API project for example.

Base href: /

// ConfigureServices
// Correct RootPath to your angular app build, based on angular.json prop
services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "App/dist";
});

// Configure
// In order to serve files
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
    Path.Combine(Directory.GetCurrentDirectory(), "App", "dist")),
    RequestPath = ""
});

Answer 3

I had the same problem and realized that I had changed the app.use(express.static(static folder)) statement after my last deploy causing this same unexpected token < error.

Make sure that your app.use(express.static(static folder)) statement contains the appropriate static folder where your js and css files are located and relative to where you are running node.

If you are using Angular and precompiling (ng build --prod) your front-end Angular code into a dist folder containing these files and not putting your back-end node files in the same folder (e.g a separate backend), then you may need to include the correct path as well.

For my example, I have my precompiled (ng build --prod) Angular files in /dist right off the project directory. Note that I also changed angular.json to be "outputPath": "dist" prior to precompiling to ensure this is where the precompiled Angular code would go. My server.js file that just starts the node server is at the project root, but my app.js file that contains the app.use(express.static(static folder)) statement and all the rest of my back-end node code is in a folder called /backend. The following statements both work for me in this case to correctly find the js and css files and eliminate the unexpected token < error:

  app.use(express.static(path.join('dist')));

or

  app.use(express.static(path.join(__dirname, '../dist')));

Both statements appropriately direct node to look for the static js and css files in the /dist folder.

Answer 4

You can try change the base tag from <base href="/"> to <base href="/project-app/"> inside index.html file.

Answer 5

With a little change in the .htaccess file i managed to fixed this problem.

I changed some lines from https://angular.io/guide/deployment#fallback to the following:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html

Answer 6

I found this to error to be a broad instance of many possible errors. In our application that was using Jhipster generated project, We added google analytics in the index.html. We also tried matomo analytics. Inside the index.html we have script tags as well.

The error was that someone commented out a line of code in our google analytics snippet.

here is an example of the code where the error lived:

<script>
        (function (b, o, i, l, e, r) {
            b.GoogleAnalyticsObject = l;
            b[l] || (b[l] =
                function () {
                    (b[l].q = b[l].q || []).push(arguments)
                });
            b[l].l = +new Date;
            e = o.createElement(i);
            r = o.getElementsByTagName(i)[0];
            e.src = '//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e, r)
        }(window, document, 'script', 'ga'));
        ga('create', '123123'); <! --
        ga('send', 'pageview');
        -->

    </script>

Notice the last three lines where there was <! --. That cause the error for us.

In index.html script tag, to comment out a line we use \\ double back slash. Someone may have attempted to comment this line out using <!-- --> .

This is tricky cause it could have been anywhere.
But its always a good place to start in the index.html

Hope this helps a little.