Skip to content

Angular Universal fails on importing 3rd party libraries because they are not transpiled to ES5 #7248

@lukaszbachman

Description

@lukaszbachman

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.3
node: 6.10.2
os: linux x64
@angular/animations: 4.3.2
@angular/common: 4.3.2
@angular/compiler: 4.3.2
@angular/core: 4.3.2
@angular/forms: 4.3.2
@angular/http: 4.3.2
@angular/platform-browser: 4.3.2
@angular/platform-browser-dynamic: 4.3.2
@angular/router: 4.3.2
@angular/cli: 1.3.0-rc.3
@angular/compiler-cli: 4.3.2
@angular/platform-server: 4.3.0

Repro steps.

  1. Start new ng project
  2. Install and use ng-bootstrap as proposed here
  3. Follow the "universal story"

The log given by the failure.

$ node universal-test.js
/xxx/frontend-web/node_modules/@ng-bootstrap/ng-bootstrap/alert/alert.js:1
(function (exports, require, module, __filename, __dirname) { import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, } 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.2RxQ (/xxx/frontend-web/dist-server/main.991bfecc1615c90e73c7.bundle.js:1:1646)

Desired functionality.

I am expecting the standard output for my universal app.

Mention any other details that might be useful.

It seems that the problem is that 3rd parties are not being transpiled to ES5 and node can't comprehend Type Script's import statement. People are trying to work around it by making webpack compile the external libs to ES5, example: https://github.com/evertonrobertoauler/cli-universal-demo/blob/master/webpack.config.js
This could perhaps work, but I don't want to eject my project just to work around this issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions