Question

我有一个角度版本为7的现有CLI项目。我需要为SEO和社交共享元标记的使用设置服务器端呈现。

我遵循https://angular.io/guide/universal中给出的官方指南，并从git存储库https://github.com/angular/angular-cli/wiki/stories-universal-rendering中获得一些帮助。

我安装了所有NPM模块，并按照上述两个链接进行操作，但是当我尝试使用以下命令构建套件时

ng run web:server

这给我一个错误。

屏幕截图：https://www.screencast.com/t/J2d0AeGFnqt

app.server.module.ts

import {NgModule} from '@angular/core';
import {ServerModule} from '@angular/platform-server';
import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader';

import {AppModule} from './app.module';
import {AppComponent} from './app.component';

@NgModule({
 imports: [
   // The AppServerModule should import your AppModule followed
   // by the ServerModule from @angular/platform-server.
   AppModule,
   ServerModule,
   ModuleMapLoaderModule // <-- *Important* to have lazy-loaded routes work
 ],
 // Since the bootstrapped component is not inherited from your
 // imported AppModule, it needs to be repeated here.
 bootstrap: [AppComponent],
})
export class AppServerModule {}

应用路线

.
.
.
export const routes: Routes = [    
   { path: 'reset_password/:token', data: { title: 'Reset Password' }, component: ResetPasswordComponent, canActivate: [AuthGuard] },
   {
       path: '',
       component: LayoutComponent,
       data: {
           title: 'Home'
       },
       children: [
           {
               path: 'home',
               loadChildren: './modules/home/home.module#HomeModule'
           },
           {
               path: 'service-providers',
               loadChildren: './modules/service-providers/service-providers.module#ServiceProvidersModule'
           },
     ]
},
];

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

我的惰性加载模块不能与通用角度一起使用。
请让我知道是否有人以前曾观察过此问题以及任何想法。

使用angular Universal的Angular服务器端渲染不适用于延迟加载模块

0 个答案: