AngularJS 2 TypeScript Compilation errors - Argument of type

Question

I've checked all possible solutions for my issue which is basically referring to TypeScript compilation. Every time I start the project I have these:

Argument of type '{ declarations: (typeof NavbarComponent | typeof FooterComponent | typeof AboutComponent | typeof...' is not assignable to parameter of type 'NgModule'.
  Types of property 'providers' are incompatible.
    Type '(typeof BaseRequestOptions | typeof DataService | typeof UserService | typeof AuthenticationServi...' is not assignable to type 'Provider[]'.
      Type 'typeof BaseRequestOptions | typeof DataService | typeof UserService | typeof AuthenticationServic...' is not assignable to type 'Provider'.
        Type 'typeof DataService' is not assignable to type 'Provider'.
          Type 'typeof DataService' is not assignable to type 'FactoryProvider'.
            Property 'provide' is missing in type 'typeof DataService'.
[default] /SYS/PROJECT/WEB/studio/front-studio/src/app/app.routing.ts:14:7
    Type '({ path: string; component: typeof LoginComponent; } | { path: string; component: typeof HomeComp...' is not assignable to type 'Route[]'.
  Type '{ path: string; component: typeof LoginComponent; } | { path: string; component: typeof HomeCompo...' is not assignable to type 'Route'.
    Type '{ path: string; component: typeof HomeComponent; }' is not assignable to type 'Route'.
      Types of property 'component' are incompatible.
        Type 'typeof HomeComponent' is not assignable to type 'Type<any>'.
          Cannot assign a 'private' constructor type to a 'public' constructor type.
[default] Checking finished with 2 errors

I've tried to add a Type to the component, but it is still the same. The app is working fine, so I guess it's a TypeScript compilation issue.

The router also shows an error in Sublime Text:

const appRoutes : Routes = [

      {     path: 'login', component: LoginComponent },

      {     path: '', component: HomeComponent },
      {     path: 'about', component: AboutComponent, canActivate: [AuthGuard] },

    // Otherwise redirect to home
    { path: '**', redirectTo: '' }
    //{ path: '**', component: PageNotFoundComponent }
];

export const routedComponents = [HomeComponent, AboutComponent];
export const routing : ModuleWithProviders = RouterModule.forRoot(appRoutes);

This is my tsconfig, if it may help:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
       "../node_modules/@types"
     ]
  },
  "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

What else can I try? I removed directives from everywhere and every component is in @ngModule declarations. I spent almost a week, but I still didn't find any solution for this.

@ngModule:

...

import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { Component, Type } from '@angular/core';

@NgModule({

  // Components and directives
  declarations: [
    AppComponent,
    NavbarComponent, HomeComponent, ...
  ],

  // Module dependencies
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    SelectModule,

  ],

  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],

  // Services
  providers: [

        DataService,
        ...


        ],

  // Root component
  bootstrap: [AppComponent],

})

export class AppModule {

}

If you could add your @ngModule to the question it may help find the problem. — J J B
– J J B, Commented Dec 20, 2016 at 3:59
It looks fine. Try to reproduce the issue on plunkr and give us a link that we can play with it a bit? — smnbbrv
– smnbbrv, Commented Dec 20, 2016 at 5:47

widmoser · Accepted Answer · 2017-01-28 17:01:14Z

11

I had the same problem and in my case it occurred, because I was using a private constructor in the respective service. So the solution would be to make the constructor in DataService non-private, i.e. removing the private modifier.

answered Jan 28, 2017 at 17:01

widmoser

1461 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2521493 · Accepted Answer · 2017-10-16 23:36:05Z

1

I had the same problem with a private constructor AppComponent. Resolved it by making the constructor public

answered Oct 16, 2017 at 23:36

user2521493

211 bronze badge

Comments

Raghavendra M · Accepted Answer · 2017-08-31 06:59:08Z

0

Also Check if you have added 'abstract' in your parent/base Class and should be removed.

answered Aug 31, 2017 at 6:59

Raghavendra M

1

1 Comment

Souvik Ghosh Over a year ago

This does not answer the question and should be a comment instead.

Collectives™ on Stack Overflow

AngularJS 2 TypeScript Compilation errors - Argument of type

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related