Angular 6 PWA问题求助：Service Worker未安装及Manifest报错

1. Is ng new cx --service-worker failing to install Service Worker a bug? #

In Angular CLI 6.x, the --service-worker flag was designed to configure your project for Service Worker support (like setting serviceWorker: true in angular.json and adding ServiceWorkerModule registration to app.module.ts), but it did not automatically install the @angular/service-worker dependency package. This was more of a design oversight in early CLI 6 versions rather than a critical bug, but it definitely caused confusion for many users.

To fix this, you could either:

• Manually install the required dependency:

  npm install @angular/service-worker --save
  

• Or use the more reliable ng add @angular/pwa command (which you did later) — this command handles dependency installation, Service Worker registration, manifest creation, and icon generation all in one go, and it’s the official recommended way to add PWA support to an Angular project.

2. Resolving the Manifest.json Unexpected error line 1 col 1, unexpected token issue #

Your manifest.json content looks structurally valid (even in its minified form), so this error is almost always caused by non-content issues. Here are the most common fixes:

• Remove UTF-8 BOM from the file: If your manifest.json was saved with a UTF-8 Byte Order Mark, the browser will interpret the invisible leading character as an invalid token. Open the file in an editor like VS Code, change the encoding to UTF-8 without BOM, then re-save it.
• Check the server’s Content-Type header: When your dev server serves manifest.json, it should return a Content-Type header of application/manifest+json or application/json. You can verify this in your browser’s DevTools > Network tab — look for the manifest.json request and check its Response Headers. For Angular CLI’s default dev server, this is usually set correctly, but custom server configurations might need adjustment.
• Recreate the manifest file: Sometimes invisible special characters can sneak into the file during saving. Try creating a brand new manifest.json file, paste your valid JSON content into it, and save it again. You can also test your JSON content directly in the browser console with JSON.parse('{ "name": "cx", ... }') to confirm it’s valid.

As a quick check, try visiting http://localhost:4200/manifest.json directly in your browser — if you see any garbled text or extra characters at the start, that’s likely the culprit.

内容的提问来源于stack exchange，提问作者Vik