title: Unable to use the default PipeDate
body: <p>I'm trying to use the default <strong>date pipe</strong> provided by <code>@angular/common</code>.</p>
  
  <pre><code>{{ publication.createDate | date }}
  </code></pre>
  
  <p>The code below is the <em>publications.module.ts</em></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { PublicationsRoutingModule } from './publications-routing.module';
  import { DataTablesModule } from 'angular-datatables';
  import { PublicationsComponent } from 'src/app/views/pages/publications/list/publications.component';
  
  @NgModule({
    declarations: [
      PublicationsComponent
    ],
    imports: [
      CommonModule,
      FormsModule,
      ReactiveFormsModule,
      PublicationsRoutingModule,
      DataTablesModule
    ],
  })
  export class PublicationsModule { }
  </code></pre>
  
  <p><em>app.module.ts:</em></p>
  
  <pre><code>import { CommonModule, DatePipe } from '@angular/common';
  import { BrowserModule } from '@angular/platform-browser';
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { AppRoutingModule } from './app-routing.module';
  import { LoginComponent } from './views/pages/login/login.component';
  import { AuthInterceptorService } from './interceptors/auth-interceptor.service';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { ToastrModule } from 'ngx-toastr';
  
  @NgModule({
    declarations: [
      AppComponent,
      LoginComponent
    ],
    imports: [
      BrowserModule,
      CommonModule,
      HttpClientModule,
      FormsModule,
      ReactiveFormsModule,
      AppRoutingModule,
      BrowserAnimationsModule, // required animations module
      ToastrModule.forRoot(), // ToastrModule added
    ],
    providers: [    
      DatePipe,
      {
        provide: HTTP_INTERCEPTORS,
        useClass: AuthInterceptorService,
        multi: true
      }
    ],
    bootstrap: [AppComponent],
    exports: []
  })
  export class AppModule {
   }
  </code></pre>
  
  <p>But this error is shown:</p>
  
  <blockquote>
    <p>error NG8004: No pipe found with name 'date'.</p>
  </blockquote>