Angular 2 unable to resolve all parameters

Question

I've been playing around for a solid hour or two trying to get my app to work but I can't get a simple service injection to work anymore.

I have a core module which has the GlobalsService provided:

core.module.ts:

@NgModule({
  declarations: [
    CoreComponent,

    SiteHeaderComponent,

    // Pages
    DocumentationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      {path: 'documentation', component: DocumentationComponent},
      {path: '', component: CoreComponent}
    ]),
    DocumentationModule,
    SharedModule
  ],
  providers: [
    GlobalsService,
    RegexService,
    UtilsService
  ],
  bootstrap: [CoreComponent]
})
export class CoreModule {}

But when I try to use it in site-header.component.ts:

import {Component} from '@angular/core';
import {GlobalsService} from '../../shared';

@Component({
  selector: 'site-header',
  templateUrl: './site-header.component.html',
  styleUrls: ['./site-header.component.scss']
})
export class SiteHeaderComponent {

  ns: string;

  constructor(private globals: GlobalsService) {
    this.ns = globals.ns;
  }
}

globals.service.ts:

import {Injectable} from '@angular/core';

@Injectable()

export class GlobalsService {

   // App namespacer
   ns: string = 'test';
}

It just tells me that it can't resolve the parameter for the GlobalsService although it can find the service because if I change the import of it from ../../shared it throws an error saying it can't find it, so that's not where the issue seems to be.

EDIT:

I have a shared folder which contains directives, pipes, services and shared modules. Inside it I use an index.ts file to export everything, hence why the path is only ../../shared and not ../../shared/services/globals.service.ts.

See image:

shared/services/index.ts:

export * from './globals/globals.service';
export * from './regex/regex.service';
export * from './utils/utils.service';

shared/index.ts:

export * from './directives';
export * from './modules';
export * from './pipes';
export * from './services';

Can someone figure out what on earth I'm missing here?

@GevorgNarimanyan Nope. I've had it working before but then I must've changed something which completely broke it. — Chrillewoodz, Oct 16 '16 at 12:00
There was an issue with barrel imports.. Are you using `2.1.0`? — Sasxa, Oct 16 '16 at 12:00
@Sasxa I'm using the Angular CLI. Unsure which version it is. — Chrillewoodz, Oct 16 '16 at 12:02
Check `package.json`. I had similar issue, Try importing directly, like @PankajParkar suggested. If that fixes your issue, change all `2.0.0` to `2.1.0` (`3.1.0` for router) in package.json and run `npm upgrade`. You should be able to use index.ts for exports then... — Sasxa, Oct 16 '16 at 12:05
@Chrillewoodz have you tried to stop server and run ng serve one more time? — Gevorg Narimanyan, Oct 16 '16 at 12:20
@Sasxa Didn't appear to solve anything, I tried Pankaj's answer and it appears to work, but I don't understand why my barrels just suddenly stopped working. — Chrillewoodz, Oct 16 '16 at 12:21
I have not any idea. in core.module.ts you also take services from same ../../shared source? — Gevorg Narimanyan, Oct 16 '16 at 12:25
@GevorgNarimanyan I do, adding `/services` after seems to work but I still can't figure out why doing just `/shared` stopped working. — Chrillewoodz, Oct 16 '16 at 12:30

score 1 · Accepted Answer · answered Oct 16 '16 at 11:57

1

I'm guessing you have to put file name from share folder

import {GlobalsService} from '../../shared/global.service';

instead

import {GlobalsService} from '../../shared';

answered Oct 16 '16 at 11:57

Pankaj Parkar

134,766
23
234
299

But I use an `index.ts` file in the shared folder which exports everything from within it – Chrillewoodz Oct 16 '16 at 11:58
@Chrillewoodz why `index.ts`? where you did that? – Pankaj Parkar Oct 16 '16 at 12:01
@Chrillewoodz can you try [this](http://stackoverflow.com/a/31402500/2435473) inside your index.ts – Pankaj Parkar Oct 16 '16 at 12:14
This answer worked, but it makes no sense that the barrels just stops working all of a sudden. I will try the linked answer. – Chrillewoodz Oct 16 '16 at 12:22
Doing `../../shared/services` seems to work for now, so I'll accept your answer. – Chrillewoodz Oct 16 '16 at 12:29
@Chrillewoodz but that thing seems to work, could you add bug in github. so that angular team could look into this issue? – Pankaj Parkar Oct 16 '16 at 12:30
I will try to yes. – Chrillewoodz Oct 16 '16 at 12:31
@Chrillewoodz from what I have been able to read from different issues, I think it may be a problem with re-exporting in barrels. For instance, the services barrel exports all the services, then shared barrel tries to export all the services from the services barrel. – Paul Samsotha Oct 16 '16 at 12:36
@peeskillet That would make sense ye, but what doesn't make sense is that it once worked.. Did you find out if they're gonna fix this? – Chrillewoodz Oct 16 '16 at 13:19
1

@Chrillewoodz I think it's a problem with webpack and not angular. – Paul Samsotha Oct 16 '16 at 13:26

Angular 2 unable to resolve all parameters

1 Answers1