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.

Check your Nodejs version must be 10+. Remove node_modules folder and run `npm install` — ferhado, Mar 22 '20 at 10:57
Check this link may helps you https://stackoverflow.com/questions/58522756/how-do-i-enable-ivy-for-angular-8-or-9 — ferhado, Mar 22 '20 at 11:01
Hi Ferhado. Version is: v12.4.0. Ok, I will try to remove and install again. Will check back! — DM developing, Mar 22 '20 at 11:02
Is there a quick way (command in cli) to remove node modules in project? — DM developing, Mar 22 '20 at 11:04
Hi Ferhado. Noup, still not working. Have removed node_modules file, run npm install. Refreshed project and still not working... — DM developing, Mar 22 '20 at 11:30
I suggest create a blank project with Ivy, when everything works then copy you app files into the blank project. — ferhado, Mar 22 '20 at 11:48

score 0 · Answer 1 · answered Mar 26 '20 at 09:21

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

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

1 Answers1