After updating Angular from v8 to v9 and enabling ivy to true, component is not loading at beginning

Question

I am having problem with loading component, when app starts. It is not lazy loaded(as you can see it from app route file), update from v8 to v9 went ok. It works great at v8, but after updating to v9 and enabling ivy to true, routing is not working. If ivy is set to false, it works again, even in v9! That's weird.

Basically, when user enters ''.com, it redirects to /questions or user enters /questions.com, it is working when ivy is false.

Here are some info about versions:

    "@angular/animations": "~9.0.7",
    "@angular/common": "~9.0.7",
    "@angular/compiler": "~9.0.7",
    "@angular/core": "~9.0.7",
    "@angular/forms": "~9.0.7",
    "@angular/platform-browser": "~9.0.7",
    "@angular/platform-browser-dynamic": "~9.0.7",
    "@angular/platform-server": "~9.0.7",
    "@angular/router": "~9.0.7",
    "@nguniversal/express-engine": "^8.2.6",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "bootstrap": "^4.4.1",
    "chart.js": "^2.9.3",
    "core-js": "^2.6.11",
    "express": "^4.15.2",
    "ng2-charts": "^2.3.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

This is my config file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableIvy": false,
    "fullTemplateTypeCheck": false,
    "strictTemplates": false
  }
}

My app routing file:

import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './core/home/home.component';
import { NgModule } from '@angular/core';


const routes: Routes = [
  { path: 'info', component: HomeComponent },
  { path: '', redirectTo: '/questions', pathMatch: 'full'},
  { path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule) },
  { path: 'about', loadChildren: () => import('./aboutus/aboutus.module').then(m => m.AboutUsModule) },
  { path: 'Frequently-Asked-Questions', loadChildren: () => import('./faq/faq.module').then(m => m.FaqModule) },
  { path: 'legal', loadChildren: () => import('./legal/legal.module').then(m => m.LegalModule) },
  { path: 'help', loadChildren: () => import('./help/help.module').then(m => m.HelpModule) },
  { path: 'categories', loadChildren: () => import('./categories/categories.module').then(m => m.CategoriesModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })
  ],
  exports: [RouterModule]
})


export class AppRoutingModule { }

My app module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'

import { AppComponent } from './app.component';

import { CoreModule } from './core/core.module';
import { AuthErrorHandler } from './auth/autherrorhandler.service';
import { LoaderModule } from './core/loader/loader.module';
import { UrlSerializer } from '@angular/router';
import CustomUrlSerializer from './shared/CustomEncoder.service';
import { SeoSocialSharedService } from './shared/SeoSocialSharedService';
import { ServerErrorModule } from './core/server-error/server-error.module';
import { AuthModule } from './auth/auth.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GoogleAnalyticsEventsService } from './shared/googleAnalyticsEventsService.service';
import { QuestionsModule } from './questions/questions.module';


const customUrlSerializer = new CustomUrlSerializer();
const CustomUrlSerializerProvider = {
  provide: UrlSerializer,
  useValue: customUrlSerializer
};


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    HttpClientModule,
    BrowserAnimationsModule,
    LoaderModule,
    CoreModule,
    QuestionsModule,
    AuthModule,
    ServerErrorModule,
  ],
  providers: [
    SeoSocialSharedService,
    { provide: ErrorHandler, useClass: AuthErrorHandler },
    CustomUrlSerializerProvider,
    GoogleAnalyticsEventsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

And Questions routing file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


import { AuthGuard } from '../auth/auth-guard.service';
import { QuestionsComponent } from './questions.component';
import { QuestionAskComponent } from './question-ask/question-ask.component';
import { QuestionDetailComponent } from './question-detail/question-detail.component';


const questionRoutes: Routes = [

  { path: 'questions', component: QuestionsComponent },
  { path: ':questions/:id/:title', component: QuestionDetailComponent },
  { path: ':questions/new', component: QuestionAskComponent, canActivate: [AuthGuard] },
]

@NgModule({
  imports: [
    RouterModule.forChild(questionRoutes)
  ],
  exports: [RouterModule]
})
export class QuestionsRoutingModule {
}

So everything stays the same, just in case enabling ivy to true, question route(loading component) is not working. Other routes are working fine. Maybe I am missing something, have to change in v9???

If anyone has some idea, they are most welcome! Thank you.

Answer 1

I found the problem. I went through questions component step by step commenting every single line. The problem was when providing AuthService in one of the questions child component! It seems that Auth service provided in constructor was not "there yet" aka not initialised.

So the solution was in AuthService instead of just using decorator @Injectable, I am now providing this service in root of the app, as it should be:

@Injectable({
  providedIn: 'root'
})

Anyway, it is interesting that it is working if ivy is set false. It seems something has changed in new engine. Hope it helps someone if needed