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 was facing this issue because I had generated the components but the routing was not proper or had not done with routing, so I think any of you gets this error first of all, check have you left something incomplete.

For me it was because of routing.

Answer 2

I have a webapi project and angular, after trying different ways, following resolved the redirection issue for me

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        //For angular url rewriting
        app.Use(async (context, next) =>
        {
            await next();
            if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
            {
                context.Request.Path = "/index.html";
                await next();
            }
        })
        .UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new List<string> { "index.html" } })
        .UseStaticFiles();

        app.UseAuthentication();

        app.UseMvc();
    }

Answer 3

I had the same issue:

1) I ran the command

ng build --aot --prod

2) Everything compiled without an error

3) I deleted all the files on the server and copied it all across via FTP(FileZilla) to a windows Azure server

4) Sometimes I get the error

Unexpected token <

and other-times not

Yesterday I noticed that the main[hash].js was missing on the server and that Filezilla did not give me an error copying it.

I then tried copying only that file.It did not work. When I removed the hash part from the filename it copies without a problem.

Work-a-round

Run:

ng  build --aot --prod --output-hashing none

Which works every-time.

So either Filezilla or Windows Server does not allow filenames with a specific length or it does not like certain hashes.

Answer 4

I have tried below which is worked for me.

Here

The HTML <base href="xyz"/> specifies a base path for accessing relative URLs to assets such as images, scripts, and style sheets.

For example, given the <base href="/myApp/">, if your app wanted to access css file from the URL such as assets/css/styles.css, it will goes into a server request for myApp/assets/css/styles.css

I have deployed my angular build on Xampp server locally in below two way:

1. xampp -> htdocs -> "build files" (including assets, .htaccess, index.html, etc.)
2. xampp -> htdocs -> myApp -> "build files" (including assets, .htaccess, index.html, etc.)

For 1.

Now, I wanted my browser to access localhost:80/assets/css/styles.css, and here our assets folder is in root level, thus for access the css we have to put <base href="./"> which access assets folder from root level.

URL Will goes to : localhost:80/assets/css/styles.css

For 2.

i wanted my browser to access localhost:80/myApp/assets/css/styles.css, so here our assets folder is in root level, thus for access the css we have to put <base href="/myApp/"> which access assets folder from inside the myApp.

URL Will goes to : localhost:80/myApp/assets/css/styles.css

Answer 5

Judging by the number of answers, this issue can show up for a host of reasons.

I'll add mine incase it helps others. In my case, I was trying to directly hit a url that I wanted to forward back to index.html and let Angular handle it.

So if I went to http://example.com/some-angular-route/12345

In the network tab, I noticed that it was serving the scripts with the angular route in the url (http://example.com/some-angular-route/runtime.js)

Naturally, since nginx couldn't find /some-angular-route/runtime.js, it fell back to serve to index.html since I set try_files (in the nginx config) to test the $uri first and if couldn't find it, serve index.html. So essentially:

• index.html has a script tag that tries to load http://example.com/some-angular-route/runtime.js
• fallback in nginx config serves index.html when it can't resolve the file
• contents of runtime.js are now same as index.html which starts with <html>
• Since that isn't valid js, you get Uncaught SyntaxError: Unexpected token <

So how do we get /some-angular-route/ out of the url for runtime.js? We have to make sure you have the base-href set to /. You can do this from the cli with the flag --base-href=/

That flag will add in your head tag of index.html and will force the browser to resolve all scripts from the root of the site. You can be on a url that includes some-angular-route but load a file like runtime.js (which is a relative url) from /.

Answer 6

node server : server.js

const express = require('express');
const app = express();
const path = require('path');
const port = process.env.PORT || 3000;
const pathDeploy = path.join(__dirname, 'dist', 'oursurplus');
app.use(express.static(pth));

app.listen(port, () => {
    console.log(`running on port ${port}`);
});

app.get('/*', (req, res) => {
    res.sendFile(path.join(pathDeploy, 'index.html'));
});

package.json must have the script:

scripts: {
    "build": "ng build --prod --baseHref=\"./\""
}