'router-outlet' не является известным элементом в angular 9, когда включены AOT и IVY

Question

Несмотря на то, что у меня есть AppRoutingModule в app.module.ts, сборка завершается с ошибкой «router-outlet» является компонентом Angular, затем убедитесь, что он является частью этого модуля ». и я наблюдал странное поведение из-за IVY и AOT enabeld, если один из них отключен, он работает

, это мой app.module

import {ErrorHandler, Injectable, NgModule, APP_INITIALIZER} from '@angular/core';
import {CommonModule} from '@angular/common';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
// import {saveAs} from 'file-saver/FileSaver';
import * as Raven from 'raven-js';
import {CookieModule} from 'ngx-cookie';
import {AppComponent} from './app.component';
import {AppConfig} from './app.config';
import {environment} from '../environments/environment';
import {GlobalErrorHandler} from './app.eror-handler';
import 'hammerjs';
import {SharedModule} from './shared/shared.module';
import {AuthModule} from './auth/auth.module';
import {LandingModule} from './landing/landing.module';
import {AppRoutingModule} from './app-routing.module';
import {ReferralsModule} from './referrals/referrals.module';
import {AppInterceptor} from "./app.interceptor";
import {WebStorageModule} from "ngx-store";
import {AppConfigService} from './shared/app-config.service';
import {ProfileSharedModule} from "./profiles/profile.module";


if (AppConfig.ENVIRONMENT === 'stage' || AppConfig.ENVIRONMENT === 'production') {
  Raven
    .config(AppConfig.RAVEN_URL).install();
}

export function appConfigServiceFactory(appConfigService: AppConfigService): Function {
  return () => appConfigService.getConfig();
}

@Injectable()
export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any>{
    'swipe': {velocity: 0.3, threshold: 10}
  };
}

@Injectable()
export class RavenErrorHandler implements ErrorHandler {
  handleError(err: any): void {
    if (AppConfig.ENVIRONMENT === 'stage' || AppConfig.ENVIRONMENT === 'production') {
      Raven.captureException(err.originalError);
    } else {
      console.error(err);
    }
  }
}

@NgModule({
  imports: [
    BrowserAnimationsModule,
    BrowserModule.withServerTransition({appId: 'startupbyte-app'}),
    CookieModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    CommonModule,
    AppRoutingModule,
    SharedModule,
    AuthModule,
    LandingModule,
    WebStorageModule,
    ProfileSharedModule,
    ReferralsModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [AppComponent],
  providers: [
    Ng4TwitterTimelineService,
    AppConfigService,
    {
      // Provider for APP_INITIALIZER
      provide: APP_INITIALIZER,
      useFactory: appConfigServiceFactory,
      deps: [AppConfigService],
      multi: true
    },
    // {provide: RouteReuseStrategy, useClass: CustomReuseStrategy},,
    {
      provide: ErrorHandler,
      useClass: GlobalErrorHandler
    },
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AppInterceptor,
      multi: true
    }
  ]
})
export class AppModule {
}

, это app- routing.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AuthRoutes} from './auth/auth.routes';
import {landingRoutes} from './landing/landing.routes';
import {homeRoutes} from './home/home.routes';
import {WhiteLabelRoutes} from './whitelabel-base/whitelabel-base.routes';
import {AuthGuard} from './auth/auth.guard';
import {MyGroupsListComponent} from './groups/my-groups-list/my-groups-list.component';
import {AnonymousGuard} from "./auth/anonymous.guard";
import {FeatureAccessGuard} from './shared/guards/feature-access.guard';
import {VisibilityGuard} from './shared/guards/visibility.guard';

