jvandemo/generator-angular2-library

Angular Universal (Server side rendering) - how use *.umd.js for node.js

Open

#135 opened on Jun 20, 2017

View on GitHub
 (4 comments) (0 reactions) (0 assignees)JavaScript (754 stars) (122 forks)batch import
Type: Questionhelp wanted

Description

When I launch my application with angular universal i use this repo: https://github.com/evertonrobertoauler/cli-universal-demo

$ node dist/server.js 
~/api-lib/index.js:1
(function (exports, require, module, __filename, __dirname) { import { Component, Directive, ElementRef, Injectable, NgModule, Pipe } from '@angular/core';
                                                              ^^^^^^

SyntaxError: Unexpected token import

I see that when run build, lib is created in es2015 As in the file tsconfig.es5.json we have "module": "es2015"

But in the file api-lib.umd.js - this is what I need

In my application, I connect the library like this import {SampleModule, SampleService} from 'api-lib';

There is a solution in my project to make webpack compile into es5 In webpack.config.js

externals: [nodeExternals({
    whitelist: [
      /^api-lib/
    ]
  })],

But it seems to me not right, I do not understand how I can get my application to connect here is the api-lib.umd.js file when compiled Or should it automatically do this?

Contributor guide

Tech stack
javascripttypescriptangularnodejs
Domain
full stackbackend
Issue type
documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
needs investigation
Prerequisites
AngularAngular Universalbuild configuration
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
The issue discusses using the UMD bundle (api lib.umd.js) for Angular Universal server side rendering. Review the comments and the linked repository (cli universal demo) to understand the current build setup. Investigate why the generated library uses es2015 modules and how to configure the generator to output UMD for Node.js compatibility. Check if the solution mentioned (whitelisting in webpack externals) is still relevant or if there is a better approach in the current generator version.