3

我有一个 Angular 版本 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 {}

app.routes

.
.
.
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"
    ]
  }
}

我的延迟加载模块不适用于角度通用。
请让我知道是否有人以前观察过这个问题以及任何想法。

4

0 回答 0