title: Angular App cannot compile after update from V8 to V9
body: <p>I have recently updated my angular app from V8 to V9 using <a href="https://update.angular.io/#8.2:9.0l2" rel="nofollow noreferrer">this guide</a> provided by the official Angular site. I followed all the steps from the guide and the app was successfully updated, but now when I try to build, I get loads of errors related to pipes directives and even components that I am using in my templates.</p>
  <p>Here's one example for errors on <em>pipes</em>:</p>
  <blockquote>
  <p>Cannot declare 'TimeAgoPipe' in an NgModule as it's not a part of the current compilation.</p>
  </blockquote>
  <p>Another example of errors on <em>directives</em>:</p>
  <blockquote>
  <p>Can't bind to 'ngModel' since it isn't a known property of 'input'</p>
  </blockquote>
  <p>This code worked perfectly fine on Angular 8:</p>
  <pre><code>&lt;input required name=&quot;password&quot; class=&quot;form-control mr-sm-2&quot; type=&quot;password&quot; placeholder=&quot;Password&quot; [(ngModel)]=&quot;model.password&quot;/&gt;
  </code></pre>
  <p>It can't even find <em>components</em> that I have created even though they have been declared in the <code>app.module.ts</code> file. It's giving me this error:</p>
  <blockquote>
  <p>'app-nav' is not a known element:</p>
  <ol>
  <li><p>If 'app-nav' is an Angular component, then verify that it is part of this module.</p>
  </li>
  <li><p>If 'app-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.</p>
  </li>
  </ol>
  </blockquote>
  <p>Here's my <code>app.module.ts</code> file where everything it is not finding has been included:</p>
  <pre class="lang-js prettyprint-override"><code>    import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
      import { NgModule, Injectable } from '@angular/core';
      import { HttpClientModule } from '@angular/common/http';
      import { FormsModule, ReactiveFormsModule } from '@angular/forms';
      import { RouterModule } from '@angular/router';
      import { JwtModule } from '@auth0/angular-jwt';
      import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
      import { BsDropdownModule, PaginationModule, ButtonsModule } from 'ngx-bootstrap';
      import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
      import { TabsModule } from 'ngx-bootstrap/tabs';
      import { NgxGalleryModule } from 'ngx-gallery';
      import { FileUploadModule } from 'ng2-file-upload';
      import { TimeAgoPipe } from 'time-ago-pipe';
      import { CommonModule, DatePipe } from '@angular/common';
  
      import { AppComponent } from './app.component';
      import { NavComponent } from './nav/nav.component';
      import { AuthService } from './_services/auth.service';
      import { HomeComponent } from './home/home.component';
      import { RegisterComponent } from './register/register.component';
      import { ErrorInterceptorProvider } from './_services/error.interceptor';
      import { MembersListComponent } from './members/members-list/members-list.component';
      import { ListsComponent } from './lists/lists.component';
      import { MessagesComponent } from './messages/messages.component';
      import { appRoutes } from './routes';
      import { MemberCardComponent } from './members/member-card/member-card.component';
      import { environment } from 'src/environments/environment';
      import { MemberDetailComponent } from './members/member-detail/member-detail.component';
      import { UserService } from './_services/user.service';
      import { AlertifyService } from './_services/alertify.service';
      import { AuthGuard } from './_guards/auth.guard';
      import { MemberDetailResolver } from './_resolvers/member-detail.resolver';
      import { MemberListResolver } from './_resolvers/member-list.resolver';
      import { MemberEditComponent } from './members/member-edit/member-edit.component';
      import { MemberEditResolver } from './_resolvers/member-edit.resolver';
      import { PreventUsavedChangesGuard } from './_guards/prevent-usaved-changes.guard';
      import { DetailCardContentComponent } from './members/detail-card-content/detail-card-content.component';
      import { PhotoEditorComponent } from './members/photo-editor/photo-editor.component';
  
      export function tokenGetter() {
        return localStorage.getItem(environment.authTokenName);
      }
      @Injectable()
      export class CustomHammerConfig extends HammerGestureConfig {
        overrides = {
          pinch: { enable: false },
          rotate: { enable: false }
        };
      }
      @NgModule({
        declarations: [
          AppComponent,
          NavComponent,
          HomeComponent,
          RegisterComponent,
          MembersListComponent,
          ListsComponent,
          MessagesComponent,
          MemberCardComponent,
          MemberDetailComponent,
          MemberEditComponent,
          DetailCardContentComponent,
          PhotoEditorComponent,
          TimeAgoPipe,
          DatePipe
        ],
        imports: [
          BrowserModule,
          HttpClientModule,
          FormsModule,
          ReactiveFormsModule,
          CommonModule,
          BsDropdownModule.forRoot(),
          TabsModule.forRoot(),
          BsDatepickerModule.forRoot(),
          ButtonsModule.forRoot(),
          BrowserAnimationsModule,
          RouterModule.forRoot(appRoutes),
          PaginationModule.forRoot(),
          NgxGalleryModule,
          FileUploadModule,
          JwtModule.forRoot({
            config: {
              tokenGetter,
              whitelistedDomains: environment.routesWithAuthorization,
              blacklistedRoutes: environment.routesWithoutAuthorization
            }
          })
        ],
        providers: [
          AuthService,
          UserService,
          AlertifyService,
          AuthGuard,
          PreventUsavedChangesGuard,
          MemberDetailResolver,
          MemberListResolver,
          MemberEditResolver,
          ErrorInterceptorProvider,
          { provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }
        ],
        bootstrap: [AppComponent]
      })
      export class AppModule {}
  </code></pre>
  <h1>Update</h1>
  <p>The solution suggested by Instinct and from <a href="https://github.com/AndrewPoyntz/time-ago-pipe/issues/33" rel="nofollow noreferrer">https://github.com/AndrewPoyntz/time-ago-pipe/issues/33</a> works. You have to remember to disable AOT compilation on angular.json though</p>