Difficulty Resolving Parameter Resolution in Angular 5 Shared Library Module ([object Object], ?, ?)

I'm facing an issue while attempting to integrate a custom shared component library into my Angular application, which has been upgraded from Angular 5 to Angular 4.

Unfortunately, I am unable to resolve the problem at hand.

The error message I'm encountering is:

compiler.js:485 Uncaught Error: Can't resolve all parameters for LibSharedComponentsModule: ([object Object], ?, ?).
    at syntaxError (compiler.js:485)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15692)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:15527)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15326)
    at CompileMetadataResolver.getNgModuleSummary (compiler.js:15125)
    at eval (compiler.js:15223)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15201)
    at JitCompiler._loadModules (compiler.js:34385)
    at JitCompiler._compileModuleAndComponents (compiler.js:34346)
syntaxError @ compiler.js:485
CompileMetadataResolver._getDependenciesMetadata @ compiler.js:15692
CompileMetadataResolver._getTypeMetadata @ compiler.js:15527
CompileMetadataResolver.getNgModuleMetadata @ compiler.js:15326
CompileMetadataResolver.getNgModuleSummary @ compiler.js:15125
(anonymous) @ compiler.js:15223
CompileMetadataResolver.getNgModuleMetadata @ compiler.js:15201
JitCompiler._loadModules @ compiler.js:34385
JitCompiler._compileModuleAndComponents @ compiler.js:34346
JitCompiler.compileModuleAsync @ compiler.js:34240
CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:239
PlatformRef.bootstrapModule @ core.js:5551
(anonymous) @ main.ts:11
../../../../../src/main.ts @ main.bundle.js:174
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:189
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1

The LibSharedComponentsModule is the name of my library, but I can't figure out what the parameters error is pointing towards.

Below, I've pasted the code for both my AppModule and LibSharedComponentsModule:

AppModule

// Code for AppModule goes here...

LibSharedComponentsModule

// Code for LibSharedComponentsModule goes here...

If anyone could provide guidance on debugging this error or suggest ways to resolve it, your assistance would be greatly appreciated. My project is using Webpack, in case that information helps in any way.

angulartypescriptwebpack

Answer №1

It is important to pay attention to this specific section:

constructor(
    apollo: Apollo,
    // tslint:disable-next-line:no-shadowed-variable
    httpLink, HttpLink // <-- do you think there should be a comma here or perhaps a colon instead?
) {

Answer №2

Are you looking to insert:

import { Apollo } from 'apollo-angular'; 
import { HttpLink } from 'apollo-angular-link-http';

However, it seems like they are not included in angular Dependency Injection (DI)'s providers. Add them to your LibSharedComponentsModule module:

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ApolloModule } from 'apollo-angular';
import { HttpLinkModule } from 'apollo-angular-link-http';

@NgModule({
  imports: [
    HttpClientModule, // provides HttpClient for HttpLink
    ApolloModule,
    HttpLinkModule
  ]
})
class LibSharedComponentsModule {}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having Trouble with Imported JavaScript File in Astro

Why isn't the js file working in Astro when I try to import or add a source in the Astro file? For example: <script src="../scripts/local.js"></script> or <script>import '../scripts/local.js'</script> I am ...

javascriptreactjsnode.jstypescriptastrojs

Tips for binding to a single input box within an ngFor loop

Can anyone lend a hand with some code? I'm working on a straightforward table using ngFor, but I'm facing an issue with input binding. The problem is that all the input fields generated by ngFor display the same value when typing. How can I preve ...

javascriptangulartypescriptionic-framework

Unlocking the power of URL manipulation in Fastify using Node.js

I'm attempting to retrieve specific parts of the URL from a Fastify server. For instance, the URL looks like this: http://localhost:300/query_tile/10/544/336 Within the Fastify server, I need the values for z/x/y. I've attempted the following ...

node.jstypescriptfastify

Having trouble removing or updating Angular Cli on a MAC device

Struggling with uninstalling angular cli on mac. npm remove -g @angular/cli https://i.sstatic.net/1JVxX.png ...

node.jsangularmacosangular-cli

You are unable to compile a module in Visual Studio Code unless you provide the --module flag

I am facing an issue with my TypeScript code file that appears to be a common error, but I'm struggling to resolve it. This problem is new to me as I am still getting acquainted with Visual Studio Code. Cannot compile modules unless the '--modul ...

typescriptvisual-studio-code

Merge type guard declarations

