Angular 4 Universal - SyntaxError: Unexpected token export

[philippeboyd]

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

[adrienboulle]

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

[kkaabbaa]

Use webpack.config

externals: [nodeExternals({
    whitelist: [
      /^@agm\/core/,
    ]
})],

[viktorstaikov]

@kkaabbaa can you confirm that this works?
Simply adding it to my webpack didn't get the job done.

[dannybombastic]

i have the same problem, i have babel and i did make a copy of the project in a new folder then a have babel locally installed but i would like to understand the process that Adrienboulle he mades for his company because i have to get finis this thing thank you in advance.

[dannybombastic]

i have add it to webpack.config and it dosen`t work for me.

externals: [nodeExternals({
whitelist: [
/^@agm/core/,
]
})],

[dockleryxk]

I have it working with a workaround by dynamically loading a component that contains my agm-map based on if it's the browser or server: https://angular.io/guide/dynamic-component-loader

[pravashupreti]

I have compiled to es5 but also showing error

[pravashupreti]

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

[kkaabbaa]

I used this post https://medium.com/@evertonrobertoauler/angular-4-universal-app-with-angular-cli-db8b53bba07d

and added

externals: [nodeExternals({
    whitelist: [
      /^@agm\/core/,
    ]
})],