Angular应用在从V8更新到V9后无法编译

Question

Angular应用在从V8更新到V9后无法编译

angularmigrationangular9

9

我最近使用官方 Angular 网站提供的指南，将我的 Angular 应用程序从 V8 升级到了 V9。我按照指南中的所有步骤进行更新，应用程序已成功升级，但现在当我尝试构建时，我会遇到很多与管道指令和模板中使用的组件相关的错误。

以下是一个关于管道错误的例子：

无法在 NgModule 中声明 'TimeAgoPipe'，因为它不是当前编译的一部分。

另一个关于指令错误的例子：

不能绑定到 'ngModel'，因为它不是 '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' 不是已知元素：

如果 'app-nav' 是 Angular 组件，则验证它是否属于此模块。

如果 'app-nav' 是 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到此组件的 '@NgModule.schemas' 中以抑制此消息。

这是我的 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编译。

- Endi Zhupani

你找出原因了吗？ - Roadirsh

1

我遇到了同样的问题。 - Instinct

更新了问题并包含了解决方案。 - Endi Zhupani

如果你还没有正确更新到v9，请尝试点击这个链接： https://update.angular.io/#8.0:9.0 - Waqar Naeem

@WaqarNaeem，那就是我使用的那个。我认为大部分问题都来自于一些库还没有适应 Angular 9。 - Endi Zhupani

在 angular.json 中禁用 AOT。 - Ahmed

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Instinct · Accepted Answer

看起来这个模块还没有更新到Angular 9。我在这里找到了一个解决方法：

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,
...