将 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，它就可以工作。 新引擎似乎发生了一些变化。 希望它可以在需要时帮助某人