The AppServerModule lacks the necessary NgModule metadata to be identified

I am facing an issue while trying to run and build my Angular project with server-side rendering. Whenever I launch the project on my local machine and open it in a web browser, I encounter the following error message:

Error: No NgModule metadata found for 'AppServerModule'.
    at NgModuleResolver.resolve (/Users/user/Projects/myproject/node_modules/@angular/compiler/bundles/compiler.umd.js:22963:27)
    at CompileMetadataResolver.getNgModuleMetadata (/Users/user/Projects/myproject/node_modules/@angular/compiler/bundles/compiler.umd.js:22066:47)
    at JitCompiler._loadModules (/Users/user/Projects/myproject/node_modules/@angular/compiler/bundles/compiler.umd.js:28255:55)
    at JitCompiler._compileModuleAndComponents (/Users/user/Projects/myproject/node_modules/@angular/compiler/bundles/compiler.umd.js:28236:40)
    at JitCompiler.compileModuleAsync (/Users/user/Projects/myproject/node_modules/@angular/compiler/bundles/compiler.umd.js:28196:41)
    at CompilerImpl.compileModuleAsync (/Users/user/Projects/myproject/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js:339:35)
    at CommonEngine.<anonymous> (/Users/user/Projects/myproject/node_modules/@nguniversal/express-engine/bundles/express-engine.umd.js:95:69)
    at step (/Users/user/Projects/myproject/node_modules/tslib/tslib.js:136:27)
    at Object.next (/Users/user/Projects/myproject/node_modules/tslib/tslib.js:117:57)
    at /Users/user/Projects/myproject/node_modules/tslib/tslib.js:110:75

Despite doing some investigations and research, I am struggling to pinpoint the exact cause of this error. I believe it could be a minor issue but any assistance would be greatly appreciated. Below are details about a couple of other files. Thank you for your help!

Here is the content of src/main.server.ts file:

import { enableProdMode } from '@angular/core';

import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from './app/app.server.module';
export { renderModule, renderModuleFactory } from '@angular/platform-server';

And here is the code in src/app/app.server.module file:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}
angulartypescriptserver-side-renderingangular9

Answer №1

Using 'import' instead of 'export' should resolve the issue

Answer №2

Encountered a similar issue with an Angular 10 universal project. I had mistakenly set bundleDependencies to false, but changing it back to true resolved the error mentioned above. Check out the relevant angular.json section:

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/server",
    "main": "server.ts",
    "tsConfig": "tsconfig.server.json",
    "bundleDependencies": true
  },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Angular JavaScript page successfully compiles, yet displays only a blank screen

I am facing an issue with my Angular app where it compiles successfully, but the HTML page appears blank and my application is not displaying properly. I have encountered similar problems in the past which were often related to Imports, but this time I&apo ...

javascriptangulartypescript

Display <video> component using Angular 2

When attempting to display videos sourced from an API link, I encountered a problem where only the player was visible without the actual video content. The navigation controls of the player were also unresponsive. Interestingly, when manually inputting the ...

htmlangulartypescriptvideoproperties

Performing a HTTP GET request in Angular 2 with custom headers

I recently came across some posts discussing how to set headers in a GET request. The code snippet below demonstrates one way to do this: let headers = new Headers({ 'Accept': 'application/json' }); headers.append('Authorization&a ...

angular

Efficient unit testing with NestJS and Mongoose using @InjectConnection

I need help with a service that utilizes the @InjectConnection decorator in its constructor. I am facing issues while trying to create a testing module for this service. An error message is displayed: Nest can't resolve dependencies of the Attachment ...

node.jstypescriptmongoosegridfsnestjs

What is the best way to ensure observables in a template (using async pipe) are fully subscribed to before executing any initialization code?

I am facing an issue with my HTTP service that returns information based on a given item ID. The data is fetched using a Subject, which receives the initial data in the ngOnInit method. To display the returned data in the HTML, I utilize the async pipe. ...

angulartypescriptsubject-observer

Rebooting a component or triggering a re-execution of its ngOnInit() method in Angular

I am working with an Angular table component that receives different data based on user input and then dynamically populates the table. The complexity of the table has increased, and now I need the entire component to refresh whenever the user requests n ...

angularngoninit

Enhancing the visual aesthetics of KendoUI Charts through custom formatting

I've been working on a custom visual to showcase some formatted values. After formatting the text and creating a visual, I expected to see the new values displayed. However, the values remain unchanged. Below is my code snippet: valueAxis: { labels ...

angularkendo-ui

An abstract class featuring a nested generic function that is also abstract

I am working on creating a dynamic table that can change its content and position based on a special row unique to each page. Currently, I'm encountering an error The generic type 'Table<SpecialFunctions>' requires 1 type argument(s). ...

typescript

Issues with Angular 9 routerLinkActive functionality causing unexpected behavior

Whenever I navigate to a different router link, the previous link remains active, resulting in multiple active links with the same class. <div class="side-link" [routerLink]="['/']" [routerLinkActive] = "['link-active']">Dashboar ...

angular

Tips for invoking a function from one React component to another component

Currently, I am working on two components: one is Game and the other is PickWinner. The Game component serves as the parent component, from which I need to call the pickWinner function in the PickWinner component. Specifically, I want to trigger the startP ...

reactjstypescript

Guide to making a second request using an if statement inside an observable

The aim I have a requirement to make two HTTP requests. The first request should always be executed, and the second request should only be made if a certain condition is met. A signal needs to be emitted when: firstvar and secondvar are equal, and only ...

angularrxjsobservableconcatenation

Encountering an error in Angular 8 where attempting to access an element in ngOnInit results in "Cannot read property 'focus' of null"

My html code in modal-login.component.html includes the following: <input placeholder="Password" id="password" type="password" formControlName="password" class="form-input" #loginFormPassword /> In m ...

angulartypescript

Searching for the position of different size values according to their specific value

information = { boxNoTo: 1, boxNoFrom: 1, size: 'M', } items = [{ size: 'M', },{ size: 'M', },{ size: 'S,M,L,XS', boxNoTo: 1, boxNoFrom: 1, country: 'CA', name: 'Josh' }] This is what I have don ...

javascripttypescript

Attempting to verify if a function is being invoked within a subscription, but finding that it never gets activated

I have a method that needs to be tested when called in an ngOnInit. Specifically, I want to ensure that when the ngOnInit is triggered, this.anotherService.methodToCall() is executed and verify what parameters it is called with. However, despite my effort ...

angulartestingjasmine

Switch the dimensions of a two-dimensional array - Unable to assign a value to property '0' as it is undefined

I'm currently working on a TypeScript code that transposes an M x N matrix: private transpose(a: number[][]): number[][] { let m: number = a.length; let n: number = a[0].length; let b: number[][] = [[]]; // Attempted without "[[]]" fo ...

arraystypescripttranspose

When retrieving the value of an HTML element using TypeScript, it consistently comes back as

I'm currently developing an Angular application that requires users to input a numerical value. The input box is structured as follows: <input class="input" type="number" id="index" min="1" max="20" ...

htmlangulartypescript

Type generic in TypeScript

I'm having trouble understanding the code snippet below from redux-form export type DataSelector<FormData = {}, State = {}> = (formName: string, getFormState?: GetFormState) => (state: State) => FormData; export const getFormValues: Data ...

reactjstypescriptreduxredux-form

Unable to navigate using react-router after logging out without a page refresh

In my logout approach, everything seems to work fine - there are no errors in the console, localHistory is cleared successfully, but for some reason it cannot navigate to the login page without refreshing the current page. const handleLogout = () => { ...

javascriptreactjsangularecmascript-6react-router

Is it possible to activate an "Add More" button when the user has only filled out 4 out of the 5 required fields in the form?

My Angular 5 form is being populated with data from a json clob stored in a database table. Out of the 10 fields on the form, 6 are required. These 10 form fields are dynamically generated in a loop. I have successfully implemented functionality to enable ...

angular

Problem with Typescript: The type '{ x;y }' is required to have a '[Symbol.iterator]()' method

Just starting out with Typescript and tackling the task of converting a React project from JavaScript to TypeScript. I've been diving into various posts for guidance, but I feel like I'm going in circles. Any assistance would be greatly appreci ...

reactjstypescript