Issue
After migrating to Angular 17, the app.module.ts is breaking :(
'@nguniversal/common' has been replaced by '@angular/ssr', however the TransferHttpCachModule has this error Module '"@angular/ssr"' has no exported member 'TransferHttpCacheModule'.ts(2305).
Below the app.module.ts : UPDATE
import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CarouselComponent } from './carousel/carousel.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
/*MATERIAL*/
import { MatIconModule } from '@angular/material/icon';
import { MatBadgeModule } from '@angular/material/badge';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatRippleModule } from '@angular/material/core';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSliderModule as MatSliderModule } from '@angular/material/slider';
import { MatSnackBarModule as MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSelectModule} from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
/**/
import { registerLocaleData } from '@angular/common'
import { HttpClientModule, HTTP_INTERCEPTORS,HttpClientJsonpModule } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { ResetComponent } from './reset/reset.component';
import { EulaComponent } from './eula/eula.component';
import { PrivacyComponent } from './privacy/privacy.component';
import { AboutComponent } from './about/about.component';
import { WorksComponent } from './works/works.component';
import { FoundryComponent } from './foundry/foundry.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { HomeComponent } from './home/home.component';
import { ContactComponent } from './contact/contact.component';
import { AccountComponent } from './account/account.component';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { FoundryDetailsComponent } from './foundry-details/foundry-details.component';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
import { environment } from '../environments/environment';
import { GoogleMapsModule } from '@angular/google-maps';
import { ProjectComponent } from './project/project.component';
import { ValidateEqualModule } from 'ng-validate-equal';
import { UserMenuComponent } from './user-menu/user-menu.component';
import { SelectorComponent } from './selector/selector.component';
import { ShoppingCartItemComponent } from './shopping-cart-item/shopping-cart-item.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { CheckComponent } from './check/check.component';
import { NgxStripeModule } from 'ngx-stripe';
import { environment as env } from '../environments/environment';
import { FoundryGridComponent } from './foundry-grid/foundry-grid.component';
import { FaqComponent } from './faq/faq.component';
import { FoundryFontComponent } from './foundry-font/foundry-font.component'
import { DatePipe } from '@angular/common';
import { FoundryTrialComponent } from './foundry-trial/foundry-trial.component';
import { FoundryListComponent } from './foundry-list/foundry-list.component';
import { GuideComponent } from './guide/guide.component';
import localeFr from '@angular/common/locales/fr';
import { SelectComponent } from './select/select.component'
import { MultiComponent } from './multi/multi.component';
import { PersonalComponent } from './personal/personal.component';
import { OrdersComponent } from './orders/orders.component';
import { InvoicesComponent } from './invoices/invoices.component';
import { PasswordComponent } from './password/password.component';
import { SuccessComponent } from './success/success.component';
import { ErrorComponent } from './error/error.component';
import { FoundryIsAddedIntoCartPipe } from './pipes/foundry-is-added-into-cart.pipe';
import { WebpPipe } from './webp.pipe';
import { PhotographyComponent } from './photography/photography.component';
import { FilterByTypePipe } from './filter-by-type.pipe';
import { VideoHoverDirective } from './video-hover.directive';
import {OverlayModule} from '@angular/cdk/overlay';
import { ServiceWorkerModule } from '@angular/service-worker';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { IConfig } from 'ngx-mask';
registerLocaleData(localeFr);
export const options: Partial<IConfig> | (() => Partial<IConfig>) = null;
@NgModule({
declarations: [
AppComponent,
ResetComponent,
EulaComponent,
PrivacyComponent,
AboutComponent,
WorksComponent,
FoundryComponent,
NotFoundComponent,
HomeComponent,
ContactComponent,
AccountComponent,
FoundryDetailsComponent,
ShoppingCartComponent,
ProjectComponent,
CarouselComponent,
UserMenuComponent,
SelectorComponent,
ShoppingCartItemComponent,
CheckoutComponent,
CheckComponent,
FoundryGridComponent,
FaqComponent,
FoundryFontComponent,
FoundryTrialComponent,
FoundryListComponent,
GuideComponent,
SelectComponent,
MultiComponent,
PersonalComponent,
OrdersComponent,
InvoicesComponent,
PasswordComponent,
SuccessComponent,
ErrorComponent,
FoundryIsAddedIntoCartPipe,
WebpPipe,
PhotographyComponent,
FilterByTypePipe,
VideoHoverDirective,
],
imports: [
BrowserModule.withServerTransition({ appId: 'serverApp' }),
NgxStripeModule.forRoot(env.stripeKey),
AppRoutingModule,
MatTooltipModule,
OverlayModule,
MatAutocompleteModule,
BrowserAnimationsModule,
MatToolbarModule,
MatIconModule,
MatBadgeModule,
MatSidenavModule,
MatDividerModule,
MatFormFieldModule,
MatInputModule,
MatExpansionModule,
MatCheckboxModule,
MatGridListModule,
MatRippleModule,
HttpClientModule,
HttpClientJsonpModule,
ScrollingModule,
ReactiveFormsModule,
FormsModule,
MatSnackBarModule,
MatButtonToggleModule,
MatSliderModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
GoogleMapsModule,
ValidateEqualModule,
MatSelectModule
],
providers: [
DatePipe,
{
provideClientHydration(),
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
},
],
bootstrap: [AppComponent],
})
export class AppModule {}
Can a Angular 17 expert help me to migrate ?
I saw that there is no more module needed for angular 17, how can I smoothly remove the app.module.ts ?
Solution
The TransferHttpCachModule
is now provided when using the hydration features.
You will need to add provideClientHydration()
to your providers.
Answered By - Matthieu Riegler
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.