有人尝试将 InMemoryWebAPI 与独立组件一起使用吗？

Question

我正在使用带有独立组件的 Angular v16。我像在基于 NgModule 的项目中一样实现了 InMemoryWebAPI，但它似乎不起作用。我不断得到404 not found。

有人尝试过这个并通过独立引导成功使用 InMemoryWebAPI 吗？为了让它与独立组件一起工作，我还需要做其他什么不同的事情吗？

这是我的 app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(InMemoryWebApiModule.forRoot(AppData, { delay: 1000 })),
    provideHttpClient(),
    provideRouter(routes, withComponentInputBinding())
  ]
};

这是我的应用程序数据

export class AppData implements InMemoryDbService {

  createDb(): { products: Product[] } {
    const products = ProductData.products;
    console.log(products);
    return { products };
  }

}

这是我的服务：

  private sub = this.#http.get<Product[]>('api/products')

感谢您的任何想法或调试技巧。

编辑：我在这里有一个 stackblitz：https ://stackblitz.com/edit/github-crud-signals-djk

该服务当前已注释掉 http 调用，因为它们生成 404 错误。相反，它对数据进行硬编码。

Answer 1

在 Angular 团队的帮助下，我解决了这个问题。如果遇到这种情况，解决方案是调整引导中导入的顺序。它们应该看起来像这样：

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    importProvidersFrom(InMemoryWebApiModule.forRoot(AppData, { delay: 1000 })),
    provideRouter(routes, withComponentInputBinding())
  ]
};

请注意， 是在 之前HttpClient()导入的。 InMemoryWebApiModule