Angular Universal BrowserModule.withServerTransition已被弃用，有什么替代品？

huangapple
go评论93阅读模式
英文:

Angular Universal BrowserModule.withServerTransition is deprecated, what is the replacement for this?

问题

我正在使用 Angular 16.0.0，并且使用 Angular Universal 服务器端渲染，但当我在我的应用模块中导入 BrowserModule.withServerTransition 时，它被标记为已弃用，有什么替代方法？

我的 app.module.ts：

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { AppRoutingModule } from './app-routing.module';
  4. import { AppComponent } from './app.component';
  5. import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
  6. import { MatMenuModule } from '@angular/material/menu';
  7. import { MatButtonModule } from '@angular/material/button';
  8. import { MatIconModule } from '@angular/material/icon';
  9. import { MatCardModule } from '@angular/material/card';
  10. import { HomeComponent } from './home/home.component';
  11. import { MatTabsModule } from '@angular/material/tabs';
  12. import { CoursesCardListComponent } from './courses-card-list/courses-card-list.component';
  13. import { CourseComponent } from "./course/course.component";
  14. import { MatDatepickerModule } from "@angular/material/datepicker";
  15. import { MatDialogModule } from "@angular/material/dialog";
  16. import { MatInputModule } from "@angular/material/input";
  17. import { MatListModule } from "@angular/material/list";
  18. import { MatPaginatorModule } from "@angular/material/paginator";
  19. import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
  20. import { MatSelectModule } from "@angular/material/select";
  21. import { MatSidenavModule } from "@angular/material/sidenav";
  22. import { MatSortModule } from "@angular/material/sort";
  23. import { MatTableModule } from "@angular/material/table";
  24. import { MatToolbarModule } from "@angular/material/toolbar";
  25. import { CoursesService } from "./services/courses.service";
  26. import { CourseResolver } from "./services/course.resolver";
  27. import { CourseDialogComponent } from './course-dialog/course-dialog.component';
  28. import { ReactiveFormsModule } from "@angular/forms";
  29. import { HttpClientModule } from '@angular/common/http';
  30. import { AboutComponent } from './about/about.component';
  32. @NgModule({
  33.   declarations: [
  34.     AppComponent,
  35.     HomeComponent,
  36.     CourseComponent,
  37.     CoursesCardListComponent,
  38.     CourseDialogComponent,
  39.     AboutComponent,
  40.   ],
  41.   imports: [
  42.     BrowserModule.withServerTransition({ appId: 'serverApp' }),
  43.     BrowserAnimationsModule,
  44.     MatMenuModule,
  45.     MatButtonModule,
  46.     MatIconModule,
  47.     MatCardModule,
  48.     MatTabsModule,
  49.     MatSidenavModule,
  50.     MatListModule,
  51.     MatToolbarModule,
  52.     MatInputModule,
  53.     MatTableModule,
  54.     MatPaginatorModule,
  55.     MatSortModule,
  56.     MatProgressSpinnerModule,
  57.     MatDialogModule,
  58.     AppRoutingModule,
  59.     MatSelectModule,
  60.     MatDatepickerModule,
  61.     ReactiveFormsModule,
  62.     HttpClientModule
  63.   ],
  64.   providers: [
  65.     CoursesService,
  66.     CourseResolver
  67.   ],
  68.   bootstrap: [AppComponent]
  69. })
  70. export class AppModule {
  71. }

请注意，BrowserModule.withServerTransition 已经被弃用，可以替换为 BrowserModule 并在 AppModule 的 imports 数组中使用 BrowserTransferStateModule。希望这对你有所帮助。

package.json 文件部分未提供翻译，因为它包含了一些具体的依赖和脚本信息。

英文:

I am using Angular 16.0.0 and with Angular Universal server side rendering, but when I
Import BrowserModule.withServerTransition in my app module its marked as deprecated, what is the replacement for it ?

Angular Universal BrowserModule.withServerTransition已被弃用，有什么替代品？

my app.module.ts

  1. import {BrowserModule} from '@angular/platform-browser';
  2. import {NgModule} from '@angular/core';
  3. import {AppRoutingModule} from './app-routing.module';
  4. import {AppComponent} from './app.component';
  5. import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
  6. import {MatMenuModule} from '@angular/material/menu';
  7. import {MatButtonModule} from '@angular/material/button'
  8. import {MatIconModule} from '@angular/material/icon';
  9. import {MatCardModule} from '@angular/material/card';
  10. import { HomeComponent } from './home/home.component';
  11. import {MatTabsModule} from '@angular/material/tabs';
  12. import { CoursesCardListComponent } from './courses-card-list/courses-card-list.component';
  13. import {CourseComponent} from "./course/course.component";
  14. import { MatDatepickerModule } from "@angular/material/datepicker";
  15. import { MatDialogModule } from "@angular/material/dialog";
  16. import { MatInputModule } from "@angular/material/input";
  17. import { MatListModule } from "@angular/material/list";
  18. import { MatPaginatorModule } from "@angular/material/paginator";
  19. import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
  20. import { MatSelectModule } from "@angular/material/select";
  21. import { MatSidenavModule } from "@angular/material/sidenav";
  22. import { MatSortModule } from "@angular/material/sort";
  23. import { MatTableModule } from "@angular/material/table";
  24. import { MatToolbarModule } from "@angular/material/toolbar";
  25. import {CoursesService} from "./services/courses.service";
  26. import {CourseResolver} from "./services/course.resolver";
  27. import { CourseDialogComponent } from './course-dialog/course-dialog.component';
  28. import {ReactiveFormsModule} from "@angular/forms";
  29. import { HttpClientModule} from '@angular/common/http';
  30. import {AboutComponent} from './about/about.component';
  31. @NgModule({
  32. declarations: [
  33. AppComponent,
  34. HomeComponent,
  35. CourseComponent,
  36. CoursesCardListComponent,
  37. CourseDialogComponent,
  38. AboutComponent,
  39. ],
  40. imports: [
  41. BrowserModule.withServerTransition({ appId: 'serverApp' }),
  42. //BrowserTransferStateModule,
  43. BrowserAnimationsModule,
  44. MatMenuModule,
  45. MatButtonModule,
  46. MatIconModule,
  47. MatCardModule,
  48. MatTabsModule,
  49. MatSidenavModule,
  50. MatListModule,
  51. MatToolbarModule,
  52. MatInputModule,
  53. MatTableModule,
  54. MatPaginatorModule,
  55. MatSortModule,
  56. MatProgressSpinnerModule,
  57. MatDialogModule,
  58. AppRoutingModule,
  59. MatSelectModule,
  60. MatDatepickerModule,
  61. ReactiveFormsModule,
  62. HttpClientModule
  63. ],
  64. providers: [
  65. CoursesService,
  66. CourseResolver
  67. ],
  68. bootstrap: [AppComponent]
  69. })
  70. export class AppModule {
  71. }

package.json

  1. {
  2. "name": "angular-universal-course",
  3. "version": "0.0.0",
  4. "scripts": {
  5. "ng": "ng",
  6. "start": "ng serve",
  7. "build": "ng build",
  8. "test": "ng test",
  9. "lint": "ng lint",
  10. "e2e": "ng e2e",
  11. "serve:prerender": "http-server -c-1 dist/angular-universal-course/browser",
  12. "dev:ssr": "ng run angular-universal-course:serve-ssr",
  13. "serve:ssr": "node dist/angular-universal-course/server/main.js",
  14. "build:ssr": "ng build --configuration production && ng run angular-universal-course:server:production",
  15. "prerender": "ng run angular-universal-course:prerender  --routes routes.txt"
  16. },
  17. "private": true,
  18. "dependencies": {
  19. "@angular/animations": "^16.0.0",
  20. "@angular/cdk": "^16.0.0",
  21. "@angular/common": "^16.0.0",
  22. "@angular/compiler": "^16.0.0",
  23. "@angular/core": "^16.0.0",
  24. "@angular/forms": "^16.0.0",
  25. "@angular/material": "^16.0.0",
  26. "@angular/platform-browser": "^16.0.0",
  27. "@angular/platform-browser-dynamic": "^16.0.0",
  28. "@angular/platform-server": "^16.0.0",
  29. "@angular/router": "^16.0.0",
  30. "@nguniversal/express-engine": "^16.0.0",
  31. "@types/express": "^4.17.8",
  32. "express": "^4.15.2",
  33. "rxjs": "~7.8.0",
  34. "tslib": "^2.3.0",
  35. "zone.js": "~0.13.0"
  36. },
  37. "devDependencies": {
  38. "@angular-devkit/build-angular": "^16.0.0",
  39. "@angular/cli": "^16.0.0",
  40. "@angular/compiler-cli": "^16.0.0",
  41. "@nguniversal/builders": "^16.0.0",
  42. "@types/jasmine": "~3.8.0",
  43. "@types/jasminewd2": "~2.0.3",
  44. "@types/node": "^14.15.0",
  45. "http-server": "^14.0.0",
  46. "jasmine-core": "~3.8.0",
  47. "jasmine-spec-reporter": "~5.0.0",
  48. "karma": "~6.3.2",
  49. "karma-chrome-launcher": "~3.1.0",
  50. "karma-coverage-istanbul-reporter": "~3.0.2",
  51. "karma-jasmine": "~4.0.0",
  52. "karma-jasmine-html-reporter": "^1.5.0",
  53. "ts-node": "~8.3.0",
  54. "typescript": "~5.0.4"
  55. }
  56. }

答案1

得分: 5

如果您需要设置一个ID，请使用APP_ID InjectionToken：

{ provide: APP_ID, useValue: 'serverApp' }。

注意：如果您在页面上只引导一个Angular应用程序，您可以将其删除。只有在您有多个Angular应用程序时才需要指定它。

英文:

If you need to set an ID use the APP_ID InjectionToken :

{ provide: APP_ID, useValue: 'serverApp' }.

NB: If you bootstrap only one Angular app on your page, you can just remove it. Specifying is only necessary when you have multiple angular apps.

huangapple
  • 本文由 发表于 2023年6月12日 07:05:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/76452844.html
  • angular
  • angular-universal
  • angular16
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定