title: Angular 6 SyntaxError: expected expression, got '<
body: <p>I am working on an angular website.</p>
  
  <p>Here is my production package.json:</p>
  
  <pre><code>"dependencies": {
      "@angular/animations": "^5.0.2",
      "@angular/cdk": "^5.1.0",
      "@angular/common": "^5.0.2",
      "@angular/compiler": "^5.0.2",
      "@angular/core": "^5.0.2",
      "@angular/flex-layout": "^2.0.0-beta.12",
      "@angular/forms": "^5.0.2",
      "@angular/http": "^5.0.2",
      "@angular/material": "^5.1.0",
      "@angular/platform-browser": "^5.0.2",
      "@angular/platform-browser-dynamic": "^5.0.2",
      "@angular/platform-server": "^5.0.2",
      "@angular/router": "^5.0.2",
      "@ng-bootstrap/ng-bootstrap": "^1.0.0",
      "@ngx-translate/core": "^9.1.1",
      "@ngx-translate/http-loader": "^2.0.1",
      "angular2-cookie-law": "^1.4.0",
      "angular2-qrcode": "^2.0.1",
      "classlist.js": "^1.1.20150312",
      "core-js": "^2.5.1",
      "ng-recaptcha": "^3.0.3",
      "ng2-ui-auth": "^8.0.1",
      "ngx-image-cropper": "^0.1.24",
      "ngx-img-cropper": "^0.9.7",
      "ngx-slider": "0.0.5",
      "rxjs": "^5.5.2",
      "web-animations-js": "^2.3.1",
      "zone.js": "^0.8.18",
      "ngx-device-detector" : "1.2.2"
    },
    "devDependencies": {
      "@angular/cli": "^1.5.2",
      "@angular/compiler-cli": "^5.0.2",
      "@angular/language-service": "^5.0.2",
      "@types/jasmine": "2.8.2",
      "@types/node": "~8.0.53",
      "codelyzer": "~4.0.1",
      "jasmine-core": "~2.8.0",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.3.0",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.2.0",
      "sw-precache": "^5.2.0",
      "sw-precache-webpack-plugin": "^0.11.4",
      "ts-node": "~3.3.0",
      "tslint": "^5.8.0",
      "typescript": "~2.4.2"
    }
  </code></pre>
  
  <p>I decided to migrate to ng6 on my tests servers:</p>
  
  <pre><code>"dependencies": {
      "@angular/animations": "^6.1.10",
      "@angular/cdk": "^6.4.7",
      "@angular/common": "^6.1.10",
      "@angular/compiler": "^6.1.10",
      "@angular/core": "^6.1.10",
      "@angular/forms": "^6.1.10",
      "@angular/http": "^6.1.10",
      "@angular/material": "^6.4.7",
      "@angular/material-moment-adapter": "^6.4.7",
      "@angular/platform-browser": "^6.1.10",
      "@angular/platform-browser-dynamic": "^6.1.10",
      "@angular/platform-server": "^6.1.10",
      "@angular/router": "^6.1.10",
      "@ncstate/sat-popover": "^2.1.1",
      "@ngx-translate/core": "^10.0.2",
      "@ngx-translate/http-loader": "^3.0.1",
      "angular2-cookie-law": "^6.0.4",
      "angular2-qrcode": "^2.0.1",
      "classlist.js": "^1.1.20150312",
      "core-js": "^2.5.1",
      "moment": "^2.18.1",
      "ng-recaptcha": "^4.2.1",
      "ng2-ui-auth": "^9.0.1",
      "ngx-device-detector": "1.3.3",
      "ngx-file-drop": "^4.0.6",
      "ngx-image-cropper": "^1.2.2",
      "ngx-slider": "0.0.5",
      "rxjs": "6.0.0",
      "rxjs-compat": "^6.0.0",
      "web-animations-js": "^2.3.1",
      "zone.js": "^0.8.18"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.8.0",
      "@angular/cli": "^6.1.10",
      "@angular/compiler-cli": "^6.1.10",
      "@angular/language-service": "^6.1.10",
      "@types/jasmine": "2.8.2",
      "@types/node": "~8.0.53",
      "codelyzer": "~4.0.1",
      "jasmine-core": "~2.8.0",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.3.0",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.2.0",
      "sw-precache": "^5.2.0",
      "sw-precache-webpack-plugin": "^0.11.4",
      "ts-node": "~3.3.0",
      "tslint": "^5.8.0",
      "typescript": "^2.7.2"
    }
  </code></pre>
  
  <p>Since I did thoses changes I am getting error after any new changes (on firefox but as well on chrome): </p>
  
  <pre><code>SyntaxError: expected expression, got '&lt;  main.&lt;hash&gt;.js:1
  </code></pre>
  
  <p>After looking at the file it seems that  main..js is returning me the index.html (so I understand why it complains)</p>
  
  <p><strong>Let's take an example:</strong></p>
  
  <p><strong>At Vn</strong>: I have main.c26c44b8b53d610233a3.js referenced in the index.html.</p>
  
  <p>I am doing a change in my ts file. Rebuild and push my changes.</p>
  
  <p><strong>At Vn+1</strong>: I am supposed to have main.a6b91500af09e35296c4.js referenced in the index.html</p>
  
  <p>I reopen the browser and I am getting error:</p>
  
  <pre><code>SyntaxError: expected expression, got '&lt;  main.c26c44b8b53d610233a3.js:1
  </code></pre>
  
  <p>When I look at the index.html I have main.c26c44b8b53d610233a3.js still referenced.</p>
  
  <p>Then when I refresh, the page is well displayed (because new hash is taken)</p>
  
  <p>For information my:</p>
  
  <pre><code>&lt;base href="/"&gt;
  </code></pre>
  
  <p>I never changed my build mechanism. I always runned:</p>
  
  <pre><code>ng build --prod &amp;&amp; sw-precache --root=dist --config=precache-config.js
  </code></pre>
  
  <p>Do you have any idea why now I am getting this error ? I never got this error with angular 5.</p>
  
  <p>Thanks in advance</p>
  
  <blockquote>
    <p>Edit: This is not from time to time. In fact it concerns any changes I am doing on the js</p>
  </blockquote>
  
  <p>Regards</p>