CODEWITHSUNDEEP
node.jsangularexpresswebpackangular-universal
Mo Gusbi
Mo Gusbi

Reputation: 297

Unable to create a Angular 5 Universal server application application bundle using @ngtools/webpack

am trying to build a universal app with Angular 5 and WebPack without the cli.

The issue I am having is that I cannot seem to get the express application to work and I am met with this error every time I hit the server

Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped
    at View.engine (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/@nguniversal/express-engine/src/main.js:34:23)
    at View.render (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/view.js:135:8)
    at tryRender (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/application.js:640:10)
    at Function.render (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/application.js:592:3)
    at ServerResponse.render (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/response.js:1008:7)
    at /Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/dist/server.js:122:47
    at Layer.handle [as handle_request] (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/router/layer.js:95:5)
    at next (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Volumes/Data/Users/mo/Desktop/ng5-universal-webpack/node_modules/express/lib/router/layer.js:95:5)

I believe the issue is to do with the server application bundle that's then consumed by server.ts because if I console log out AppServerModuleNgFactory it comes up as undefined.

I've tried to base my server config to match that as close as possible to the one generated by the CLI project in the angular/universal-starter repo but it just doesn't generate an app bundle that the server can use

You can find a repo at https://github.com/mogusbi/ng5-universal-webpack. Clone that, run npm start and go to localhost:4000

Upvotes: 1

Views: 548

Answers (2)

ofleaf
ofleaf

Reputation: 615

create main.server.ts file under the src directory, then typing in main.server.ts file this code:

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

Upvotes: 0

Mo Gusbi
Mo Gusbi

Reputation: 297

I've eventually worked out why the ModuleNgFactories weren't being generated after delving into nitty gritty of the CLI source code and it's literally just because there's an undocumented option in the AngularCompilerPlugin called platform - it needs to be set to 1 to generate the server application bundle that then gets consumed by ngExpressEngine in the express application.

Once you do that, everything works as you expect it to!

I hope anyone else who has trouble getting the isomorphic stuff to work without the CLI finds this helpful

Upvotes: 1

Related Questions