R3InjectorError(AppServerModule) No provider for InjectionToken compilerOptions - node.js

Question

I am getting the following error:
render error Error [NullInjectorError]: R3InjectorError(AppServerModule)[RouterModule -> Router -> NgModuleFactoryLoader -> Compiler -> InjectionToken compilerOptions -> InjectionToken compilerOptions -> InjectionToken compilerOptions]:
NullInjectorError: No provider for InjectionToken compilerOptions!
I followed the instructions provided by https://angular.io/guide/universal but it seems that few adjustments I needed to add like using domino to simulate document object to work. One of the issues that's making it very hard for me to find out where is the problem is that the errors are pointed in the main.js
render error Error [NullInjectorError]: R3InjectorError(AppServerModule)[RouterModule -> Router -> NgModuleFactoryLoader -> Compiler -> InjectionToken compilerOptions -> InjectionToken compilerOptions -> InjectionToken compilerOptions]:
NullInjectorError: No provider for InjectionToken compilerOptions!
at ɵɵinject (<project-dir>\dist\apps\ui\server\main.js:219196:57)
at injectArgs (<project-dir>\dist\apps\ui\server\main.js:219291:23)
at Object.factory (<project-dir>\dist\apps\ui\server\main.js:229671:52)
at R3Injector.hydrate (<project-dir>\dist\apps\ui\server\main.js:229582:35)
at R3Injector.get (<project-dir>\dist\apps\ui\server\main.js:229404:33) {
ngTempTokenPath: null,
ngTokenPath: [
'RouterModule',
'Router',
'NgModuleFactoryLoader',
'Compiler',
'InjectionToken compilerOptions',
'InjectionToken compilerOptions',
'InjectionToken compilerOptions'
]
} undefined
I am not able to get ng run dev:ssr to show typescript instead.
Here is the entry server.ts:
import { ngExpressEngine } from '#nguniversal/express-engine';
import 'zone.js/dist/zone-node';
// import * as express from 'express';
const express = require('express');
import { APP_BASE_HREF } from '#angular/common';
import { Express, Request, Response } from 'express';
import { existsSync } from 'fs';
import { join } from 'path';
import { uiTransports } from 'src/server/transports/transports.winston';
import * as winston from 'winston';
const domino = require('domino');
const fs = require('fs');
import 'localstorage-polyfill';
const winstonLogger = winston.createLogger({
transports: uiTransports,
});
winstonLogger.info('Starting up UI Server');
// Simulate browser
const distFolder = join(process.cwd(), `dist/apps/ui/browser`);
winstonLogger.info(`Browser dist folder is located at ${distFolder}`);
const templateA = fs.readFileSync(join(distFolder, 'index.html')).toString();
const win = domino.createWindow(templateA);
win.Object = Object;
win.Math = Math;
// (global as any).console = winstonLogger;
(global as any).window = win;
(global as any).document = win.document;
(global as any).branch = null;
(global as any).object = win.object;
(global as any).HTMLElement = win.HTMLElement;
(global as any).navigator = win.navigator;
(global as any).localStorage = localStorage;
(global as any).sessionStorage = localStorage;
(global as any).getComputedStyle = () => {
return {
getPropertyValue() {
return '';
},
};
};
// Browser simulation end
import { AppServerModule } from './src/main.server';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): Express {
const server: Express = express();
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
winstonLogger.info(`Index HTML located at ${indexHtml}`);
// Our Universal express-engine (found # https://github.com/angular/universal/tree/master/modules/express-engine)
server.engine(
'html',
ngExpressEngine({
bootstrap: AppServerModule,
}),
);
server.set('view engine', 'html');
server.set('views', distFolder);
winstonLogger.info('Engine setup completed');
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get(
'*.*',
express.static(distFolder, {
maxAge: '1y',
}),
);
// All regular routes use the Universal engine
server.get('*', (req: Request, res: Response) => {
try {
winstonLogger.info(`Rendering for request ${req.url} started`);
res.render(
indexHtml,
// templateA,
{
req,
res,
// url: req.url,
// cookies: req.cookies,
// bootstrap: AppServerModule,
providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
},
(err: Error, html: string) => {
console.error('render error', err, html);
res.status(html ? 200 : 500).send(html || err.message);
},
);
winstonLogger.info(`Rendering for request ${req.url} completed`);
} catch (ex) {
winstonLogger.error('error from server', ex);
}
});
return server;
}
function run(): void {
const port = process.env.PORT || 4000;
// Start up the Node server
const server = app();
winstonLogger.info(`Server is about to start to listen to port ${port}`);
server.listen(port, () => {
winstonLogger.info(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = (mainModule && mainModule.filename) || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}
export * from './src/main.server';
Here is app.server.module.ts
import { NgModule } from '#angular/core';
import { ServerModule } from '#angular/platform-server';
import { IonicServerModule } from '#ionic/angular-server'; // i added this thinking it might help
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
#NgModule({
imports: [AppModule, ServerModule, IonicServerModule],
bootstrap: [AppComponent],
})
export class AppServerModule {}
Any advises would be much appreciated!
Edit:
It turns out that the error is coming from deps: [[Optional(), COMPILER_OPTIONS]], below:
#NgModule({
declarations: [DynamicComponentDirective],
exports: [DynamicComponentDirective],
})
export class DynamicComponentModule {
static forRoot(metadata: NgModule): ModuleWithProviders<DynamicComponentModule> {
console.log('compiler options');
return {
ngModule: DynamicComponentModule,
providers: [
{
provide: Compiler,
useFactory: createJitCompiler,
/**
* This leads to the following error:
* R3InjectorError(AppServerModule)[RouterModule -> Router -> NgModuleFactoryLoader -> Compiler -> InjectionToken compilerOptions -> InjectionToken compilerOptions -> InjectionToken compilerOptions]: NullInjectorError: No provider for InjectionToken compilerOptions!
*/
// deps: [[Optional(), COMPILER_OPTIONS]],
},
{
provide: DynamicComponentOptions,
useValue: {
ngModuleMetadata: metadata,
},
},
],
};
}
}
I am assuming that I need to inject it in the AppServerModule
#NgModule({
imports: [
...
],
bootstrap: [...],
providers: [/* I think i need to add a provider for it here */],
})
export class AppServerModule {}
Not sure how, can anyone help please?

Answer 1

It turns out it was an issue with the angular.json configuration for the SSR, following the same config as https://github.com/Angular-RU/universal-starter/blob/master/angular.json resolved the issue.