Question

我有一个从.NET Core 2 Angular模板生成的Angular v4应用程序。

模板使用服务器端预呈现。

我试图在导航到显示图像表（或图像记录）的页面之前使用路径解析器来获取数据。

每当我尝试使用解析器时，我都会从服务器端预渲染中获得NodeInvocationException。

~~我是否需要在HTTP get 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();
    }
}

images.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;
    }

}

图片-routing.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`);
}

经过一番挖掘后，我在错误信息中找到了这个：

（未知网址）的Http失败响应：0未知错误

我相信这条消息来自Angular的HttpClient，但我不知道为什么我会这样做。

我尝试访问的完整端点是：

https://localhost:44317/api/images/featured

另一次更新

我发现在禁用SSL的情况下一切正常。我不想让这个残疾人。

如何在服务器端预渲染时配置角度通用/节点/ spa服务以使用SSL？

Answer 1

我最终接受了@ DJDJ的建议并将应用程序分成两部分。

将您的应用分解为单独的项目可能会有所帮助。 .net核心spa模板似乎很好，但他们确实有他们的怪癖。一个是它输出无效的html，这可能对SEO产生负面影响（在我看来，使用ssr的唯一原因）。另一件需要考虑的事情是，Angular 5计划在我写这篇文章后的几天/几周内发布。 V5也应该对SSR有很多改进。我想我所说的是，对于单独的项目，如果它们出现，很容易更新并隔离这些错误。

我还没有尝试使用Angular 5做同样的事情，但是我在SSR和Angular 5的另一个项目上取得了成功。

Angular route resolver .NET Core 2服务器端预呈现

1 个答案: