Angular 提供HTTP#U拦截器不会';不能与SSR一起工作

Angular 提供HTTP#U拦截器不会';不能与SSR一起工作,angular,angular-universal,server-side-rendering,Angular,Angular Universal,Server Side Rendering,一旦添加HTTP_拦截器提供语句,应用程序就会挂起,如果没有它,应用程序将正常运行(即使我清空MyInterceptorclass) MyINTERCEPTOR.ts ... constructor( private loaderService: LoaderService, private authService: AuthService ) { } intercept<T>( req: HttpRequest<T>,

一旦添加HTTP_拦截器提供语句,应用程序就会挂起,如果没有它,应用程序将正常运行(即使我清空
MyInterceptor
class)

MyINTERCEPTOR.ts

...
constructor(
    private  loaderService: LoaderService,
    private  authService: AuthService
  ) {
  }

  intercept<T>(
    req: HttpRequest<T>,
    next: HttpHandler
  ): Observable<HttpEvent<T>> {
    this.loaderService.requestBegin();
    this.authService.setHeaders(req, next).pipe(
      catchError((error) => {
        this.loaderService.requestEnded();
        return throwError(error);
      })
    );
    return next.handle(req);
  }
  ...
...
app.engine('html', (_, options, callback) => {
  const engine = ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
      {provide: 'host', useFactory: () => options.req.get('host'), deps: []}
    ]
  });
  engine(_, options, callback);
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// Serve static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
// app.get('*', (req, res) => {
//   res.render('index', {req});
// });

app.get('*', (req, res) => { res.sendFile( join(DIST_FOLDER, 'browser' , 'index.html'), {req}); });
package.json

"@angular/core": "^7.2.7",
"@angular/platform-server": "^7.2.7",
"@angular/pwa": "^0.12.4",
"@angular/service-worker": "^7.2.7",
"@nguniversal/express-engine": "^7.1.1",
"@nguniversal/module-map-ngfactory-loader": "^7.1.1",
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
 "outDir": "../out-tsc/app-server",
 "baseUrl": "."
},
"angularCompilerOptions": {
 "entryModule": "app/app.server.module#AppServerModule"
}
}


....
"server": {
       "builder": "@angular-devkit/build-angular:server",
       "options": {
         "outputPath": "dist/server",
         "main": "src/main.server.ts",
         "tsConfig": "src/tsconfig.server.json"
       },
       "configurations": {
         "production": {
           "fileReplacements": [
             {
               "replace": "src/environments/environment.ts",
               "with": "src/environments/environment.prod.ts"
             }
           ]
         }
       }
     }
   ....
"scripts": {
...
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
 "serve:ssr": "node dist/server",
 "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
 "build:client-and-server-bundles": "ng build --prod && ng run my-project:server:production",
 "ssr-only": "ng run my-project:server:production && npm run compile:server && node dist/server"
....
}
server.ts

...
constructor(
    private  loaderService: LoaderService,
    private  authService: AuthService
  ) {
  }

  intercept<T>(
    req: HttpRequest<T>,
    next: HttpHandler
  ): Observable<HttpEvent<T>> {
    this.loaderService.requestBegin();
    this.authService.setHeaders(req, next).pipe(
      catchError((error) => {
        this.loaderService.requestEnded();
        return throwError(error);
      })
    );
    return next.handle(req);
  }
  ...
...
app.engine('html', (_, options, callback) => {
  const engine = ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
      {provide: 'host', useFactory: () => options.req.get('host'), deps: []}
    ]
  });
  engine(_, options, callback);
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// Serve static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
  maxAge: '1y'
}));

// All regular routes use the Universal engine
// app.get('*', (req, res) => {
//   res.render('index', {req});
// });

app.get('*', (req, res) => { res.sendFile( join(DIST_FOLDER, 'browser' , 'index.html'), {req}); });
tsconfig.server.json

