Server rendered app not functioning as expected

I've followed several workthroughs https://youtu.be/gxCu5TEmxXE on deploying Angular Universal and am currently doing so on firebase. I've successfully got the server rendering the app, BUT for some reason the app isn't bootstrapping from the server code. What I mean to say, is that when I load the app rendered by the server, the actual app itself doesn't function correctly.

I'm not sure if this is because of incompatibility for example with Angular Material https://github.com/angular/universal#in-progress or if I've made some errors in the configuration.

For example, if I load up my homepage via the normal compiled app and navigate to a form, I see the 'expected' form. However, if I load same page via the server rendering then I see the rendered form but I cannot interact with it.

Rendered form that you cannot interact with

Expected result if you navigate through the app

It feels like I am missing a key part of in the integration to make the server side rendered HTML transition into the normal app. What am I missing to make sure that the server rendered HTML transitions and functions in the same way as the normal app?

app.server.module

import {NgModule} from '@angular/core';
import {ServerModule} from '@angular/platform-server';

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
  ],
  // Since the bootstrapped component is not inherited from your
  // imported AppModule, it needs to be repeated here.
  bootstrap: [AppComponent],
})
export class AppServerModule {}

链接地址: http://www.djcxy.com/p/31372.html

上一篇: 带角度和节点的服务器端渲染

下一篇: 服务器呈现应用程序无法按预期运行