Universal server bundle is not working properly

[chrillewoodz]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.3.0-rc.1
node: 6.10.3
os: darwin x64

Repro steps.

Follow these steps here:

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

Add https://github.com/ngx-translate/core to the app.

Build a server bundle.

Test it and you will see the error below.

The log given by the failure.

<some-excluded-path>/ng-boilerplate/node_modules/@ngx-translate/core/src/translate.store.js:1
(function (exports, require, module, __filename, __dirname) { import { EventEmitter } from "@angular/core";
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.17 (<some-excluded-path>/ng-boilerplate/dist-server/main.75d7fa7aeab5f9b24f61.bundle.js:1:6560)
    at e (<some-excluded-path>/ng-boilerplate/dist-server/main.75d7fa7aeab5f9b24f61.bundle.js:1:149)
    at Object.2cGb (<some-excluded-path>/chrillewoodz/ng-boilerplate/dist-server/main.75d7fa7aeab5f9b24f61.bundle.js:1:7952)
    at e (<some-excluded-path>/ng-boilerplate/dist-server/main.75d7fa7aeab5f9b24f61.bundle.js:1:149)
    at Object.Zq8w (<some-excluded-path>/ng-boilerplate/dist-server/main.75d7fa7aeab5f9b24f61.bundle.js:1:28947)
    at e (<some-excluded-path>/ng-boilerplate/dist-server/main.75d7fa7aeab5f9b24f61.bundle.js:1:149)

Desired functionality.

Basically the issue here is that node is resolving the wrong module. It's looking inside of the node_modules folder instead of in the vendor file in the server bundle.

Mention any other details that might be useful.

You can download a project with these steps already done:

https://github.com/chrillewoodz/ng-boilerplate/tree/universal

So simply run npm run universal and you will see the error.

[cyrilletuzi]

Same error using @angular/flex-layout

[filipesilva]

@FrozenPandaz @alxhub any idea what the problem is?

[cyrilletuzi]

Is the server bundle allowing all formats (umd, es2015, commonjs and so on) ? Because I noticed flex-layout doesn't have all the package.json entry points compared to other official Angular package, and node requires commonjs compatible librairies.

[donoso-eth]

@chrillewoodz I´ve cloned and wanted to have a look in your repo, nevertheless I don´t found the script universal in the package.json neither following the steps of the https://github.com/angular/angular-cli/wiki/stories-universal-rendering
I´ve found the 2nd app in the angular.cli.json??

Can it be part of the problem?

[joejordanbrown]

@chrillewoodz it doesn't look like you have followed the wiki step by step, @ampgular is correct with what he's pointed out, but also your @angular/cli version should be the RC release in your package.json.

You have:

  "devDependencies": {
    "@angular/cli": "^1.1.3"
  }

When you should have:

  "devDependencies": {
    "@angular/cli": "1.3.0-rc.3"
  }

You should also update your global @angular/cli, uninstall using npm -g uninstall @angular/cli make sure you clear the npm cache npm cache clean then install the latest RC version npm -g install @angular/cli@1.3.0-rc.3

[chrillewoodz]

It looks like I didn't push the latest stuff, my bad. Anyway I know others who have gotten the same issue so it's not an issue with my setup. But I will make sure to push it once I get the opportunity.

[chrillewoodz]

There, I've pushed the latest changes. Now you should be able to find a "universal": "ng build --prod && ng build --prod --app 1 && ts-node server", script in the package json and also the cli at the latest rc.3 release.

[cyrilletuzi]

If it can help, I did a blog post with full explanations.

First it will help you about the hash (no need of it), and second the first thing I would consider is to stick to node. ts-node is a great tool, but in this case it adds more complexity to an already complex configuration, you can do the same with just node.

[chrillewoodz]

@cyrilletuzi Have you actually tested it out with @ngx/translate for example? Cuz that's where the issue is coming from.

[cyrilletuzi]

Just tried, I get the same error (the first one).

So you know, there was the exact same error with @angular/flex-layout beta 8, but with the last builds, it's gone, because they updated to the official way Angular modules are build. One main difference is that there is now a es2015 entry point in their package.json, but I don't know if it's what solved the problem, or a change in their build config.

One point which surprised me first is that the server bundle only contains the app code. So Angular packages (@angular/core and so on) and all other packages need to be installed on the server project too. And the error seems to show that the server bundle requests the packages from node_modules in the wrong format (it's es2015, while it should be commonjs).

Shouldn't the CLI produce a vendor bundle too, to be sure everything is here in the good format ?

[cyrilletuzi]

By the way, having to install Angular packages on the server is OK in Node, but it will be impossible with other languages Universal engines (like the one for .NET).

[lukaszbachman]

I'm seeing the same with ng-bootstrap. Any ideas how to fix this? I'm currently investigating using universal for our large project and the issue with integrating 3rd party libraries puts this work on hold.

[feloy]

I've noticed the same problem with ngx-translate: ngx-translate/core#616
A minimal project is available on github for testing: https://github.com/feloy/bug-ngx-translate

[hansl]

We are working on a fix with the libraries themselves. In the meantime, you can use (this is not a supported solution, just a fix) something like https://www.npmjs.com/package/import-export. Alternatively, you can disable AOT in the meantime.

I'm keeping this issue open in the meantime for keeping the discussion.

[chrillewoodz]

Sounds great :) Any early estimate on when this could be resolved? Just so I can plan ahead a bit.

[intellix]

What's the proposed fix for each of the libraries? I'm guessing to export a variety of formats like angular-quickstart-lib? There's a lot of libraries and guess we've all got to do our part by educating and sending PRs to the wrongly exported libraries out there :)

Just now I saw a PR to change the format of angulartics2 to CommonJS which I'm guessing is a wrong fix

[niravshah]

Even when I do my build with the '--no-aot' flag, I still get the same error.

> ng build --prod --no-aot && ngc

Hash: 3527298f2a176234eb92                                                              
Time: 15948ms
chunk    {0} polyfills.550cf10c9aa54b8194c7.bundle.js (polyfills) 177 kB {4} [initial] [rendered]
chunk    {1} main.dc72226c09f60d9253bd.bundle.js (main) 79.7 kB {3} [initial] [rendered]
chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.68fbe47955f62acf4ee4.bundle.js (vendor) 2.56 MB [initial] [rendered]
chunk    {4} inline.42fcf4018d66c4aef552.bundle.js (inline) 0 bytes [entry] [rendered]

> ts-node src/server.ts

/Documents/code/universal-demo/node_modules/ngx-facebook/dist/esm/providers/facebook.js:1
(function (exports, require, module, __filename, __dirname) { import { Injectable } from '@angular/core';
                                                              ^^^^^^
SyntaxError: Unexpected token import

Has anyone else managed to work around this problem? I'd appreciate any help as this is currently completely blocking my plans to go live with my changes.

[bliitzkrieg]

I am also experiencing this issue but for ngx-meta (https://github.com/ngx-meta/core)

[elvismercado]

I cannot use bundleDependencies=all as it is throwing an error like this Data path "" should NOT have additional properties(bundleDependencies).

What are the requirements for a module to be Universal compatible?

[divya130]

Same error using @ngx-google-places-autocomplete

import { Directive, ElementRef, EventEmitter, Input, NgZone, Output } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import

can anyone help me to resolve this???

[miikkikiikki]

Same error using @edcarroll/ng2-semantic-ui

universal-starter/node_modules/ng2-semantic-ui/dist/modules/dropdown/directives/dropdown-menu.js:11

import { Directive, ContentChild, forwardRef, Renderer2, ElementRef, ContentChildren, QueryList, Input, HostListener, ChangeDetectorRef } from "@angular/core";
^
SyntaxError: Unexpected token

 Someone fixed with such a problem?

[danieldanielecki]

Up, still doesn't work on Angular 7. Trying with Firebase Cloud Functions to render on server.

functions\node_modules\ng-circle-progress\index.js:1
(function (exports, require, module, __filename, __dirname) { import { Component, ElementRef, EventEmitter, Inject, Input, NgModule, Output } from '@angular/core';
                                                                     ^

SyntaxError: Unexpected token {

Currently you have to set up custom webpack and whitelist these problematic modules, like so:

webpack custom

const nodeExternals = require('webpack-node-externals');
config.externals = nodeExternals({
  whitelist: [
    /^ng-circle-progress/,
    /^ng2-tel-input/
  ]
});

A good example is here.

[alan-agius4]

Hi all, this issue should be solved in version 8, and in version 9 bundleDependencies will be turned on by default.

The new 8.x versions of @nguniversal/express-engine schematics creates a setup which avoid this issue. If you are upgrading to 8.x please follow https://github.com/angular/universal/blob/master/docs/v8-upgrade-guide.md

You can also use the next version for Ivy and version 9 by using ng add @nguniversal/express-engine --next.

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]

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