gurps gurps - 1 month ago 15
TypeScript Question

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'.

Answer

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();
}
Comments