After studying the method outlined in this post, I successfully created an Or function that accepts a series of type guards and outputs a type guard for the union type. For example: x is A + x is B => x is A | B. However, I encountered difficulties usin ...

typescripttypescript-generics

I am facing the issue of being unable to bind to 'routerlink' because it is not recognized as a known property of 'a', even after I have declared RouterModule in my app.module

Encountering a template parse error when using [routerlink] in an HTML page, despite importing RouterModule. Here's the relevant HTML snippet: <mat-toolbar color="primary"> <h3 [style.color]="white">ADMIN PORTAL</h3> <span cl ...

angulartypescript

Angular's trio of services tied in a circle of dependency

I'm encountering an issue with my angular project. These warnings keep popping up: WARNING in Circular dependency detected: src\app\core\http\content.service.ts -> src\app\core\http\domain.service.ts -> ...

angulartypescriptcircular-dependency

Implementing HTTPS Signed Certificates with IIS on Express for Production Environments

When it comes to managing API (HTTPS) certs in a development environment compared to production in an Express application running on a Node.js/Angular setup deployed to Windows IIS, the process can be a bit confusing. While proxy rewrites have been suggest ...

node.jsangularapiexpressiis

I must remove the thumb from the input range control

I am looking for a way to remove the thumb from the progress bar in my music player. I have tried various methods without success, and I simply want the progress bar to move forward with color change as it advances based on the Progress variable. For refe ...

htmlcssreactjstypescript

Determining the type of a single deconstructed variable from an object

My useForm hook is designed to take an object and return several useful functions back, including that object as a state. However, due to TypeScript limitations, the specific type from the initial object cannot be returned because useForm accepts dynamic o ...

reactjstypescriptreact-hooks

Differences in weekend start and end days vary across cultures

Looking for a solution to determine the weekend days per culture code in Typescript/Javascript? While most countries have weekends on Sat-Sun, there are exceptions like Mexico (only Sunday) and some middle-eastern countries (Fri-Sat). It would be helpful ...

javascripttypescript

Service stub in Angular containing static properties

I am faced with a challenge in my service that requires the use of APP_INITIALIZE to set a static property value. Another service within my system depends on this property, so I need to stub this service with the static value. However, using provide is n ...

angularunit-testingstatickarma-runner

Is there a way to determine the size of the packages included using webpack or NPM?

I tried using the webpack-bundle-size-analyzer plugin, but it's not giving me the results I need. Are there any straightforward methods to display the sizes of the packages included in a webpack project? If possible, I'm also interested in learn ...

npmwebpack

What sets apart ViewProviders from Services in Angular2?

Take a look at this piece of code: var SearchResultComponent = ng.core.Component({ selector: "search-result", directives: [ng.router.ROUTER_DIRECTIVES, FormComponent], viewProviders: [ng.http.HTTP_PROVIDERS], templateUrl: "componentTemplat ...

angularangular2-services

Ways to break down a collection of multiple arrays

Looking to transform an array that consists of multiple arrays into a format suitable for an external API. For example: [ [44.5,43.2,45.1] , [42, 41.2, 48.1] ] transforming into [ [44.5,42], [43.2,41.2] , [45.1, 48.1] ] My current code attempts this ...

javascripttypescript

Troubleshooting a ForwardRef issue in a TypeScript and React Native project

Encountering a ts error while using forwardRef. // [ts] Property 'forwardRef' does not exist on type 'typeof React'. const MyComponent = React.forwardRef((props: Props, ref: any) => ... An issue arises in React Native when the pare ...

javascripttypescriptreact-native

What could be causing my data to undergo alterations when transitioning from a frontend form submission to a backend API?

In my experience with Next.js 13 and Prisma, I encountered a peculiar issue. I had set up a basic form to collect user information for an api request. Oddly enough, when I printed the data right before sending it, everything seemed fine. However, upon arri ...

javascriptreactjstypescriptnext.jsprisma

Having trouble bypassing the CSS transformation in CSS-Modules for third-party library styles

Exploring the world of CSS Modules for the first time with React and Webpack has been an interesting journey. Along the way, I discovered at least three different approaches to implement it: Utilizing css-loader Integrating react-css-modules Leveraging b ...

reactjswebpackcss-modulesbabel-plugin-react-css-modules

Authenticate users by accessing their login information stored in a MongoDB database using Node.js and Express

I have been experimenting with various techniques, and incorporating Passport middleware has brought me the closest to achieving this task. I suspect there might be a final step missing for everything to function correctly, as I am not encountering any err ...

node.jsangularmongodbexpresspassport.js