Universal: No NgModule metadata found for 'AppServerModule'.

[BartoszMarkowski]

Bug Report

What is the current behavior?

No NgModule metadata found for 'AppServerModule'.

What modules are related to this issue?

- [ ] aspnetcore-engine
- [x ] common
- [ ] express-engine
- [ ] hapi-engine
- [ ] module-map-ngfactory-loader

Minimal reproduction with instructions:

https://codesandbox.io/s/universal-bug-jm0kl

Added

Requirements:
One server that reads built .js server files (I now try to use CommonEngine) and renders them, one server for many templates. It doesn't need rebuilding, it just reads already built .js server files in runtime.

In version 8 of Angular I had 3 applications and one server, I imported in my own application serving the html AppServerModuleNgFactory from built .js files and everything worked fine. Now I've switched to ivy and angular 9 and I can't import AppServerModuleNgFactory anymore from built files. How do you get such an effect?

[alan-agius4]

Unless the server.ts is bundled using the CLI, you'd need to run NGCC hook manually.

A bit more details: https://next.angular.io/guide/ivy#ivy-and-universalapp-shell

[alan-agius4]

Hi, did you manage to get this working?

[muradm]

Same here. AppServerModuleNgFactory is not present in exports.

EDIT: Solved by manually following schematics script. Things slightly changed. From documentation not very clear what is changed and why.

[AlabasterAxe]

I'm also getting this error.

To explain what I'm trying, I'm running
npm run build:ssr to produce the main.js server file.

Then I'm trying to import the exported AppServerModule from the main.js file and add the SSR handlers to an existing Express server.

But I get the above error: No NgModule metadata found for 'AppServerModule'.

[AlabasterAxe]

I put together my own minimal repro:
https://github.com/AlabasterAxe/ng-universal-test/blob/master/server/src/index.ts#L6

[AlabasterAxe]

I got this working by modifying the app function in the server.ts file. I pass in an existing express object as opposed to creating it within the body of the app function.

[BartoszMarkowski]

Please Post Code.

[AlabasterAxe]

Here's my Angular server.ts file:
https://github.com/AlabasterAxe/ng-universal-test/blob/import-compiled-ssr/ng/server.ts#L12

And here's my "server" index file where you could hypothetically import several of these prebuilt apps:
https://github.com/AlabasterAxe/ng-universal-test/blob/import-compiled-ssr/server/src/index.ts#L3

Here's the link to the corresponding branch:
https://github.com/AlabasterAxe/ng-universal-test/tree/import-compiled-ssr

[qdevial]

Any update on this ? Has anyone found a way to make this work ? that would be very helpful to have access to the AppServerModuleNgFactory in the server exports

[AlabasterAxe]

@qdevial As mentioned above, in our case, we've modified the app function in the generated server.ts file. I've updated the example repo I referenced above to actually reflect my comments.

For the sake of completeness here's what we did:

In our Angular server.ts file:

• update the app function in the server.ts file to accept an Express object

In our other server:

• import the app function from the compiled Angular server main into our API server
• construct an Express object
• register any API endpoints on the Express object
• pass the Express object into our modified app() method

Not sure exactly what your use case is but this has allowed us to import the Angular SSR functionality into another Express server so it has worked for us.

[qdevial]

Oh, my bad I did’t see it was on the import-compiled-ssr branch. It seems to work ! Thank you, I think this possibility should be mentioned somewhere, I couldn’t find out by myself.

[AlabasterAxe]

All good, yeah I realized my code was also just didn't match my comment. Yeah definitely seems to be a hidden functionality.

[jer-tx]

So what exactly is this solution here? The steps AlabasterAxe posted doesn't work or doesn't apply. I don't have an "index.ts" file and nowhere in any other tutorial or Angular documentation do I see a mention of "index.ts".

So, what's the fix?

[AlabasterAxe]

@jer-tx Without knowing more about what you're trying to do or what your situation is, it's hard say what your fix should be.

This bug is about trying to include the Angular SSR handlers in an existing Express application. Even if you don't have an "index.ts" file, presumably you have access to the code where you are registering your handlers on your Express app. Wherever that is, you'd use the exported app() function I describe above to register your SSR handlers on your existing Express app.

It's possible you're seeing the same error for unrelated reasons but if you're not trying to register the Angular SSR handlers in an existing Express server, I'm not sure how to resolve your issue.

[CaerusKaru]

Since this is marked as solved, I'm going to close this issue. If anyone on this thread is able to, I highly recommend taking these learnings and codifying them in a Medium post or other reference. The issue tracker is not a good long-term repository of solved issues in terms of discoverability.

Thanks to all who helped here!

[AlabasterAxe]

@CaerusKaru Wrote up a blog post about this:
https://www.thkp.co/blog/2020/6/22/how-to-serve-angular-universal-with-an-existing-express-server

Let me know what you think! BTW there's a section where I talk about the error "Error: Can't resolve all parameters for ApplicationModule: (?)." if you can provide any more information about that error or why the described situation would cause it, that would be greatly appreciated. Thanks!

Matt

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}