Angular Universal : How to resolve missing names, 模块和其他奇怪的东西

标签 angular typescript firebase google-cloud-functions server-side-rendering

主应用程序中一切正常，但尝试提供捆绑的 SSR 会产生我不明白的错误。我将在下面发布有关设置的所有内容。

到处都有太多的小部件会损坏，我希望制作服务器端应用程序的过程能够随着时间的推移而改进。

此外，我对此设置的某些部分不太有信心，因为我仍在努力掌握窍门，任何改进建议将不胜感激，谢谢。

函数:封装 json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase serve --only functions",
    "shell": "firebase experimental:functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "firebase-admin": "~5.10.0",
    "firebase-functions": "^0.9.0",
    "@angular/animations": "^5.2.9",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.9",
    "@angular/compiler": "^5.2.9",
    "@angular/core": "^5.2.9",
    "@angular/forms": "^5.2.9",
    "@angular/http": "^5.2.9",
    "@angular/material": "^2.0.0-beta.10",
    "@angular/platform-browser": "^5.2.9",
    "@angular/platform-browser-dynamic": "^5.2.9",
    "@angular/platform-server": "^5.2.9",
    "@angular/router": "^5.2.9",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "@nguniversal/express-engine": "^5.0.0-beta.7",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.7",
    "@types/lodash": "^4.14.74",
    "angularfire2": "^4.0.0-rc0",
    "bootstrap": "^4.0.0-beta",
    "core-js": "^2.5.1",
    "firebase": "^4.3.1",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "jquery-ui": "^1.12.1",
    "lodash": "^4.17.5",
    "rxjs": "^5.4.3",
    "scss": "^0.2.4",
    "ts-loader": "^4.1.0",
    "zone.js": "^0.8.17",
    "express": "^4.15.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.3",
    "@angular/compiler-cli": "^5.2.9",
    "@angular/language-service": "^4.4.3",
    "@types/bootstrap": "^3.3.36",
    "@types/core-js": "^0.9.46",
    "@types/jasmine": "^2.6.0",
    "@types/jasminewd2": "^2.0.3",
    "@types/jquery": "^3.2.12",
    "@types/node": "^6.0.88",
    "angular-universal-express-firebase": "0.0.4",
    "codelyzer": "~3.0.1",
    "eslint-plugin-promise": "^3.6.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "^2.7.2"
  },
  "private": true
}

服务器功能

import 'zone.js/dist/zone-node';
import * as functions from 'firebase-functions';
import * as express from 'express';
import { renderModuleFactory } from '@angular/platform-server';
import * as fs from 'fs';

const document = fs.readFileSync(__dirname + '/index.html', 'utf8');
const AppServerModuleNgFactory = require(__dirname + '/dist-server/main.bundle');

const app = express();

app.get('**', (req, res) => {
    const url = req.path;
    renderModuleFactory(AppServerModuleNgFactory, { document, url })
        .then(html => {
            res.set('Cache-Control', 'public, max-age=600');
            res.send(html);
        });
});

export let ssrapp = functions.https.onRequest(app);

服务器 TS 配置

{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "../",
        "rootDir": ".",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2016",
            "dom"
        ]
    },
    "files": [
        "index.ts"
    ]
}

我使用firebaseserve--onlyfunctions提供服务，服务后我收到不同类型的错误，修复后，会出现另一个错误。

到目前为止，我还停留在这个问题上。

类型错误:无法读取未定义的属性“名称”

at ...functions/node_modules/@angular/core/bundles/core.umd.js:5528:146
at ZoneDelegate.invoke (...functions/node_modules/zone.js/dist/zone-node.js:388:26)
at Object.onInvoke (.../functions/node_modules/@angular/core/bundles/core.umd.js:4787:33)
at ZoneDelegate.invoke (.../functions/node_modules/zone.js/dist/zone-node.js:387:32)
at Zone.run (.../functions/node_modules/zone.js/dist/zone-node.js:138:43)
at NgZone.run (.../functions/node_modules/@angular/core/bundles/core.umd.js:4604:69)
at PlatformRef.bootstrapModuleFactory (.../functions/node_modules/@angular/core/bundles/core.umd.js:5527:23)
at Object.renderModuleFactory (.../functions/node_modules/@angular/platform-server/bundles/platform-server.umd.js:1815:39)
at .../functions/index.js:13:23
at Layer.handle [as handle_request] (.../functions/node_modules/express/lib/router/layer.js:95:5)

起源应用程序:

JSON 包

{
  "name": "my app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.9",
    "@angular/cdk": "^2.0.0-beta.10",
    "@angular/common": "^5.2.9",
    "@angular/compiler": "^5.2.9",
    "@angular/core": "^5.2.9",
    "@angular/forms": "^5.2.9",
    "@angular/http": "^5.2.9",
    "@angular/material": "^2.0.0-beta.10",
    "@angular/platform-browser": "^5.2.9",
    "@angular/platform-browser-dynamic": "^5.2.9",
    "@angular/platform-server": "^5.2.9",
    "@angular/router": "^5.2.9",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "@nguniversal/express-engine": "^5.0.0-beta.7",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.7",
    "@types/lodash": "^4.14.74",
    "angularfire2": "^4.0.0-rc0",
    "bootstrap": "^4.0.0-beta",
    "core-js": "^2.5.1",
    "firebase": "^4.3.1",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "jquery-ui": "^1.12.1",
    "lodash": "^4.17.5",
    "rxjs": "^5.4.3",
    "scss": "^0.2.4",
    "ts-loader": "^4.1.0",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.3",
    "@angular/compiler-cli": "^5.2.9",
    "@angular/language-service": "^4.4.3",
    "@types/bootstrap": "^3.3.36",
    "@types/jasmine": "^2.6.0",
    "@types/jasminewd2": "^2.0.3",
    "@types/jquery": "^3.2.12",
    "@types/node": "^6.0.88",
    "angular-universal-express-firebase": "0.0.4",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "^2.6.2"
  }
}

TSCONFIG

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

TSCONFIG.SERVER.JSON

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out/-tsc/app",
        "baseUrl": ".",
        "module": "commonjs",
        "types": []
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ],
    "angularCompileOptions": {
        "entryModule": "app/app.server.module#AppServerModule"
    }
}

APP.SERVER.MODULE.TS

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

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

@NgModule({
    imports: [AppModule, ServerModule],
    bootstrap: [AppComponent]
})
export class AppServerModule { }

APP.MODULE.TS

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { RouterModule, Routes } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { environment } from '../environments/environment';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { DataService } from './dataservice';
import { HomeComponent } from './home/home.component';
import { FormsModule } from '@angular/forms';
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CommonModule } from '@angular/common';
import {
  MdDialog, MaterialModule, MdButtonModule, MdCardModule, MdToolbarModule, MdInputModule,
  MdMenuModule, MdIconModule, MdProgressBarModule, MdRadioModule, MdDialogModule, MdSelectModule, MdTabsModule,
  MdSnackBarModule, MdProgressSpinnerModule, MdTooltipModule
} from '@angular/material';

import { PostsUtilComponent } from './utils/postsUtil';
import { FeaturesComponent } from './features/features.component';
import { MediaPlayerService } from './utils/mediaPlayerService';
import { HomeUtils } from './home/homeUtils';
import { DownloadComponent } from './download/download.component';
import { PostComponent } from './post/post.component';
import { NodesComponent } from './utils/nodes';
import { PostFactory } from './utils/postFactory';
import { TestServerFunctionComponent } from './utils/testServerFunction';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'home', component: HomeComponent },
  { path: 'projects', component: HomeComponent },
  { path: 'features', component: FeaturesComponent },
  { path: 'download', component: DownloadComponent },
  { path: 'post', component: PostComponent },

];
@NgModule({
  imports: [
    CommonModule,
    BrowserModule.withServerTransition({ appId: 'serverside' }),
    RouterModule.forRoot(appRoutes),
    NgbModule.forRoot(),
    AppRoutingModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    BrowserAnimationsModule,
    MdDialogModule,
    MdButtonModule,
    MdCardModule,
    MdMenuModule,
    MdToolbarModule,
    MdIconModule,
    MdProgressBarModule,
    MdInputModule,
    MdRadioModule,
    MdSelectModule,
    MdTabsModule,
    MdSnackBarModule,
    MdProgressSpinnerModule,
    MdTooltipModule
  ],
  providers: [DataService, PostsUtilComponent, NodesComponent, PostFactory, MediaPlayerService,
    HomeUtils, TestServerFunctionComponent],
  declarations: [AppComponent, HomeComponent, FeaturesComponent, DownloadComponent, PostComponent],
  entryComponents: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }

MAIN.TS

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

MAIN.SERVER.TS

export { AppServerModule } from './app/app.server.module';

最佳答案

解决方案:

  1. 使用 npm run build --prod --aot
  2. 您的组件中可能有一个名称变量，但您没有为其初始化任何值(例如:public name: any = "title";)

关于Angular Universal : How to resolve missing names, 模块和其他奇怪的东西，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49472738/

上一篇：带有扩展对象的动态键的 typescript 接口(interface)

下一篇：typescript - 如何通过换能器功能组成对象的变换

相关文章：

Angular Material Stepper，每个步骤都有单独的组件 - ExpressionChangedAfterItHasBeenCheckedError

javascript - TypeScript - 使用构造函数属性创建实例

firebase - 新的 Firebase Facebook 登录

android - FCM - 永远不会调用 onTokenRefresh()

javascript - Angular 2 : Two backend service calls on success of first service

angular - 传单图: Rotated Marker for ionic2 (Typescript)

reactjs - 使用 Material ui createStyles

typescript - Angular2 @HostBinding 无法绑定(bind)背景图像样式

firebase - 将 rxjs Observable 与 firestore 一起使用

javascript - CI 和 Angular4 : Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response

©2024 IT工具网  联系我们