服务人员不在angular 5中工作

Question

当我尝试在我的应用程序中注册服务工作者时，它给我错误，如未处理的Promise rejection:注册服务工作者失败:在获取脚本时收到错误的HTTP响应代码(404)。TypeError :注册服务工作线程失败:获取脚本时收到错误的HTTP响应代码(404)。

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="manifest" href="manifest.json" />
<link href="https://meyerweb.com/eric/tools/css/reset/reset.css"       
 rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"          
         rel="stylesheet">   
 <script>
     if ('serviceWorker' in navigator) {

         navigator.serviceWorker.register('/service-worker.js')
             .then(function (reg) {
                 console.log("Yes, it did.");
             }).catch(function (err) {
                 console.log("No it didn't. This happened: ", err)
             });
     }        
 </script> 
 </head>
 <body>
 <ct-root>Loading...</ct-root>
 </body>
 </html>

app.module.ts

 import '../vendors'
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { BrowserAnimationsModule } from '@angular/platform- 
 browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { ClientsService } from './services/clients.service';
 import { ErrorsModule } from './pages/errors/errors.module';
 import { SharedModule } from './shared/shared.module';
 import { ProjectRolesService } from './services/project-roles.service';
 import { CoreModule } from './core/core.module';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { LayoutModule } from './pages/layout/layout.module';
 import { ProjectsService } from './services/projects.service';
 import { TasksService } from './services/tasks.service';
 import { UsersService } from './services/users.service';
 import { SettingsService } from './services/settings.service';
 import { ImpersonationService } from './services/impersonation.service';
 import { AdminService } from './services/admin.service';

 export function httpFactory(http: HttpClient) {
 return new TranslateHttpLoader(http, 'assets/translate/i18n', '.json');
 }

@NgModule({
declarations: [
    AppComponent
],
imports: [
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    CoreModule,
    ErrorsModule,
    LayoutModule,
    SharedModule,
    ServiceWorkerModule.register('/service-worker.js'),
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: httpFactory,
            deps: [HttpClient]
        }
    })
],
bootstrap: [AppComponent],
providers: [
    ClientsService,
    ImpersonationService,
    ProjectRolesService,
    ProjectsService,
    AdminService,
    SettingsService,
    TasksService,
    UsersService
]})export class AppModule {}

我已经在app.module.ts中导入了service worker，并且还从angular-cli.json中启用了service worker

Answer 1

服务人员与Angular没有任何关系，这也不是它无法工作的原因。

浏览器似乎找不到service-worker.js文件，返回404。你把service-worker.js文件放在你网站的根目录了吗？