Lazy loaded module not rendered with Server Side Rendering

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I added a lazy-loaded module named “user” & a simple component named “admin”. Routing with lazy-loaded module is working fine, am getting all the things properly, but the content in the lazy-loaded module is not being rendered in the page source, I mean, if I right click & view page source, I can’t get my content of lazy module rendered. Instead am getting just the router-outlet tags. But there is no issue with the normal component. **** Also am getting an error in cmd with “Uncaught (in promise): ReferenceError: System is not defined at SystemJsNgModuleLoader.loadFactory”. ***** Also importing “ModuleMapLoaderModule” crashes the entire app for which there will be no issues while building it, but when running in the browser, am getting some errors too without the app being served. Am hereby attaching the Github repo link & snapshots of the issue. I was using the following links to get this working:

https://github.com/angular/angular-cli/wiki/stories-universal-rendering

https://medium.com/@evertonrobertoauler/angular-5-universal-with-transfer-state-using-angular-cli-19fe1e1d352c

*** If this was an error on my part like it was due to some code missing from my side, please pardon me & help me fix it. I have checked for issue, but I couldn’t find a solution. So please help me to get this resolved… *****

Expected behavior

The contents of the lazy-loaded module should also be rendered in the page source. Isn’t right, according to Angular Universal. Currently, there is no issue with normal components, but contents of lazy-loaded module must be rendered in the page source.

Minimal reproduction of the problem with instructions

Github link to project https://github.com/rogerjacob/angular5-ssr-demo.git

Normal component - contents are getting rendered in page source

Lazy-loaded module - only router-outlet tags are being rendered instead of actual content

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.2.0

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/platform-server": "^5.2.3",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
"devDependencies": {
    "@angular/cli": "1.6.7",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "npm-run-all": "^4.1.2",
    "protractor": "~5.1.2",
    "ts-loader": "^3.4.0",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3",
    "webpack-node-externals": "^1.6.0"
  }

Browser:
- [x] Chrome (desktop) version 63.0.3239.132 (Official Build) (64-bit)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v6.9.1  
- Platform: Windows 

Others:

[trotyl]

I don’t think you were following the story.

// Note this!
import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader';

@NgModule({
  imports: [
    // Note this!
    ModuleMapLoaderModule // <-- *Important* to have lazy-loaded routes work
  ],
})
export class AppServerModule {}

Where @nguniversal/module-map-ngfactory-loader is a standalone package lies in angular/universal.

[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.}