标签: angular-in-memory-web-api

InMemoryWebApiModule正在使用已下载的源代码, "angular-in-memory-web-api": "~0.5.0"但"angular-in-memory-web-api": "^0.6.0" 我没有按照教程,安装angular-in-memory-web-api:

npm install angular-in-memory-web-api --save

它安装了 "angular-in-memory-web-api": "^0.6.0"

错误信息:

webpack-internal:///./src/app/hero.service.ts:87 Object body: error: "Object(...) is not a function" __proto__: Object headers: HttpHeaders lazyInit: ƒ () lazyUpdate: null normalizedNames: Map(0) {} __proto__: Object status: 500statusText: "Internal Server Error" url: "api/heroes" __proto__: Object (anonymous) @ webpack-internal:///./src/app/hero.service.ts:87

我正在使用带有独立组件的 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 错误。相反，它对数据进行硬编码。

npm i angular-in-memory-web-api --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: ng-naruto-app@0.0.0
npm ERR! Found: @angular/common@13.3.11
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~13.3.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^14.0.0" from angular-in-memory-web-api@0.14.0
npm ERR! node_modules/angular-in-memory-web-api
npm ERR!   dev angular-in-memory-web-api@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or …

编译后,我收到此错误:

错误在node_modules /角内存的Web-API/HTTP-backend.service.d.ts(2,75):错误TS2307:找不到模块 '@角/ HTTP'.node_modules /角内存的Web-API/HTTP的存储器内的Web-api.module.d.ts(2,28):错误TS2307:找不到模块 '@角/ HTTP'.

在package.json中:"angular-in-memory-web-api":"^ 0.5.0"

我删除了node_modules - >清理了npm缓存,但仍然是同样的错误

我正在使用模拟数据和 InMemoryDbService，如英雄之旅示例所示。当我不传递 HttpParams 时，加载数据工作正常。添加参数后，我会收到 500 响应，正文中包含以下错误：{error: "collection.filter is not a function"}我已使用 get 请求中的数据填充表，如下所示：

组件代码：

@Component({
  selector: 'app-adapter',
  templateUrl: './adapter.component.html',
  styleUrls: ['./adapter.component.css']
})
export class AdapterComponent implements OnInit {
  dataSource = new MatTableDataSource<Request>();
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  constructor(private api: BaseServiceApi) {}

  ngOnInit() {
    this.refresh(); // this works with no params and populates my table
  }

  refresh(params?) {
    this.getRequests(params)
      .subscribe(reply => {
          this.dataSource.data = reply.payload as Request[];
          this.dataSource.sort = this.sort;
          this.dataSource.paginator = this.paginator;
          this.pageSize = this.paginator.pageSize;
        }
      ); …