I' m trying to integrate Angular 8.2.3 with graphql using Apollo client, but getting the folowing error:
ERROR NullInjectorError: StaticInjectorError(AppModule)[ProductsListComponent -> Apollo]:
StaticInjectorError(Platform: core)[ProductsListComponent -> Apollo]:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GraphQLModule } from './graphql.module';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
GraphQLModule,
HttpClientModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
loadChildren: () => import(`./pages/secure/secure.module`).then(m => m.SecureModule),
},
{ path: '', redirectTo: 'secure', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
secure.module.ts
import { AngularMaterialModule } from './../angular-material/angular-material.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SecureRoutingModule } from './secure-routing.module';
import { SecureComponent } from './secure.component';
@NgModule({
declarations: [SecureComponent],
imports: [
CommonModule,
AngularMaterialModule,
SecureRoutingModule,
]
})
export class SecureModule { }
secure.routing.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { SecureComponent } from './secure.component';
const routes: Routes = [
{
path: '',
component: SecureComponent,
children: [
{
path: '',
redirectTo: 'products',
pathMatch: 'full',
},
{
path: 'products',
loadChildren: () => import('../products/products.module').then(m => m.ProductsModule),
data: { title: 'Products' }
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SecureRoutingModule { }
graphql.module
import {NgModule} from '@angular/core';
import {APOLLO_OPTIONS} from 'apollo-angular';
import {ApolloClientOptions, InMemoryCache} from '@apollo/client/core';
import {HttpLink} from 'apollo-angular/http';
const uri = 'myUri'; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
return {
link: httpLink.create({uri}),
cache: new InMemoryCache(),
};
}
@NgModule({
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink],
},
],
})
export class GraphQLModule {}
product.module.ts
import { GraphQLModule } from './../../graphql.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductsRoutingModule } from './products-routing.module';
import { ProductsListComponent } from './products-list/products-list.component';
@NgModule({
imports: [
CommonModule,
ProductsRoutingModule,
GraphQLModule
],
declarations: [ProductsListComponent],
})
export class ProductsModule { }
product.routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { ProductsListComponent } from './products-list/products-list.component';
const routes: Routes = [
{
path: '',
component: ProductsListComponent,
},
];
@NgModule({
declarations: [],
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ProductsRoutingModule { }
product.list.component.ts
import { Component, OnInit } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
const productsQuery = gql`
query products {
items {
name
description
slug
featuredAsset {
name
}
assets {
name
preview
}
}
}
`;
@Component({
selector: 'app-products-list',
templateUrl: './products-list.component.html',
styleUrls: ['./products-list.component.scss']
})
export class ProductsListComponent implements OnInit {
constructor(private apollo: Apollo) { }
ngOnInit() {
this.apollo
.watchQuery({
query: productsQuery
})
.valueChanges.subscribe((result: any) => {
console.log(result);
});
}
}
Why I am getting this error? what is the way to fix it?
ApolloModule
– griFlo