將 Angular 從 v8 更新到 v9 並啟用 ivy 為 true 后，組件在開始時未加載

Question

當應用程序啟動時，我在加載組件時遇到問題。 它不是延遲加載的（正如您從應用程序路由文件中看到的那樣），從 v8 更新到 v9 沒問題。 它在 v8 上運行良好，但在更新到 v9 並啟用 ivy 為 true 后，路由不起作用。 如果 ivy 設置為 false，即使在 v9 中，它也會再次工作！ 這很奇怪。

基本上，當用戶輸入 ''.com 時，它會重定向到 /questions 或用戶輸入 /questions.com，當 ivy 為 false 時它正在工作。

以下是有關版本的一些信息：

    "@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"
  }

這是我的配置文件：

{
  "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
  }
}

我的應用程序路由文件：

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 { }

我的應用模塊：

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 {}

和問題路由文件：

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 {
}

所以一切都保持不變，以防萬一使常春藤為真，問題路線（加載組件）不起作用。 其他路線工作正常。 也許我錯過了一些東西，必須在 v9 中更改？？？

如果有人有任何想法，他們是最受歡迎的！ 謝謝你。

Answer 1

我發現了問題。 我通過問題組件一步一步地評論每一行。 問題是在問題子組件之一中提供 AuthService 時！ 似乎構造函數中提供的 Auth 服務尚未“存在”，也就是未初始化。

因此，解決方案是在 AuthService 中，而不是僅使用裝飾器 @Injectable，我現在在應用程序的根目錄中提供此服務，因為它應該是：

@Injectable({
  providedIn: 'root'
})

無論如何，有趣的是，如果 ivy 設置為 false，它就可以工作。 新引擎似乎發生了一些變化。 希望它可以在需要時幫助某人