javascript - side - Error de obtención angular-universal: debe pasar un NgModule o NgModuleFactory para que se pueda iniciar

server side rendering angular 4

Question

Convertí mi aplicación existente de angular-cli a angular-universal siguiendo esta guía .

Puedes ver mi código fuente completo here .

Soy capaz de crear proyectos de navegador y cliente, pero me aparece el siguiente error cuando veo la aplicación en el navegador:

Error: debe pasar un NgModule o NgModuleFactory para que se inicie en View.engine (D: / ng-ssr-demo / dist / server.js: 359545: 23)

El problema está en mi archivo server.ts donde AppServerModuleNgFactory no está definido y como esta fábrica se usa para detener la aplicación en el backend express, el arranque falla.

./server.ts:

const MockBrowser = require(''mock-browser'').mocks.MockBrowser;
const mock = new MockBrowser();

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), ''dist'');

// Fix for window error:
const domino = require(''domino'');
const fs = require(''fs'');
const path = require(''path'');
const template = fs.readFileSync(path.resolve(''./'', ''dist'', ''browser/'', ''index.html'')).toString();
const win = domino.createWindow(template);

// workaround for leaflet
global[''window''] = win;
global[''document''] = win.document;

// workaround for nex-charts
win.screen = { deviceXDPI: 0, logicalXDPI: 0 };
global[''MouseEvent''] = win.MouseEvent;
global[''navigator''] = mock.getNavigator();


// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require(''./dist/server/main.bundle'');

// AppServerModuleNgFactory is undefined
console.log(''AppServerModuleNgFactory'', AppServerModuleNgFactory);

// This is injected
console.log(''LAZY_MODULE_MAP'', LAZY_MODULE_MAP);

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine(''html'', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

./webpack.server.config.js:

module.exports = {
  entry: {
    // This is our Express server for Dynamic universal
    server: ''./server.ts'',
    // This is an example of Static prerendering (generative)
    prerender: ''./prerender.ts''
  },
  target: ''node'',
  resolve: { extensions: [''.ts'', ''.js''] },
  // Make sure we include all node_modules etc
  externals: [/node_modules/],
  output: { path: path.join(__dirname, ''dist''), filename: ''[name].js'' },
  module: { rules: [{ test: //.ts$/, loader: ''ts-loader''}] },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(//|//)core(.+)?/,
      path.join(__dirname, ''src''), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(//|//)(.+)?/,
      path.join(__dirname, ''src''), {}
    )
  ]
}

./src/tsconfig.server.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "commonjs",
    "baseUrl": "./",
    "types": ["node"],
    "typeRoots": ["../node_modules/@types"],
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ],
      "@nebular/*": [
        "../node_modules/@nebular/*"
      ]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule",
    "platform": 1
  }
}

./src/main.server.ts:

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

./src/app/app.module.ts:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({appId: ''my-app''}),
    BrowserAnimationsModule,
    HttpModule,
    AppRoutingModule,

    NgbModule.forRoot(),
    ThemeModule.forRoot(),
    CoreModule.forRoot(),
    environment.production ? ServiceWorkerModule.register(''./ngsw-worker.js'') : [],
  ],
  bootstrap: [AppComponent],
  providers: [
    { provide: APP_BASE_HREF, useValue: ''/'' }, WebWorkerService,
  ],
})
export class AppModule {
}

./src/app/app.server.module.ts:

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

Answer 1

Revisé su repositorio y pude ver la multa de distancia sin ese error en el navegador. Tal vez se olvidó de agregar la bandera -prod cuando se ejecuta compilación? Por favor prueba esto

ng build --prod

También puede eliminar el dist por completo y / o eliminar node_modules, hacer npm cache clean , ejecutar npm install antes de intentar compilar nuevamente.

Si está utilizando scripts npm, me doy cuenta de que a su compilación / server le falta el indicador --prod . Por favor prueba esto

"build:server": "ng build --prod --app 1 --output-hashing=false",

Answer 2

use mode: ''development'', para webpack.config.js

Answer 3

    const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require(''./dist/server/main.bundle'');

¿Puede verificar que ''AppServerModuleNgFactory'' existe en su main.bundle? Puede estar en otros nombres, así que solo consulte con "ModuleNgFactory" para saber qué NgFactory está exportando su aplicación, simplemente sustitúyala por el nombre de fábrica.