Angular + Universal update to 5.0.0 => No NgModule metadata found for 'ServerAppModule'

My task is to update a project from Angular 4 to 5. That project uses Angular Universal for ssr. I did a lot of stuff to be able to run the project, now it is working with jit build, but when i try to build AOT, it builds it without error, but as i visit the url i have this error:
No NgModule metadata found for 'ServerAppModule
I have no clue now what should i do, i didn't found a working answer yet, and it should be done soon to not block other works. I have these versions:
"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" }

My files looks like this:
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 {

}

I hope that just a little thing is missing, to be able to run and server the AOT build!

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.