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

After ng build go to dist/your project folder say 'something'. Then open the index.html file and change the base URL, which is by default.

If you put your project folder on nginx or apache then tour base URL should be

<base href="http://localhost/something/">

and in my case, version of Angular is: 7.1.4

Answer 2

I'm totally new to Angular so it may not help or at least seem obvious to a lot of you, but in my case it happened every time I reloaded a page that's not the root page, and it came from the fact that, in my index.html file, the base tag looked like this <base href="./">, I had to remove the . so it looks like this : <base href="/"> .

Answer 3

I was facing the same issue.

In my case, the main.bundle.js was missing. Copying that file again to the dist folder solved the issue.

One more change that I did was to change the following in the index.html file in the dist -

<base href=".">

To

<base href="/">

Answer 4

In my case it was the result of incorrect input of UTF-8 characters.

Syntax was:

<component [inputField]="Artikelns Mått"></component>

First it was solved by just replacing the å with a. But, thats not really a solution.

What solved it was adding '' around the text.

<component [inputField]="'Artikelns Mått'"></component>

Error:

Error: Template parse errors:
Parser Error: Unexpected token 'å' at column 11 in [Artikelns mått] in CadComponent@25:28 ("
    <div class="col-md-4">
        <lte-box>
            <lte-box-header [ERROR ->][headerTitle]="Artikelns mått"></lte-box-header>
            <lte-box-body>
                <table "): CadComponent@25:28
Parser Error: Lexer Error: Unexpected character [å] at column 12 in expression [Artikelns mått] at column 13 in [Artikelns mått] in CadComponent@25:28 ("
    <div class="col-md-4">
        <lte-box>
            <lte-box-header [ERROR ->][headerTitle]="Artikelns mått"></lte-box-header>
            <lte-box-body>
                <table "): CadComponent@25:28
    at SyntaxError.BaseError [as constructor] (webpack:///./@angular/compiler/src/facade/errors.js?:31:27) [<root>]
    at new SyntaxError (webpack:///./@angular/compiler/src/util.js?:163:16) [<root>]
    at TemplateParser.parse (webpack:///./@angular/compiler/src/template_parser/template_parser.js?:170:19) [<root>]
    at JitCompiler._compileTemplate (webpack:///./@angular/compiler/src/jit/compiler.js?:381:68) [<root>]
    at eval (webpack:///./@angular/compiler/src/jit/compiler.js?:264:62) [<root>]
    at Set.forEach (<anonymous>) [<root>]
    at JitCompiler._compileComponents (webpack:///./@angular/compiler/src/jit/compiler.js?:264:19) [<root>]
    at createResult (webpack:///./@angular/compiler/src/jit/compiler.js?:146:19) [<root>]
    at Zone.run (webpack:///./zone.js/dist/zone.js?:112:43) [<root> => <root>]
    at eval (webpack:///./zone.js/dist/zone.js?:534:57) [<root>]
    at Zone.runTask (webpack:///./zone.js/dist/zone.js?:150:47) [<root> => <root>]
    at drainMicroTaskQueue (webpack:///./zone.js/dist/zone.js?:432:35) [<root>]

Answer 5

In my case, I just had to do a 'hard refresh' of the page to clear its cache (using Chrome under Linux it's done by pressing ctrl + F5). After that, everything worked fine again.

Cheers,

Answer 6

Just add after of / the folder name of you project just like said Gerardo Tarragona.

Example:

/myProject

Regards