Server side rendering - kendo-angular-popup - Error: Cannot find module './services/dom.service'

[ipetrovbg]

This is my very first project on Angular 5 that I'm trying to use server side rendering, but I'm getting following error:

Error: Cannot find module './services/dom.service'
    at Function.Module._resolveFilename (module.js:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\projects\**\dist\out-tsc\node_modules\@progress\kendo-angular-popup\dist\npm\popup.component.ngfactory.js:11:10)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)

I'm not sure if this error is caused by kendo-angular-popup itself or by wrong compilation. When I inspect generated files I notice that ("services/dom.service") file does't exist. (https://www.screencast.com/t/qZYyjk0wBG)

I build my files by running

ng build --prod && ngc

I'm using simple express setup

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import { AppServerModuleNgFactory } from '../dist/out-tsc/src/app/app.server.module.ngfactory';
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';

const PORT = 4000;

enableProdMode();

const app = express();

const template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

app.set('view engine', 'html');
app.set('views', 'src');

app.get('*.*', express.static(join(__dirname, '..', 'dist')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`listening on http://localhost:${PORT}!`);
});

Package versions:

+-- @angular/animations@5.2.5
+-- @angular/cli@1.6.8
+-- @angular/common@5.2.5
+-- @angular/compiler@5.2.5
+-- @angular/compiler-cli@5.2.5
+-- @angular/core@5.2.5
+-- @angular/forms@5.2.5
+-- @angular/http@5.2.5
+-- @angular/language-service@5.2.5
+-- @angular/platform-browser@5.2.5
+-- @angular/platform-browser-dynamic@5.2.5
+-- @angular/platform-server@5.2.5
+-- @angular/router@5.2.5
+-- @angular/service-worker@5.2.5
+-- @compodoc/compodoc@1.0.7
+-- @ng-bootstrap/ng-bootstrap@1.0.0
+-- @ngrx/effects@5.1.0
+-- @ngrx/router-store@5.0.1
+-- UNMET PEER DEPENDENCY @ngrx/store@5.1.0
+-- @ngrx/store-devtools@5.1.0
+-- @progress/kendo-angular-buttons@3.0.3
+-- @progress/kendo-angular-dateinputs@2.1.1
+-- @progress/kendo-angular-dropdowns@2.0.2
+-- @progress/kendo-angular-inputs@2.1.1
+-- @progress/kendo-angular-intl@1.3.1
+-- @progress/kendo-angular-l10n@1.0.6
+-- @progress/kendo-angular-label@1.0.6
+-- @progress/kendo-angular-popup@2.0.1
+-- @progress/kendo-theme-default@2.47.8
+-- @types/jasmine@2.8.6
+-- @types/jasminewd2@2.0.3
+-- @types/jquery@3.3.0
+-- @types/node@9.4.6
+-- bootstrap@4.0.0
+-- codelyzer@4.1.0
+-- core-js@2.5.3
+-- express@4.16.2
+-- jasmine-core@2.99.1
+-- jasmine-spec-reporter@4.2.1
+-- jquery@3.3.1
+-- karma@2.0.0
+-- karma-chrome-launcher@2.2.0
+-- karma-coverage-istanbul-reporter@1.4.1
+-- karma-jasmine@1.1.1
+-- karma-jasmine-html-reporter@0.2.2
+-- ngrx-store-localstorage@0.3.0
+-- UNMET PEER DEPENDENCY popper.js@^1.12.9
+-- protractor@5.3.0
+-- rxjs@5.5.6
+-- ts-node@4.1.0
+-- tslint@5.9.1
+-- UNMET PEER DEPENDENCY typescript@2.7.1
+-- underscore@1.8.3
`-- zone.js@0.8.20

System:

• TypeScript version: 2.7.1
• Node version: 8.9.4
• Platform: Windows

[ggkrustev]

@ipetrovbg, thanks for reporting the issue. Could it be related to this issue - https://github.com/telerik/kendo-angular/issues/1210 and more specifically https://github.com/telerik/kendo-angular/issues/1210#issuecomment-357226952?

Basically the described issue could occur if paths to the files are messed up. Could you try with the flat bundled packages https://github.com/telerik/kendo-angular/issues/1314#issuecomment-366292694? If the problem still persists, could share a repro demo (github repo will be great) that we can review locally?

[tsvetomir]

Try downgrading to typescript 2.5.x to see if that helps. The latest 2.7 version is not supported by Angular or by us, even Angular 6 is locked at 2.6.x.

What project template are you using for server-side rendering? Is it the latest version?

[ipetrovbg]

@ggkrustev, I tried with flat bundled packages but it has no effect. Unfortunately I don't have enough time to setup a test repository with the problem. @tsvetomir, Ok, I will try with downgraded version.

What project template are you using for server-side rendering? Is it the latest version?

I'm not sure what you mean. I'm using node.js with express for server side.

[tsvetomir]

@ipetrovbg, sorry I assumed a .NET Core project for no apparent reason.

I've set up a fork of universal-starter with the popup and dropdowns packages in it. Seems to work fine, can you take a look?

[ipetrovbg]

Thank you, @tsvetomir I clone your repo and its working. The reason for this error in my code base it has to be the wrong set up I guess. You can close the issue

[shirinsheik]

Am facing issue after upgrading from angular5 to angular6

[tsvetomir]

@shirinsheik this doesn't seem to be related. Please open a separate issue with more details.