CODEWITHSUNDEEP
angulartypescript
gurps
gurps

Reputation: 121

Import not being picked up by component file

I am working on a simple Angular 2 project, I have all my imports working within my app.module.ts file as below 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { StockListComponent } from './stock-list/stock-list.component';

import { routing } from "./app-routing.module";
import { StockItemComponent } from './stock-item/stock-item.component';
import { ProfileComponent } from './profile/profile.component';
import { DeviceConfigurationComponent } from './device-configuration/device-configuration.component';
import { StockStatusComponent } from './stock-status/stock-status.component';


import {Calendar, Dialog, Button, InputSwitch, Dropdown, Growl, DataTable, SelectButtonModule} from 'primeng/primeng';
import {JwtHelper, AuthHttp, tokenNotExpired} from "angular2-jwt";

import {AuthService} from './auth.service';
import {DataService} from './data.service';

@NgModule({
 declarations: [
  AppComponent,
  StockListComponent,
  StockItemComponent,
  ProfileComponent,
  DeviceConfigurationComponent,
  StockStatusComponent
],
imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  routing,
  DataTable,
  Calendar,
  Dialog,
  Button,
  InputSwitch,
  Dropdown,
  Growl,
  JwtHelper,
  AuthHttp,
  SelectButtonModule
],
providers: [
  AuthService,
  DataService
],
bootstrap: [AppComponent]
})
export class AppModule { }

however i get this error in my console relating to one of my component.ts files, that the names cannot be found even tho they have been imported in the app.module.ts

error

ERROR in [default] /Users/~/src/app/stock-list/stock-list.component.ts:42:26 Cannot find name 'AuthService'.

Upvotes: 0

Views: 827

Answers (1)

Alexander Ciesielski
Alexander Ciesielski

Reputation: 10824

If you want to call methods on AuthService you will have to import it again in your component and inject it, so that it can be referenced.

For example:

import { AuthService } from '../auth.service'; // edit path according to your structure

Next, you should inject the service in your component like so:

constructor(private auth: AuthService) { }

Now you can reference the AuthService in your component's methods, e.g:

myComponentMethod() {
   this.auth.logout();
}

Upvotes: 3

Related Questions