Dependency injection not working, have to use explicit @Inject

[Matti LeBlanc]

angular-compilers@0.3.2
Angular: 6.0.7

In my feature component I have to explicitly use @Inject to get my dependencies injected:

export class PodcastSearchComponent implements OnInit {
  channels$: Observable<Channel[]>;
  searchValue: string;
  showChannels = false;

  constructor(
    @Inject( Store)  private store: Store<fromStore.PodcastsState>,
    @Inject( ChangeDetectorRef ) private ref: ChangeDetectorRef,
  ) {}

  ngOnInit() {
    this.store.select( fromStore.getAllChannels ).subscribe( channels =>{
      console.log('channels', !!channels.length, channels);
      if ( channels.length ) {
        this.channels$ =  of ( channels );
        this.showChannels = !!channels.length;
        this.ref.detectChanges();
      }
    } );
  }

The component is part of a lazyloaded module.
How do I make the angular-compiler work with normal DI? Is it a tsconfig setting?
If I don't use @Inject, the objects will be undefined.

Is this a bug or am I doing something wrong?

[Arda TANRIKULU]

I don't think it is related to angular-compilers.
You need to reproduce a repo to make it clear.

[Matti LeBlanc]

@ardatan Here you go:
https://github.com/mattiLeBlanc/angular-meteor-inject-issue
Just clone, npm i and run meteor.
It should open a search with a not much on it. Open your console, and go change client/feature/pages/test-component/test.component.ts.

Swap the commented DI in the constructor:

      constructor(
        @Inject( Store) private store: Store<any>,
        // private store: Store<any>,
      ) {}
    

With @Inject it works, without I get an angular error. Hope you have a clue why this is happening.

[Arda TANRIKULU]

First of all, your directory structure isn't correct. Meteor will execute all files if they are not in imports folder. So, Angular project has only one entry point and this entry file will import others like in our MeteorCLI example. This is not an issue; this is how every Meteor project works
Maybe your issue is related to this; but I am not completely sure.
You can check out Meteor documentation, and our MeteorCLI example;
https://guide.meteor.com/structure.html

[Matti LeBlanc]

@ardatan Yep, mate. That was the problem. I had to move my app, feature folder and polyfill into client/imports and the inject works fine.

So thanks for that.

Can give some feedback that the examples under MeteorCLI are very, VERY confusing.
Only the new Bare one, actually has an imports file inside the client.
I looked at the other ones when I was setting up this app and thought I didn't need the import folder anymore. So I took it out.
I seemed to work fine except for the injects.

I would be helpful maybe retire the examples that are irrelevant and promote one best practice for MeteorCLI.
I am very much afraid this might otherwise scare away people from using Meteor because it is not as crystal clear as for example Angular with their CLI.

I am happy to contribute to some good examples if that is required?

[Arda TANRIKULU]

Thank you for your feedback.
universal and all-in-one examples share angular codes between client and server (for SSR)
lazy-loading is almost same with bare, because it only loads a module lazily (not classic import)
We except people start with our boilerplate;
https://github.com/Urigo/angular-meteor-base
And I couldn't think it was directory structure(imports situation is the nature of Meteor) because it has already been documented in Meteor's website :)
Please feel free to push a PR if you have better ideas for them

[Matti LeBlanc]

@ardatan This angular-meteor-base looks good. It should be referenced at angular-meteor readme file.
The examples there are a bit outdated.
It would be nice there would be one source of truth for the examples, linked via the meteor.com website so that people can find it easily.

You really have to know a lot now if you are a newbie. You have all the examples mentioned, but you can also extract the node api and use angular cli for example. Very confusing for new starters.

I want to share Meteor with as many developers as possible, but a lot of people are very reluctant to try something else or new, especially if it doesn't look like it's fully supported or up to date. Which is not the case...it just doesn't look as shiny an the Angular docs for example.

Getting one page up with a proper reference and examples for different scenario's would help. I would use angular-meteor for that I think.

[Arda TANRIKULU]

You can see it is already referenced in Quick Start section of README. However, I understand your point. I will edit README to make everything clear about features in angular-meteor.
BTW, it is up to Meteor Core team to put these examples in their website :)
Thank you for your feedback again.