Angular-cli: Universal Rendering - ReferenceError: webpackJsonp is not defined

Created on 29 Aug 2017 · 17Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.6
node: 7.0.0
os: darwin x64
@angular/animations: 4.3.6
@angular/common: 4.3.5
@angular/compiler: 4.3.5
@angular/core: 4.3.5
@angular/forms: 4.3.5
@angular/http: 4.3.5
@angular/platform-browser: 4.3.5
@angular/platform-browser-dynamic: 4.3.5
@angular/router: 4.3.5
@angular/cli: 1.0.6
@angular/compiler-cli: 4.3.5

Repro steps.

I built server side rendering support as in the story https://github.com/angular/angular-cli/wiki/stories-universal-rendering

I have a file server.js with the code

// Load zone.js for the server.
require('zone.js/dist/zone-node');

// Import renderModuleFactory from @angular/platform-server.
var renderModuleFactory = require('@angular/platform-server').renderModuleFactory;

// Import the AOT compiled factory for your AppServerModule.
// This import will change with the hash of your built server bundle.
var AppServerModuleNgFactory = require('./dist-server/main.bundle').AppServerModuleNgFactory;

// Load the index.html file.
var index = require('fs').readFileSync('./src/index.html', 'utf8');

// Render to HTML and log it to the console.
renderModuleFactory(AppServerModuleNgFactory, {document: index, url: '/'}).then(html => console.log(html));

invoke node server.js

The log given by the failure.

ReferenceError: webpackJsonp is not defined
    at Object.<anonymous> (/Users/suiluj/projects/design-portal-frontend/dist-server/main.bundle.js:1:63)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.require (module.js:500:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/suiluj/projects/design-portal-frontend/server.js:9:32)
    at Module._compile (module.js:573:32)

Desired functionality.

Should print out the content on index.html

Mention any other details that might be useful.

investigation RFC / discussion / question

Source

iUwej

Most helpful comment

Since server doesn't do anything with webpack, most likely cause of this is in .angular.cli.json. When I created new CLI app I forgot to set:

  "platform": "server",

Adding this fixes the issue.

sasxa on 25 Oct 2017

🎉8 👍5 ❤4 😄3

All 17 comments

Hello I am also having same issue with my angular app. Is there any update on this issue?

RRmallaP on 14 Sep 2017

Hi guys I have submitted a change to the universal story in #7739

I invite you to take a look at it as I believe it better explains how to get your SSR app up and running with the cli

RicardoVaranda on 19 Sep 2017

After updating angular cli and angular to the latest version, I got rid of this error.

RRmallaP on 25 Sep 2017

Hi guys,
I followed the steps exactly as mentioned in the link : https://github.com/angular/angular-cli/wiki/stories-universal-rendering to apply server side rendering for my angular app. I didn't add any third party extensions or modules, but when I fire up the app by hitting "node dist/server.js" after completing all other steps, I get the following error:

angular-cli-error

Following are from my package.json file:

Has this issue been resolved ? If yes, please help to solve this out.
Thank You.

rogerjacobrj on 15 Oct 2017

👍5

I am basically on the same boat as @rogerjacob: I have followed the updated instructions and can't start the server otherwise:

node dist/server.js
/home/marcus/projects/scratch-sql/client/dist/server.js:129018
webpackJsonp([0],{"+F22":function(e,t,r){"use strict";var n=r("6Xbx").__decorate,o=r("6Xbx").__metadata;Object.defineProperty(t,"__esModule",{value:!0});var i=r("LMZF"),a=r("LiYh"),s=r("CxgL"),u=r("hC6A");t.PageEditor=function(){function e(e,t,r,n,o,i){this._projectService=e,this._pageService=t,this._toolbarService=r,this._routeParams=n,this._sidebarService=o,this._preferences=i,this._subscriptionRefs=[],this.doRenderPreview=!1}return e.prototype.showDefaultSidebars=function(){this._sidebarService.showMultiple([{type:u.SidebarWidgetsComponent.SIDEBAR_IDENTIFIER,param:this._page,sticky:!0},{type:s.SidebarDataComponent.SIDEBAR_IDENTIFIER,param:this._page,sticky:!0}])},e.prototype.ngOnInit=function(){var e=this;this._toolbarService.resetItems();var t=this._routeParams.params.subscribe(function(t){var r=t.pageId;console.log("Page Editor: PageId changed to "+r),e._projectService.activeProject.filter(function(e){return!!e}).first().subscribe(function(

ReferenceError: webpackJsonp is not defined
    at Object.defineProperty.value (/home/marcus/projects/scratch-sql/client/dist/server.js:129018:1)
    at __webpack_require__ (/home/marcus/projects/scratch-sql/client/dist/server.js:20:30)
    at Object.<anonymous> (/home/marcus/projects/scratch-sql/client/dist/server.js:95203:10)
    at __webpack_require__ (/home/marcus/projects/scratch-sql/client/dist/server.js:20:30)
    at /home/marcus/projects/scratch-sql/client/dist/server.js:63:18
    at Object.<anonymous> (/home/marcus/projects/scratch-sql/client/dist/server.js:66:10)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)

This is with basically the most recent set of available libraries:

"dependencies": {
  "@angular/animations": "^5.0.0-rc.3",
  "@angular/common": "^5.0.0-rc.3",
  "@angular/compiler": "^5.0.0-rc.3",
  "@angular/core": "^5.0.0-rc.3",
  "@angular/forms": "^5.0.0-rc.3",
  "@angular/http": "^5.0.0-rc.3",
  "@angular/platform-browser": "^5.0.0-rc.3",
  "@angular/platform-browser-dynamic": "^5.0.0-rc.3",
  "@angular/platform-server": "^5.0.0-rc.3",
  "@angular/router": "^5.0.0-rc.3",
  "@nguniversal/module-map-ngfactory-loader": "^1.0.0-beta.3",
  "core-js": "^2.5.1",
  "rxjs": "^5.4.3",
  "ts-loader": "^2.3.7",
  "zone.js": "^0.8.18"
},
"devDependencies": {
  "@angular/cli": "^1.5.0-rc.2",
  "@angular/compiler-cli": "^5.0.0-rc.3",
  "@angular/language-service": "^5.0.0-rc.3",
  "@types/jasmine": "^2.6.0",
  "@types/jasminewd2": "^2.0.3",
  "@types/node": "^8.0.46",
  "@types/selenium-webdriver": "^3.0.7",
  "codelyzer": "^3.2.1",
  "jasmine-core": "~2.8.0",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "^1.7.1",
  "karma-chrome-launcher": "~2.2.0",
  "karma-cli": "~1.0.1",
  "karma-coverage-istanbul-reporter": "^1.2.1",
  "karma-firefox-launcher": "~1.0.0",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "~5.1.2",
  "ts-node": "~3.3.0",
  "tslint": "~5.7.0",
  "typescript": "^2.4.2"
}

MarcusRiemer on 23 Oct 2017

I never got the example in this Universal story to work. This repository cli-universal-demo shows how to use webpack + angular cli to enable server side rendering. The later worked for me.

iUwej on 24 Oct 2017

Since server doesn't do anything with webpack, most likely cause of this is in .angular.cli.json. When I created new CLI app I forgot to set:

  "platform": "server",

Adding this fixes the issue.

sasxa on 25 Oct 2017

🎉8 👍5 ❤4 😄3

Wow, thanks alot @sasxa! Somehow you have managed to pin down my exact mistake, no idea why I have somehow overlooked this everytime I got back to this ...

MarcusRiemer on 25 Oct 2017

Thank you @sasxa for pointing out the issue, however, when I add "platform": "server", to the .angular-cli.json, the editor warns me that "Property platform is not allowed". I've googled this error, but I cannot find anything related to it...

cstodor on 31 Oct 2017

@cstodor: Could you run ng -v in your project directory and paste the results? It may just be that you need to update the version of some dependency.

SWBennett06 on 1 Nov 2017

same issue! :(

longhoang2984 on 3 Nov 2017

I solved this issue by update @angular and @nguniversal modules to 5.0
latest files (as server.ts and prerender.ts) I took from here: https://github.com/angular/universal-starter

ScriptArtist on 13 Nov 2017

Same issue .

oshingc on 17 Nov 2017

same issue

{
  "name": "roxo",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server.js",
    "build:client-and-server-bundles": "ng build --prod -a home && ng build --prod --app 3 --output-hashing=false",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors --display-entrypoints"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/platform-server": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.4",
    "@nguniversal/module-map-ngfactory-loader": "^1.0.0-beta.3",
    "angular2-persian-pipes": "0.0.6",
    "bootstrap.native": "^2.0.19",
    "core-js": "^2.4.1",
    "enhanced-resolve": "^3.3.0",
    "hammerjs": "^2.0.8",
    "jalali-moment": "^2.1.3",
    "jquery": "^2.2.4",
    "lg-autoplay": "^1.0.4",
    "lg-fullscreen": "^1.0.1",
    "lg-hash": "^1.0.4",
    "lg-pager": "^1.0.2",
    "lg-share": "^1.1.0",
    "lg-thumbnail": "^1.1.0",
    "lg-video": "^1.2.0",
    "lg-zoom": "^1.1.0",
    "lightgallery": "^1.6.6",
    "ng-recaptcha": "^3.0.3",
    "ng-spin-kit": "^5.1.1",
    "ng2-carouselamos": "^3.2.0",
    "ng2-ckeditor": "^1.1.9",
    "ng2-jalali-date-picker": "^2.0.3",
    "ng2-typewriter": "^1.1.0",
    "ng2-validation": "^4.2.0",
    "ngx-bootstrap": "^1.9.3",
    "ngx-carousel": "^1.3.3",
    "ngx-pagination": "^3.0.1",
    "ngx-toastr": "^6.2.1",
    "primeng": "^4.2.1",
    "rxjs": "^5.1.0",
    "ts-loader": "^3.5.0",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "1.7.3",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/core-js": "^0.9.46",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.2.16",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "persian-date": "^1.0.1",
    "primeng": "^4.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~5.0.1",
    "tslint": "~5.3.2",
    "typescript": "~2.7.1",
    "video.js": "^6.6.3"
  }
}

masoudline on 14 Mar 2018

Come across the same issue using angular4, do I have to upgrade to angular5?

jiushiwoyuze on 12 Apr 2018

Thanks for reporting this issue. This issue was originally reported a long time ago and since then we've had many releases, one of which might have addressed this problem. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.