title: ERROR NullInjectorError: StaticInjectorError(oo)[SS -> e]: on Production, not happening on localhost
body: <p>I'm having an angular issue and I can't seem to figure out why. </p>
  
  <p>When I do <code>ng serve</code> and run the code locally, everything works fine. There are no error messages or warnings. </p>
  
  <p>However, when I build using <code>ng build --prod</code> and I upload the <code>dist</code> file to AWS, I now get an error on button press.</p>
  
  <p>The error is: </p>
  
  <pre><code>    main-es2015.9568554f8026ce400f37.js:1 ERROR NullInjectorError: StaticInjectorError(oo)[SS -&gt; e]: 
      StaticInjectorError(Platform: core)[SS -&gt; e]: 
      NullInjectorError: No provider for e!
      at Oe.get (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:483678)
      at https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:494184
      at e (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:494566)
      at Nt.get (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:494717)
      at https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:494184
      at e (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:494566)
      at Nt.get (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:494717)
      at Di (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:515973)
      at Ui.get (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:524593)
      at hs (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:528442)
  </code></pre>
  
  <p>It's happening on the click of a button. I'm using Angular material's <code>MatBottomSheet</code>, the function is: </p>
  
  <pre><code>  openEmojiSelect(): void {
      this.req.trackEvent("Editor page", "Opened emoji selector", "click")
      const bottomRef = this._bottomSheet.open(EmojiComponent, {
        panelClass: 'emoji-panel-width'
      });
      bottomRef.afterDismissed().subscribe(() =&gt; {
        console.log(this.req.getModuleEmoji())
        this.moduleData.module.image_position = this.req.getModuleEmoji();
      });
    }
  </code></pre>
  
  <p>I should be importing everything correctly: </p>
  
  <pre><code>//imports
  import { Component, OnInit } from '@angular/core';
  import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
  import {MatDialog} from '@angular/material/dialog';
  import { SnippetsComponent } from './snippets/snippets.component';
  import { QuestionsComponent } from './questions/questions.component';
  import { EmojiComponent } from './emoji/emoji.component';
  import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';
  import { RequestsService } from '../../../requests.service';
  import {Router, ActivatedRoute, Params} from '@angular/router';
  
   //constructor
    constructor(public dialog: MatDialog,
      public req: RequestsService,
      private activatedRoute: ActivatedRoute,
      private router: Router,
    private _bottomSheet: MatBottomSheet) { }
  </code></pre>
  
  <p>I really have no idea what the problem is since it's not happening locally and I find it very difficult to debug when the error is not clear at all.</p>
  
  <p>Any ideas? Thank you</p>
  
  <p>Update: </p>
  
  <p>I ran <code>ng serve --prod</code> which gave me a more verbatim error message: </p>
  
  <pre><code>ERROR NullInjectorError: StaticInjectorError(AppModule)[ctrl_ngx_emoji_mart_CategoryComponent -&gt; EmojiFrequentlyService]: 
    StaticInjectorError(Platform: core)[ctrl_ngx_emoji_mart_CategoryComponent -&gt; EmojiFrequentlyService]: 
      NullInjectorError: No provider for EmojiFrequentlyService!
  </code></pre>