angular - 将 Angular 从 v8 更新到 v9 并启用 ivy 为 true 后,组件在开始时未加载
问题描述
当应用程序启动时,我在加载组件时遇到问题。它不是延迟加载的(从应用程序路由文件中可以看到),从 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 中进行更改???
如果有人有一些想法,他们是最受欢迎的!谢谢你。
解决方案
我发现了问题。我一步一步地评论了每一行的问题组件。问题是在问题子组件之一中提供 AuthService 时!似乎构造函数中提供的身份验证服务还没有“还没有”,也就是没有初始化。
所以解决方案是在 AuthService 中,而不是仅仅使用装饰器 @Injectable,我现在在应用程序的根目录中提供此服务,它应该是:
@Injectable({
providedIn: 'root'
})
无论如何,有趣的是,如果 ivy 设置为 false,它会起作用。新引擎似乎发生了一些变化。如果需要,希望它可以帮助某人
推荐阅读
- java - 使用 java 从巨大的 xslx 文件创建数据透视表
- angular5 - 具有自定义验证的 Angular5 模板驱动表单不会重置验证错误
- php - 成功,在任何地方都没有显示任何错误,但任何数据都不会进入我的数据库
- javascript - 如何从select2的下拉列表中删除重复的选项
- neural-network - 如何创建自己的深度神经网络模型文件?
- sql-server - 在 SQL Server 视图中查找计算列
- python - Django:动态创建数据库
- python-3.x - 如何将 SparseVectors 传递给 pyspark 中的“mllib”
- php - Laravel Mailable 类不包括地址中的“名称”
- c# - 如何在页面之间传输数据?