"@angular/core": "^7.2.7",
"@angular/platform-server": "^7.2.7",
"@angular/pwa": "^0.12.4",
"@angular/service-worker": "^7.2.7",
"@nguniversal/express-engine": "^7.1.1",
"@nguniversal/module-map-ngfactory-loader": "^7.1.1",
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
 "outDir": "../out-tsc/app-server",
 "baseUrl": "."
},
"angularCompilerOptions": {
 "entryModule": "app/app.server.module#AppServerModule"
}
}


....
"server": {
       "builder": "@angular-devkit/build-angular:server",
       "options": {
         "outputPath": "dist/server",
         "main": "src/main.server.ts",
         "tsConfig": "src/tsconfig.server.json"
       },
       "configurations": {
         "production": {
           "fileReplacements": [
             {
               "replace": "src/environments/environment.ts",
               "with": "src/environments/environment.prod.ts"
             }
           ]
         }
       }
     }
   ....
"scripts": {
...
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
 "serve:ssr": "node dist/server",
 "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
 "build:client-and-server-bundles": "ng build --prod && ng run my-project:server:production",
 "ssr-only": "ng run my-project:server:production && npm run compile:server && node dist/server"
....
}
angular.json

"@angular/core": "^7.2.7",
"@angular/platform-server": "^7.2.7",
"@angular/pwa": "^0.12.4",
"@angular/service-worker": "^7.2.7",
"@nguniversal/express-engine": "^7.1.1",
"@nguniversal/module-map-ngfactory-loader": "^7.1.1",
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
 "outDir": "../out-tsc/app-server",
 "baseUrl": "."
},
"angularCompilerOptions": {
 "entryModule": "app/app.server.module#AppServerModule"
}
}


....
"server": {
       "builder": "@angular-devkit/build-angular:server",
       "options": {
         "outputPath": "dist/server",
         "main": "src/main.server.ts",
         "tsConfig": "src/tsconfig.server.json"
       },
       "configurations": {
         "production": {
           "fileReplacements": [
             {
               "replace": "src/environments/environment.ts",
               "with": "src/environments/environment.prod.ts"
             }
           ]
         }
       }
     }
   ....
"scripts": {
...
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
 "serve:ssr": "node dist/server",
 "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
 "build:client-and-server-bundles": "ng build --prod && ng run my-project:server:production",
 "ssr-only": "ng run my-project:server:production && npm run compile:server && node dist/server"
....
}
package.json

"@angular/core": "^7.2.7",
"@angular/platform-server": "^7.2.7",
"@angular/pwa": "^0.12.4",
"@angular/service-worker": "^7.2.7",
"@nguniversal/express-engine": "^7.1.1",
"@nguniversal/module-map-ngfactory-loader": "^7.1.1",
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
 "outDir": "../out-tsc/app-server",
 "baseUrl": "."
},
"angularCompilerOptions": {
 "entryModule": "app/app.server.module#AppServerModule"
}
}


....
"server": {
       "builder": "@angular-devkit/build-angular:server",
       "options": {
         "outputPath": "dist/server",
         "main": "src/main.server.ts",
         "tsConfig": "src/tsconfig.server.json"
       },
       "configurations": {
         "production": {
           "fileReplacements": [
             {
               "replace": "src/environments/environment.ts",
               "with": "src/environments/environment.prod.ts"
             }
           ]
         }
       }
     }
   ....
"scripts": {
...
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
 "serve:ssr": "node dist/server",
 "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
 "build:client-and-server-bundles": "ng build --prod && ng run my-project:server:production",
 "ssr-only": "ng run my-project:server:production && npm run compile:server && node dist/server"
....
}

我的项目出了什么问题?

你能展示你的拦截器声明吗?我用代码更新了问题主体。*即使我删除了拦截器类的所有内容,它也不起作用。如果你删除了拦截器的代码,并且有一个空的构造函数?现在,它读取拦截器,通过它调用API。但是不能渲染任何视图。似乎无法访问该站点(控制台中没有错误)。。但如果没有拦截器,站点将打开!!服务器端控制台中是否没有错误?