Angular 提供HTTP#U拦截器不会';不能与SSR一起工作
一旦添加HTTP_拦截器提供语句,应用程序就会挂起,如果没有它,应用程序将正常运行(即使我清空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>,
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。但是不能渲染任何视图。似乎无法访问该站点(控制台中没有错误)。。但如果没有拦截器,站点将打开!!服务器端控制台中是否没有错误?