Angular 应用程序从 V8 更新到 V9 后无法编译
Angular App cannot compile after update from V8 to V9
我最近使用 Angular 官方网站提供的 this guide 将我的 angular 应用程序从 V8 更新到 V9。我按照指南中的所有步骤操作并成功更新了应用程序,但现在当我尝试构建时,我收到大量与管道指令相关的错误,甚至是我在模板中使用的组件。
这是 管道 上的一个错误示例:
Cannot declare 'TimeAgoPipe' in an NgModule as it's not a part of the current compilation.
指令错误的另一个例子:
Can't bind to 'ngModel' since it isn't a known property of 'input'
此代码在 Angular 8:
上运行良好
<input required name="password" class="form-control mr-sm-2" type="password" placeholder="Password" [(ngModel)]="model.password"/>
它甚至找不到我创建的 组件 ,即使它们已在 app.module.ts
文件中声明。它给我这个错误:
'app-nav' is not a known element:
If 'app-nav' is an Angular component, then verify that it is part of this module.
If 'app-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
这是我的 app.module.ts
文件,其中包含所有未找到的内容:
import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { NgModule, Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { JwtModule } from '@auth0/angular-jwt';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDropdownModule, PaginationModule, ButtonsModule } from 'ngx-bootstrap';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { NgxGalleryModule } from 'ngx-gallery';
import { FileUploadModule } from 'ng2-file-upload';
import { TimeAgoPipe } from 'time-ago-pipe';
import { CommonModule, DatePipe } from '@angular/common';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { AuthService } from './_services/auth.service';
import { HomeComponent } from './home/home.component';
import { RegisterComponent } from './register/register.component';
import { ErrorInterceptorProvider } from './_services/error.interceptor';
import { MembersListComponent } from './members/members-list/members-list.component';
import { ListsComponent } from './lists/lists.component';
import { MessagesComponent } from './messages/messages.component';
import { appRoutes } from './routes';
import { MemberCardComponent } from './members/member-card/member-card.component';
import { environment } from 'src/environments/environment';
import { MemberDetailComponent } from './members/member-detail/member-detail.component';
import { UserService } from './_services/user.service';
import { AlertifyService } from './_services/alertify.service';
import { AuthGuard } from './_guards/auth.guard';
import { MemberDetailResolver } from './_resolvers/member-detail.resolver';
import { MemberListResolver } from './_resolvers/member-list.resolver';
import { MemberEditComponent } from './members/member-edit/member-edit.component';
import { MemberEditResolver } from './_resolvers/member-edit.resolver';
import { PreventUsavedChangesGuard } from './_guards/prevent-usaved-changes.guard';
import { DetailCardContentComponent } from './members/detail-card-content/detail-card-content.component';
import { PhotoEditorComponent } from './members/photo-editor/photo-editor.component';
export function tokenGetter() {
return localStorage.getItem(environment.authTokenName);
}
@Injectable()
export class CustomHammerConfig extends HammerGestureConfig {
overrides = {
pinch: { enable: false },
rotate: { enable: false }
};
}
@NgModule({
declarations: [
AppComponent,
NavComponent,
HomeComponent,
RegisterComponent,
MembersListComponent,
ListsComponent,
MessagesComponent,
MemberCardComponent,
MemberDetailComponent,
MemberEditComponent,
DetailCardContentComponent,
PhotoEditorComponent,
TimeAgoPipe,
DatePipe
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
CommonModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
BsDatepickerModule.forRoot(),
ButtonsModule.forRoot(),
BrowserAnimationsModule,
RouterModule.forRoot(appRoutes),
PaginationModule.forRoot(),
NgxGalleryModule,
FileUploadModule,
JwtModule.forRoot({
config: {
tokenGetter,
whitelistedDomains: environment.routesWithAuthorization,
blacklistedRoutes: environment.routesWithoutAuthorization
}
})
],
providers: [
AuthService,
UserService,
AlertifyService,
AuthGuard,
PreventUsavedChangesGuard,
MemberDetailResolver,
MemberListResolver,
MemberEditResolver,
ErrorInterceptorProvider,
{ provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }
],
bootstrap: [AppComponent]
})
export class AppModule {}
更新
Instinct 和 https://github.com/AndrewPoyntz/time-ago-pipe/issues/33 建议的解决方案有效。你必须记住在 angular.json 上禁用 AOT 编译,尽管
看起来这个模块没有为 Angular9 更新。我在这里找到了解决方法
https://github.com/AndrewPoyntz/time-ago-pipe/issues/33
import { TimeAgoPipe } from 'time-ago-pipe';
@Pipe({
name: 'timeAgo',
pure: false
})
export class TimeAgoExtendsPipe extends TimeAgoPipe {}
@NgModule({
declarations: [
TimeAgoExtendsPipe,
...
我最近使用 Angular 官方网站提供的 this guide 将我的 angular 应用程序从 V8 更新到 V9。我按照指南中的所有步骤操作并成功更新了应用程序,但现在当我尝试构建时,我收到大量与管道指令相关的错误,甚至是我在模板中使用的组件。
这是 管道 上的一个错误示例:
Cannot declare 'TimeAgoPipe' in an NgModule as it's not a part of the current compilation.
指令错误的另一个例子:
Can't bind to 'ngModel' since it isn't a known property of 'input'
此代码在 Angular 8:
上运行良好<input required name="password" class="form-control mr-sm-2" type="password" placeholder="Password" [(ngModel)]="model.password"/>
它甚至找不到我创建的 组件 ,即使它们已在 app.module.ts
文件中声明。它给我这个错误:
'app-nav' is not a known element:
If 'app-nav' is an Angular component, then verify that it is part of this module.
If 'app-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
这是我的 app.module.ts
文件,其中包含所有未找到的内容:
import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { NgModule, Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { JwtModule } from '@auth0/angular-jwt';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDropdownModule, PaginationModule, ButtonsModule } from 'ngx-bootstrap';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { NgxGalleryModule } from 'ngx-gallery';
import { FileUploadModule } from 'ng2-file-upload';
import { TimeAgoPipe } from 'time-ago-pipe';
import { CommonModule, DatePipe } from '@angular/common';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { AuthService } from './_services/auth.service';
import { HomeComponent } from './home/home.component';
import { RegisterComponent } from './register/register.component';
import { ErrorInterceptorProvider } from './_services/error.interceptor';
import { MembersListComponent } from './members/members-list/members-list.component';
import { ListsComponent } from './lists/lists.component';
import { MessagesComponent } from './messages/messages.component';
import { appRoutes } from './routes';
import { MemberCardComponent } from './members/member-card/member-card.component';
import { environment } from 'src/environments/environment';
import { MemberDetailComponent } from './members/member-detail/member-detail.component';
import { UserService } from './_services/user.service';
import { AlertifyService } from './_services/alertify.service';
import { AuthGuard } from './_guards/auth.guard';
import { MemberDetailResolver } from './_resolvers/member-detail.resolver';
import { MemberListResolver } from './_resolvers/member-list.resolver';
import { MemberEditComponent } from './members/member-edit/member-edit.component';
import { MemberEditResolver } from './_resolvers/member-edit.resolver';
import { PreventUsavedChangesGuard } from './_guards/prevent-usaved-changes.guard';
import { DetailCardContentComponent } from './members/detail-card-content/detail-card-content.component';
import { PhotoEditorComponent } from './members/photo-editor/photo-editor.component';
export function tokenGetter() {
return localStorage.getItem(environment.authTokenName);
}
@Injectable()
export class CustomHammerConfig extends HammerGestureConfig {
overrides = {
pinch: { enable: false },
rotate: { enable: false }
};
}
@NgModule({
declarations: [
AppComponent,
NavComponent,
HomeComponent,
RegisterComponent,
MembersListComponent,
ListsComponent,
MessagesComponent,
MemberCardComponent,
MemberDetailComponent,
MemberEditComponent,
DetailCardContentComponent,
PhotoEditorComponent,
TimeAgoPipe,
DatePipe
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
CommonModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
BsDatepickerModule.forRoot(),
ButtonsModule.forRoot(),
BrowserAnimationsModule,
RouterModule.forRoot(appRoutes),
PaginationModule.forRoot(),
NgxGalleryModule,
FileUploadModule,
JwtModule.forRoot({
config: {
tokenGetter,
whitelistedDomains: environment.routesWithAuthorization,
blacklistedRoutes: environment.routesWithoutAuthorization
}
})
],
providers: [
AuthService,
UserService,
AlertifyService,
AuthGuard,
PreventUsavedChangesGuard,
MemberDetailResolver,
MemberListResolver,
MemberEditResolver,
ErrorInterceptorProvider,
{ provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }
],
bootstrap: [AppComponent]
})
export class AppModule {}
更新
Instinct 和 https://github.com/AndrewPoyntz/time-ago-pipe/issues/33 建议的解决方案有效。你必须记住在 angular.json 上禁用 AOT 编译,尽管
看起来这个模块没有为 Angular9 更新。我在这里找到了解决方法
https://github.com/AndrewPoyntz/time-ago-pipe/issues/33
import { TimeAgoPipe } from 'time-ago-pipe';
@Pipe({
name: 'timeAgo',
pure: false
})
export class TimeAgoExtendsPipe extends TimeAgoPipe {}
@NgModule({
declarations: [
TimeAgoExtendsPipe,
...