Angular 6 SyntaxError : expected expression, 得到 '<

Question

我在一个 Angular 网站上工作。

这是我的生产 package.json:

"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"
  }

我决定在我的测试服务器上迁移到 ng6:

"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"
  }

由于我做了这些更改，因此在任何新更改后都会出错(在 Firefox 上，但在 chrome 上):

SyntaxError: expected expression, got '<  main.<hash>.js:1

查看文件后，似乎 main..js 返回给我 index.html (所以我明白为什么它会提示)

举个例子:

在 Vn :我在 index.html 中引用了 main.c26c44b8b53d610233a3.js。

我正在更改我的 ts 文件。重建并推送我的更改。

在 Vn+1 :我应该在 index.html 中引用 main.a6b91500af09e35296c4.js

我重新打开浏览器，出现错误:

SyntaxError: expected expression, got '<  main.c26c44b8b53d610233a3.js:1

当我查看 index.html 时，我仍然引用了 main.c26c44b8b53d610233a3.js。

然后当我刷新时，页面显示良好(因为采用了新的散列)

有关信息我的:

<base href="/">

我从未改变我的构建机制。我总是跑:

ng build --prod && sw-precache --root=dist --config=precache-config.js

你知道为什么我现在收到这个错误吗？我从来没有在 angular 5 中遇到过这个错误。

提前致谢

Edit: This is not from time to time. In fact it concerns any changes I am doing on the js

问候

Answer 1

我终于找到了问题的路线原因。

由于我迁移到 angular 6，我的应用程序包现在是 2.97 MB，超过了 sw-precache 默认值 (2.1) 的最大值

我在我的构建日志中发现:

Skipping static resource "dist/main.fd245775d6e1690d968f.js" (2.97 MB) - max size is 2.1 MB

这导致我们让浏览器处理缓存。

要解决此问题，只需在预缓存配置中添加以下行即可解决问题:

maximumFileSizeToCacheInBytes: 10485760,