Question

我在部署Angular Universal时已经完成了几项工作https://youtu.be/gxCu5TEmxXE，目前我在firebase上这样做了。我已成功获得服务器呈现应用程序，但由于某种原因，应用程序不是从服务器代码引导。我的意思是，当我加载服务器呈现的应用程序时，实际的应用程序本身无法正常运行。

我不确定这是因为与Angular Material https://github.com/angular/universal#in-progress不兼容，还是因为我在配置中出现了一些错误。

例如，如果我通过正常编译的应用程序加载我的主页并导航到表单，我会看到“预期”表单。但是，如果我通过服务器渲染加载相同的页面，那么我会看到渲染的表单，但我无法与它进行交互。

Rendered form that you cannot interact with

Expected result if you navigate through the app

感觉我错过了集成中的关键部分，使服务器端呈现HTML转换为普通应用程序。我缺少什么来确保服务器以与普通应用程序相同的方式呈现HTML转换和功能？

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 {}

server.ts

import * as functions from 'firebase-functions';
import * as angularUniversal from 'angular-universal-express-firebase';

export let ssrapp = angularUniversal.trigger({
	index: __dirname + '/browser/index.html',
	main: __dirname + '/server/main.bundle',
	enableProdMode: true,
	browserCacheExpiry: 1200,
	cdnCacheExpiry: 600
});

firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssrapp"
      }
    ]
  },
  "functions": {
    "predeploy": "npm --prefix functions run build",
    "source": "functions"
  }
}

的package.json

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
    "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "generate:prerender": "cd dist && node prerender",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:prerender": "cd dist/browser && http-server",
    "serve:ssr": "node dist/server"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.1.0",
    "@angular/cdk": "5.0.1",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/flex-layout": "git+https://github.com/angular/flex-layout-builds.git",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/material": "5.0.1",
    "@angular/material-moment-adapter": "^5.0.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/platform-server": "^5.2.0-beta.0",
    "@angular/router": "^5.1.0",
    "@angular/service-worker": "^5.1.0",
    "@nguniversal/express-engine": "^5.0.0-beta.5",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "@types/moment": "^2.13.0",
    "angular-ssr": "^0.10.40",
    "angular2-universal": "^2.1.0-rc.1",
    "body-parser": "^1.18.2",
    "braintree-web": "^3.26.0",
    "core-js": "^2.4.1",
    "moment": "^2.20.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },

Angular Universal - 服务器呈现的应用程序无法按预期运行

0 个答案: