Question

我的任务是将项目从Angular 4更新到5.该项目使用Angular Universal for ssr。我做了很多能够运行项目的东西，现在它正在使用jit构建，但是当我尝试构建AOT时，它构建它没有错误，但是当我访问url时我有这个错误：
No NgModule metadata found for 'ServerAppModule
我现在不知道该怎么办，我还没有找到合适的答案，应尽快完成，不要阻止其他作品。我有这些版本：
"dependencies": { "@agm/core": "^1.0.0-beta.2", "@angular/animations": "^5.0.2", "@angular/cdk": "^5.0.0-rc.1", "@angular/cli": "^1.5.3", "@angular/common": "^5.0.2", "@angular/compiler": "^5.0.2", "@angular/core": "^5.0.2", "@angular/forms": "^5.0.2", "@angular/http": "^5.0.2", "@angular/material": "^5.0.0-rc0", "@angular/platform-browser": "^5.0.2", "@angular/platform-browser-dynamic": "^5.0.2", "@angular/platform-server": "^5.0.2", "@angular/router": "^5.0.2", "@nguniversal/express-engine": "^5.0.0-beta.5", "express": "^4.16.2", "rxjs": "^5.5.2", "serialize-javascript": "^1.4.0", "xhr2": "^0.1.4", "zone.js": "^0.8.18" }, "devDependencies": { "@angular/compiler-cli": "^5.0.0", "@ngtools/webpack": "^1.8.3", "@types/express": "^4.0.39", "@types/node": "^7.0.48", "fork-ts-checker-webpack-plugin": "^0.2.9", "happypack": "^4.0.0", "html-webpack-plugin": "^2.30.1", "node-sass": "^4.7.2", "nodemon": "^1.12.1", "raw-loader": "^0.5.1", "rimraf": "^2.6.2", "sass-loader": "^6.0.6", "script-ext-html-webpack-plugin": "^1.8.8", "ts-loader": "^2.3.7", "typescript": "2.4.2", "webpack": "3.3.0", "webpack-livereload-plugin": "^1.0.0", "webpack-merge": "^4.1.1" }

我的文件如下：
main.browser.ts：

import 'zone.js/dist/zone';
import 'reflect-metadata';
import 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserAppModule } from './app/browser-app.module';
import { enableProdMode } from '@angular/core';

enableProdMode();

export function main() {
  return platformBrowserDynamic().bootstrapModule(BrowserAppModule);
}

document.addEventListener('DOMContentLoaded', main, false);

main.server.ts：

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import 'rxjs/Rx';
import * as express from 'express';
import { Request, Response } from 'express';
import { platformServer, renderModuleFactory } from '@angular/platform-server';
import { ServerAppModule } from './app/server-app.module';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { ROUTES } from './routes';
import { enableProdMode } from '@angular/core';
enableProdMode();
const app = express();
const port = process.env.PORT || 3000;
const baseUrl = `http://localhost:${port}`;

app.engine('html', ngExpressEngine({
  bootstrap: ServerAppModule
}));

app.set('view engine', 'html');
app.set('views', 'src');

app.use('/', express.static('dist', {index: false}));
app.use('/assets', express.static('src/assets', {index: false}));

ROUTES.forEach((route: string) => {
  app.get(route, (req: Request, res: Response) => {
    console.time(`GET: ${req.originalUrl}`);
    res.render('../dist/index', {
      req: req,
      res: res
    });
    console.timeEnd(`GET: ${req.originalUrl}`);
  });
});

if(process.env.enviroment === 'production') {
  const baseUrl = `https://localhost:${port}`;
  const https = require('https');
  const fs = require('fs');
  -private stuff-
  httpsServer.listen(port);
} else {
  const baseUrl = `http://localhost:${port}`;
  app.listen(port);
}

console.log(`Listening at ${baseUrl}`);

browser-app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { BrowserTransferStateModule } from '../modules/transfer-state/browser-transfer-state.module';
import { AuthModule, AuthLoader, AuthStaticLoader } from '@ngx-auth/core';

export function authFactory(): AuthLoader {
  return new AuthStaticLoader({
    backend: {
      endpoint: 'http://****.com/api/authenticate',
      params: []
    },
    storage: localStorage,
    storageKey: 'currentUser',
    loginRoute: ['login'],
    defaultUrl: ''
  });
}

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({
      appId: 'my-app-id'
    }),
    BrowserTransferStateModule,
    AppModule,
    AuthModule.forRoot({
      provide: AuthLoader,
      useFactory: (authFactory)
    }),
    BrowserAnimationsModule
  ]
})
export class BrowserAppModule {
}

server-app.module.ts：

import { NgModule, APP_BOOTSTRAP_LISTENER, ApplicationRef } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ServerTransferStateModule } from '../modules/transfer-state/server-transfer-state.module';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { TransferState } from '../modules/transfer-state/transfer-state';
import { BrowserModule } from '@angular/platform-browser';
import { AuthModule } from '@ngx-auth/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

export function onBootstrap(appRef: ApplicationRef, transferState: TransferState) {
  return () => {
    appRef.isStable
      .filter(stable => stable)
      .first()
      .subscribe(() => {
        transferState.inject();
      });
  };
}

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({
      appId: 'my-app-id'
    }),
    ServerModule,
    ServerTransferStateModule,
    AppModule,
    AuthModule.forServer(),
    NoopAnimationsModule
  ],
  providers: [
    {
      provide: APP_BOOTSTRAP_LISTENER,
      useFactory: onBootstrap,
      multi: true,
      deps: [
        ApplicationRef,
        TransferState
      ]
    }
  ]
})
export class ServerAppModule {

}

我希望只缺少一点，能够运行并为AOT构建服务器！

Angular + Universal更新到5.0.0 =＆gt;找不到'ServerAppModule'的NgModule元数据

0 个答案: