Universal Rendering - ReferenceError: webpackJsonp is not defined #7534

iUwej · 2017-08-29T11:15:36Z

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.

The text was updated successfully, but these errors were encountered:

RRmallaP · 2017-09-14T16:36:18Z

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

RicardoVaranda · 2017-09-19T09:44:51Z

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

RRmallaP · 2017-09-25T09:34:52Z

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

rogerjacobrj · 2017-10-15T07:59:10Z

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:

Following are from my package.json file:

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

MarcusRiemer · 2017-10-23T16:02:37Z

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"
}

iUwej · 2017-10-24T03:42:29Z

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.

sasxa · 2017-10-25T00:00:13Z

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.

MarcusRiemer · 2017-10-25T17:24:58Z

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

cstodor · 2017-10-31T09:00:22Z

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

SWBennett06 · 2017-11-01T00:52:55Z

@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.

longhoang2984 · 2017-11-03T09:41:51Z

same issue! :(

ScriptArtist · 2017-11-13T21:36:05Z

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

oshingc · 2017-11-17T20:31:15Z

Same issue .

Still issues with Universal Rendering: angular/angular-cli#7534 (comment)

masoudline · 2018-03-14T13:32:31Z

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"
  }
}

jiushiwoyuze · 2018-04-12T09:17:05Z

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

filipesilva · 2019-10-01T15:34:58Z

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.

angular-automatic-lock-bot · 2019-11-01T08:05:03Z

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

filipesilva assigned hansl and alxhub Sep 4, 2017

filipesilva added needs: investigation Requires some digging to determine if action is needed type: RFC / discussion / question labels Sep 4, 2017

RicardoVaranda mentioned this issue Sep 19, 2017

Improve docs/story for universal builds #7388

Closed

MarcusRiemer pushed a commit to MarcusRiemer/blattwerkzeug that referenced this issue Jan 31, 2018

Client: Now actually bumped to Angular 5.0.0-rc.3

137bc1c

Still issues with Universal Rendering: angular/angular-cli#7534 (comment)

hansl unassigned hansl and alxhub Feb 6, 2018

filipesilva closed this as completed Oct 1, 2019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 1, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Universal Rendering - ReferenceError: webpackJsonp is not defined #7534

Universal Rendering - ReferenceError: webpackJsonp is not defined #7534

iUwej commented Aug 29, 2017

RRmallaP commented Sep 14, 2017

RicardoVaranda commented Sep 19, 2017

RRmallaP commented Sep 25, 2017

rogerjacobrj commented Oct 15, 2017

MarcusRiemer commented Oct 23, 2017

iUwej commented Oct 24, 2017 •

edited

Loading

sasxa commented Oct 25, 2017

MarcusRiemer commented Oct 25, 2017

cstodor commented Oct 31, 2017 •

edited

Loading

SWBennett06 commented Nov 1, 2017

longhoang2984 commented Nov 3, 2017

ScriptArtist commented Nov 13, 2017 •

edited

Loading

oshingc commented Nov 17, 2017

masoudline commented Mar 14, 2018

jiushiwoyuze commented Apr 12, 2018

filipesilva commented Oct 1, 2019

angular-automatic-lock-bot bot commented Nov 1, 2019

Universal Rendering - ReferenceError: webpackJsonp is not defined #7534

Universal Rendering - ReferenceError: webpackJsonp is not defined #7534

Comments

iUwej commented Aug 29, 2017

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

RRmallaP commented Sep 14, 2017

RicardoVaranda commented Sep 19, 2017

RRmallaP commented Sep 25, 2017

rogerjacobrj commented Oct 15, 2017

MarcusRiemer commented Oct 23, 2017

iUwej commented Oct 24, 2017 • edited Loading

sasxa commented Oct 25, 2017

MarcusRiemer commented Oct 25, 2017

cstodor commented Oct 31, 2017 • edited Loading

SWBennett06 commented Nov 1, 2017

longhoang2984 commented Nov 3, 2017

ScriptArtist commented Nov 13, 2017 • edited Loading

oshingc commented Nov 17, 2017

masoudline commented Mar 14, 2018

jiushiwoyuze commented Apr 12, 2018

filipesilva commented Oct 1, 2019

angular-automatic-lock-bot bot commented Nov 1, 2019

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

iUwej commented Oct 24, 2017 •

edited

Loading

cstodor commented Oct 31, 2017 •

edited

Loading

ScriptArtist commented Nov 13, 2017 •

edited

Loading