Solvedangular google maps 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...

37 Answers

✔️Accepted Answer

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 :D

Other Answers:

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. salemdar/ngx-cookie#41, zefoy/ngx-perfect-scrollbar#129, mattlewis92/angular-resizable-element#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 angular/angular-cli#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 #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.

Hello, I've had to deal with this issue which is not really an Agm issue but a global one.
Most of the recent packages, including Agm are compoiled in es6, with import and export keywords.

This was not an issue before Universal since there is always a bundle file in the packages for lets say System.js for local dev and Webpack/Rollup will understand es6 for production bundles.

But with Universal, you directly use the files in the node_modules, in es6 then, and node do not know about import and export tokens yet.

Two things can be done, you can bundle your app even for universal, but you will lose a lot of compile time juste for a bundle that is useless in a server context.

Other option, the one I used in my company, is to copy all your sources in a tmp folder before compile and create a node_modules folder in this tmp folder.
You can then copy all the @agm folder (the one in the "real" node_module folder in the "fake" one in tmp. You will then be able to use babel to transform the es6 files copied in the fake node_modules folder in commonjs that nodejs will understand. (when you require @agm node will look for the file in the fake node_modules folder)

This is super annoying and there is not really other options for now (let me know if you find a better one). I really think ng2 modules have to find a way to provide both es6 and commonjs files if they want their modules to be easy to use with universal :)

Finally able to use google map with universal. I am making repo and video

More Issues: