Angular-cli: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

[jrmcdona]

Versions

Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router
... service-worker

@angular/cli: 1.6.0-rc.2
@angular/language-service: 5.0.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0-rc.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Repro steps

When I run with "ng serve" which should be using web pack dev server in dev enviornment, it is trying to load the service worker file. I have tried adding both pieces of code below and neither work, the only thing that works is to comment this out and not run ServiceWorkerModule at all.

• ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
• environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : [],

Observed behavior

ERROR Error: Uncaught (in promise): TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
    at resolvePromise (zone.js:824)
    at eval (zone.js:746)
    at eval (zone.js:762)
    at ZoneDelegate.invoke (zone.js:392)
    at Object.onInvoke (core.js:4753)
    at ZoneDelegate.invoke (zone.js:391)
    at Zone.run (zone.js:142)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4744)
defaultErrorLogger @ core.js:1427
ErrorHandler.handleError @ core.js:1488
next @ core.js:5498
schedulerFn @ core.js:4339
SafeSubscriber.__tryOrUnsub @ Subscriber.js:239
SafeSubscriber.next @ Subscriber.js:186
Subscriber._next @ Subscriber.js:127
Subscriber.next @ Subscriber.js:91
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4319
(anonymous) @ core.js:4775
ZoneDelegate.invoke @ zone.js:392
Zone.run @ zone.js:142
NgZone.runOutsideAngular @ core.js:4701
onHandleError @ core.js:4775
ZoneDelegate.handleError @ zone.js:396
Zone.runGuarded @ zone.js:158
_loop_1 @ zone.js:702
api.microtaskDrainDone @ zone.js:711
drainMicroTaskQueue @ zone.js:610
Promise resolved (async)
scheduleMicroTask @ zone.js:585
ZoneDelegate.scheduleTask @ zone.js:414
onScheduleTask @ zone.js:301
ZoneDelegate.scheduleTask @ zone.js:405
Zone.scheduleTask @ zone.js:236
Zone.scheduleMicroTask @ zone.js:256
scheduleResolveOrReject @ zone.js:871
resolvePromise @ zone.js:819
(anonymous) @ zone.js:746
Promise rejected (async)
(anonymous) @ zone.js:1049
ZoneAwarePromise @ zone.js:890
Ctor.then @ zone.js:1048
resolvePromise @ zone.js:799
(anonymous) @ zone.js:873
ZoneDelegate.invokeTask @ zone.js:425
onInvokeTask @ core.js:4744
ZoneDelegate.invokeTask @ zone.js:424
Zone.runTask @ zone.js:192
drainMicroTaskQueue @ zone.js:602
Promise resolved (async)
scheduleMicroTask @ zone.js:585
ZoneDelegate.scheduleTask @ zone.js:414
Zone.scheduleTask @ zone.js:236
Zone.scheduleMicroTask @ zone.js:256
scheduleResolveOrReject @ zone.js:871
ZoneAwarePromise.then @ zone.js:981
PlatformRef.bootstrapModule @ core.js:5569
(anonymous) @ main.ts:11
../../../../../src/main.ts @ main.bundle.js:282
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:397
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1

Desired behavior

Expect to see running in localhost work and not try to load the service worker js file.

Mention any other details that might be useful (optional)

Package.json

{
  "name": "responder",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@angular/service-worker": "^5.0.0",
    "@ngrx/entity": "^4.1.1",
    "@ngrx/store": "^4.1.1",
    "@ngrx/store-devtools": "^4.1.1",
    "core-js": "^2.4.1",
    "moment": "^2.19.3",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.6.0-rc.2",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ngrx-store-freeze": "^0.2.0",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

[jrmcdona]

Ugh had production = true in my dev enviornment.ts file. Overlooked that!

[MrCroft]

Can this be reopened?

I've just came across this, trying to figure out WHY it isn't working.
Yes, I also have production true. But on purpose, because I want to test the service worker with ng serve --prod.
Why does fetching the service worker script give a 404, when fetching all other resources works (scripts, styles, images etc.) ?
We shouldn't have to put up yet another dev server just to test the service worker. ng serve --prod should do the trick.

[jrmcdona]

@MrCroft I think you might want to open a new one for that is it isn't a bug. That is the way it is by design so it will most likely be a feature request

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}