const routes: Routes = [
  {
    path: '',
    canActivate: [VisibilityGuard],
    children: [
      {
        path: 'topics',
        canActivate: [AuthGuard],
        loadChildren: () => import('app/topics/topic.module').then(m => m.TopicModule)
      },
      {
        path: 'splash',
        canActivate: [AnonymousGuard],
        loadChildren: () => import('app/splash/splash.module').then(m => m.SplashModule)
      },
      {
        path: 'onboarding',
        canActivate: [AuthGuard],
        loadChildren: () => import('app/onboarding/onboarding.module').then(m => m.OnboardingModule)
      },
      {
        path: 'orgs',
        canLoad: [FeatureAccessGuard],
        canActivate: [AuthGuard],
        loadChildren: () => import('app/orgs/org.module').then(m => m.OrgModule),
        data: {
          permissionType: 'view',
          feature: 'orgs'
        }
      },
      {
        path: 'articles',
        canLoad: [FeatureAccessGuard],
        loadChildren: () => import('app/articles/articles.module').then(m => m.ArticlesModule),
        data: {
          permissionType: 'view',
          feature: 'articles'
        }
      },
      {
        path: 'ebooks',
        loadChildren: () => import('app/articles/ebooks-list/ebooks.module').then(m => m.EbooksModule)
      },
      {
        path: 'conversations',
        canActivate: [AuthGuard],
        loadChildren: () => import('app/conversations/conversation.module').then(m => m.ConversationModule)
      },
      {
        path: 'content',
        loadChildren: () => import('app/content/content.module').then(m => m.ContentModule),
      },
      {
        path: 'dashboard',
        canActivate: [AuthGuard],
        loadChildren: () => import('app/dashboard/dashboard.module').then(m => m.DashboardModule)
      },
      {
        path: 'profiles',
        canLoad: [FeatureAccessGuard],
        canActivate: [AuthGuard],
        loadChildren: () => import('app/profiles/profile.module').then(m => m.ProfileModule),
        data: {
          permissionType: 'view',
          feature: 'profiles'
        }
      },
      {
        path: 'programs',
        loadChildren: () => import('app/programs/programs.module').then(m => m.ProgramsModule),
      },
      {
        path: 'events',
        canLoad: [FeatureAccessGuard],
        canActivate: [AuthGuard],
        loadChildren: () => import('app/events/event.module').then(m => m.EventModule),
        data: {
          permissionType: 'view',
          feature: 'events'
        }
      },
      {
        path: 'my_credits',
        loadChildren: () => import('app/referrals/my-rewards/my-rewards.module').then(m => m.MyRewardsModule)
      },
      {
        path: 'amas',
        canActivate: [AuthGuard],
        redirectTo: 'events'
      },
      // to be removed
      {
        path: 'launches',
        canLoad: [FeatureAccessGuard],
        canActivate: [AuthGuard],
        loadChildren: () => import('app/launches/launches.module').then(m => m.LaunchesModule),
        data: {
          permissionType: 'view',
          feature: 'launches'
        }
      },
      // to be removed
      {
        path: 'ideas',
        canLoad: [FeatureAccessGuard],
        canActivate: [AuthGuard],
        loadChildren: () => import('app/ideas/ideas.module').then(m => m.IdeasModule),
        data: {
          permissionType: 'view',
          feature: 'ideas'
        }
      },
      {
        path: 'subscriptions',
        canActivate: [AuthGuard],
        loadChildren: () => import('app/subscriptions/subscriptions.module').then(m => m.SubscriptionsModule)
      },
      {
        path: 'story',
        loadChildren: () => import('app/stories/stories.module').then(m => m.StoriesModule)
      },
      {
        path: 'polls',
        loadChildren: () => import('app/polls/polls.module').then(m => m.PollsModule)
      },
      {
        path: 'notifications',
        canActivate: [AuthGuard],
        loadChildren: () => import('app/activity/activity.module').then(m => m.ActivityModule)
      },
      {
        path: 'communities',
        redirectTo: 'groups'
      },
      {
        path: 'groups',
        canLoad: [FeatureAccessGuard],
        loadChildren: () => import('app/groups/groups.module').then(m => m.GroupsModule),
        data: {
          permissionType: 'view',
          feature: 'groups',
        }
      },
      {
        path: 'jobs',
        canActivate: [AuthGuard],
        loadChildren: () => import('app/jobs/jobs.module').then(m => m.JobsModule)
      },
      {
        path: 'deals',
        canLoad: [FeatureAccessGuard],
        loadChildren: () => import('app/deals/deals.module').then(m => m.DealsModule),
        data: {
          permissionType: 'view',
          feature: 'deals',
        }
      },
      {
        path: 'collections',
        canActivate: [AuthGuard],
        loadChildren: () => import('app/collections/collections.module').then(m => m.CollectionsModule)
      },
      {
        path: 'marketing',
        loadChildren: () => import('app/marketing/marketing.module').then(m => m.MarketingModule)
      },
      {
        path: 'preferences',
        loadChildren: () => import('app/preferences/preferences.module').then(m => m.PreferencesModule)
      },
      {
        path: 'brands',
        loadChildren: () => import('app/brand-pages/brand-pages.module').then(m => m.BrandPagesModule)
      },
      {
        path: 'community-settings',
        loadChildren: () => import('app/workspaces/workspaces.module').then(m => m.WorkspacesModule)
      },
      {
        path: 'features',
        // canActivate: [],
        loadChildren: () => import('app/features/features.module').then(m => m.FeaturesModule)
      },
      {
        path: 'solutions',
        // canActivate: [],
        loadChildren: () => import('app/solutions/solutions.module').then(m => m.SolutionsModule)
      },
      {
        path: 'addons',
        // canActivate: [],
        loadChildren: () => import('app/addons/addons.module').then(m => m.AddonsModule)
      },
      {
        path: 'resources',
        loadChildren: () => import('app/resources/resources.module').then(m => m.ResourcesModule)
      },
      {
        path: 'affiliate-landing',
        loadChildren: () => import('app/workspaces/affiliate-landing/affiliate-landing.module').then(m => m.AffiliateLandingModule)
      },
      {
        path: 'pricing',
        // canActivate: [],
        loadChildren: () => import('app/prices/prices.module').then(m => m.PricesModule)
      },
      {
        path: 'use-cases',
        loadChildren: () => import('app/workspaces/landing/use-cases/use-cases.module').then(m => m.UseCasesModule)
      },
      {
        path: 'platform',
        loadChildren: () => import('app/workspaces/landing/platform/platform.module').then(m => m.PlatformModule)
      },
      {
        path: 'create-trial-workspace',
        loadChildren: () => import('app/workspaces/free-trial-form/free-trial-form.module').then(m => m.FreeTrialFormModule)
      },
      {
        path: 'verification',
        loadChildren: () => import('app/workspaces/verify-email-dialog/verify-email.module').then(m => m.VerifyEmailModule)
      },
      ...WhiteLabelRoutes,
      ...AuthRoutes,
      ...landingRoutes,
      ...homeRoutes,
      {path: '**', redirectTo: '404'}
    ]
  }
];


@NgModule({
  imports: [RouterModule.forRoot(routes, {paramsInheritanceStrategy: 'always', scrollPositionRestoration: 'enabled'})],
  exports: [RouterModule],
  declarations: [],
  providers: []
})
export class AppRoutingModule {
}

сборка не удалась с этой ошибкой

src/app/app.component.html:8:5 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

8     <router-outlet></router-outlet>
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:32:16
    32   templateUrl: './app.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.