Angular 4 Universal - SyntaxError: Unexpected token export

Issue description I’m unable to start my project in universal mode. However, when executing it in AOT with ng serve, all is well.

Steps to reproduce and a minimal demo of the problem

1. Clone project https://github.com/philippeboyd/angular-seo
2. npm install
3. npm run start

Current behavior Compiles but server cannot start

$ npm run start

> ang4-seo@0.0.0 prestart /home/philippe/web/angular-seo
> ng build --prod && ngc

Hash: 7d85520031346575c3db                                                              
Time: 24216ms
chunk    {0} polyfills.fdc74e8f101f8a37cfda.bundle.js (polyfills) 160 kB {4} [initial] [rendered]
chunk    {1} main.1765992e8c1c2054a14a.bundle.js (main) 30.1 kB {3} [initial] [rendered]
chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.54e8d36ccd5e25bbf525.bundle.js (vendor) 1.52 MB [initial] [rendered]
chunk    {4} inline.9e599a3566ef53034f50.bundle.js (inline) 0 bytes [entry] [rendered]

> ang4-seo@0.0.0 start /home/philippe/web/angular-seo
> ts-node src/server.ts

/home/philippe/web/angular-seo/node_modules/@agm/core/index.js:2
export * from './directives';
^^^^^^
SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/philippe/web/angular-seo/src/app/app.module.ts:5:1)
    at Module._compile (module.js:571:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ang4-seo@0.0.0 start: `ts-node src/server.ts`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ang4-seo@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Expected/desired behavior Server starting without errors

angular2 & angular-google-maps version

• Angular 4.1.3
• agm/core 1.0.0-beta.0

Other information I’ve looked into issue #668 but it’s doesn’t seem to be the same issue…

[AnthonyNahas]

Updated the solution to the latest version of babel

@philippeboyd @dkmostafa i solved the same issue recently for this module and others like --> ngx translate and more…

solution (compile the js files into es2015):

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env

2. add this to the root project under the name .babelrc or add the presets directly via cli { "presets": ["@babel/preset-env"] }

3. add a npm script in package.json in “scrtipsts” scope "compile_@agm_core": "babel node_modules/@agm/core -d node_modules/@agm/core --presets @babel/preset-env",

4. add a postinstall script in package.json in “scrtipsts” scope "postinstall": "npm run compile_@agm_core",

5. run npm i to install the deps. After installing the deps, the script postinstall will run and babel will compile the targeted js files

6. run your server and should world

7. Give me please feedback if it works. I did the same thins for more than 3 npm modules it works on my machine 😄

[laurentgoudet]

There is multiple issues preventing that package from being used on the server-side through Angular Universal. I’ve already did similar work on various libraries (e.g. https://github.com/salemdar/ngx-cookie/pull/41, https://github.com/zefoy/ngx-perfect-scrollbar/pull/129, https://github.com/mattlewis92/angular-resizable-element/pull/80), so I thought I’d have a look.

In short, when targeting the server platform with the Angular CLI only the app itself is compiled, as the library UMD bundle would then be used when running it in NodeJS. As pointed out by @AnthonyNahas, this means that the main package entry point must point to said UMD bundle, i.e. something NodeJS natively understands.

In addition to the NodeJS-native UMD bundle, best practices for libraries as per the Angular Package Format guidelines is to also publish AoT-friendly ES modules and metadata.json metadata files, which that package already does. However, due to https://github.com/angular/angular-cli/issues/7200, the Angular Universal build currently fail (with SyntaxError: Unexpected token export-like errors) when said library is published as separate ES modules instead of a flatten one (fesm), as the deep imports would then resolved to the ES modules causing Node to fail as it doesn’t understand ES modules

The fix is to use angularCompilerOptions’s flatModuleOutFile & flatModuleId params, as per https://angular.io/guide/aot-compiler, and pass the output through Rollup, in order to produce flat ES module & typings files, and then set those as the module and typings entry points. Since those options require a unique entry point per library, I had to split the main tsconfig.json files in order to support js-marker-clusterer & snazzy-info-window.

In addition, the rollup configs were setting context: 'window', which breaks on the server-side, which I switched back to Rollup’s default “this as undefined” behavior (which albeit being a warning, is actually the expected behavior).

Last, now that your app universal build compiles with this library, you need to decide what to do at runtime / make the code itself Universal friendly, which I achieved using isPlatformBrowser(this.platformId) in the Google Maps SDK loader load() function to just skip the injection. It does the trick for our current use case, but most safeguards could be needed in order to disable that library on the server side (since the Google Maps SDK won’t run there anyway).

Anyway, the PR is at https://github.com/SebastianM/angular-google-maps/pull/1554, comments welcome. I have a fork running at @laurentgoudet/agm-core which I’m successfully using for my project (until this PR gets merged). I’m using the Angular CLI but it should work with any builder - feedback welcome.