我有一个从 .NET Core 2 Angular 模板生成的 Angular v4 应用程序。
该模板使用服务器端预渲染。
在导航到显示图像表(或更确切地说是图像记录)的页面之前,我正在尝试使用路由解析器获取数据。
每当我尝试使用解析器时,我都会从服务器端预渲染中获得 NodeInvocationException。
我是否需要在 HTTP 获取 URL 中提供完整路径(包括主机名)才能使其正常工作?
有关问题,请参阅底部的更新。
images.resolver.ts
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { ImageModel } from './image.model';
import { ImagesService } from './images.service';
@Injectable()
export class ImagesResolver implements Resolve<ImageModel[]> {
constructor(private imagesService: ImagesService) { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> {
return this.imagesService.list();
}
}
图像.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ImagesService {
constructor(private httpClient: HttpClient) { }
list(): Observable<any> {
return this.httpClient.get(`api/images`);
}
get(id: number): Observable<any> {
return this.httpClient.get(`api/images/${id}`);
}
save(model: any): Observable<any> {
return this.httpClient.post(`api/images`, model);
}
update(model: any): Observable<any> | null {
return null;
}
delete(id: number): Observable<any> | null {
return null;
}
}
图像路由.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ImagesComponent } from './images.component';
import { ImageListComponent } from './image-list/image-list.component';
import { ImageComponent } from './image/image.component';
import { ImageResolver } from './shared/image.resolver';
import { ImagesResolver } from './shared/images.resolver';
const routes: Routes = [
{
path: '',
component: ImagesComponent,
children: [
{
path: '',
component: ImageListComponent,
resolve: {
images: ImagesResolver
}
},
{
path: ':id',
component: ImageComponent,
resolve: {
image: ImageResolver
}
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ImagesRoutingModule { }
export const routedComponents = [
ImagesComponent,
ImageListComponent,
ImageComponent
];
更新
我试图在图像服务中附加 API 端点的基本 URL,但无济于事。我仍然得到同样的错误。
constructor(
private httpClient: HttpClient,
@Inject('BASE_URL') private baseUrl: string
) { }
list(): Observable<any> {
return this.httpClient.get(`${this.baseUrl}api/images`);
}
经过一番挖掘,我在错误信息中发现了这一点:
(未知 url)的 Http 失败响应:0 未知错误
我相信这条消息来自 Angular 的 HttpClient,但我不知道为什么会收到这个消息。
我试图访问的完整端点是:
https://localhost:44317/api/images/featured
另一个更新
我发现禁用 SSL 后一切正常。我不想让这个禁用。
在服务器端预渲染时,如何配置 Angular 通用/节点/水疗服务以使用 SSL?