angular-google-maps: Angular 4 Universal - SyntaxError: Unexpected token export

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 😄

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.

I have just forked this repo and i will provide soon a better solution to solve this kind of errors, like unexpected token export/import … so that the developer can uses this module without transpile manually the src files and run a custom npm script…

Following @AnthonyNahas his solution, I pushed a compiled version to git so one can directly use it in package.json without having to install babel etc:

"@agm/core": "git+https://github.com/cmddavid/core.git"

Might be of use to anyone. I’m using Firebase Hosting, and for some reason Firebase doesn’t seem to be compiling the code even though I’m using exactly the same method as described by Anthony on the package.json for Firebase. So thats why I use this workaround.

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

@AnthonyNahas

Your are a god my friend …

@AnthonyNahas honestly thanks for your solution, it’s working for me with latest version babel and angular 6.

@maxime1992 maybe try a quick fix: display your map only on the browser side, there isn’t any window element on the server side (that’s why it could be built but it fails at runtime)

pseudo code:

<ng-container *ngIf="isPlatformBrowser(platformId)">
  <here-your-agm-map/>
</ng-container>

@Gomathipriya I’ve just updated the above posted solution to the latest version of babel v7.1.0, and I tested the process in my own npm mobule @angular-material-extensions/google-maps-autocomplete

check circleci status here

travis-ci status here

@mcblum you should probably the same thing like the core module (see the above posted solution)

cheers 🍻

@Gomathipriya thanks for asking! You gave me the motivation to finally send a pull request!

21.9.2017, I published a solution to handle this bug! At that time, I didn’t know that the library is generating the write code like bundle, es5… I had too many projects and I was not able to find what’s going really wrong with @agm/core ! Well, yesterday I was developing an angular material extensions for angular apps that are using @agm/core and I faced the same issue while tesing with jest. So I decided to take a further look to this project and I found something interesting.

Actually, we don’t need anymore to transpile the code to es5 since the build of this project did that already for us. But typescript don’t know about them! Some information are missed in the package.json.

So tipp to solve that:

1. go to cd node_modules
2. cd \@agm/core
3. open the package.json
4. and add the following

 "main": "core.umd.js",
  "es2015": "index.js",
  "typings": "index.d.ts",

and the bug should be solved! Now when compiling, typescript will pick the right js code!

I sent few seconds ago a pull request!

Please support this PR after testing that on your machine!

I test it the following scenario here in this project @angular-material-extensions/google-maps-autocomplete

if you like project, please support me by starring and share it!

Thank you all 👍 ❤️

@AnthonyNahas. This is also working for me. Thanks

externals: [nodeExternals({ whitelist: [ /^@agm\/core/, ] })], did the job for me. Thank you. Otherwise @AnthonyNahas solution should do the job.

@lomboboo add a new npm script to transpile the ng2-slim… module –> add a npm script in package.json in “scrtipsts” scope "compile_ng2-slim-loading-bar": "babel node_modules/ng2-slim-loading-bar -d node_modules/ng2-slim-loading-bar --presets es2015",

then -->

add a postinstall script in package.json in "scrtipsts" scope "postinstall": "npm run compile_@agm_core && npm run compile_ng2-slim-loading-bar ",

–> after that run npm i one more time

–> result the other module should be transpiled too

@AnthonyNahas this worked for me, i dont know how you came up with that solution but thank you,

@karthikeyanmanureva u should do the same thing for antoher npm module which is throwing “SyntaxError: Unexpected token import” … @martinreus cheers

@adrienboulle thanks for explaining things, now I wonder: would it not be better to release the package in a different format that is also suitable for Angular Universal? That way all the workarounds circulating here would no longer be needed. Or would it be possible to make Angular Universal understand ES6 code?

My webpack.config.js https://gist.github.com/kkaabbaa/a308b218938ae55357f73c162e887bd5

Use webpack.config

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

@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 😄

Thanks a lot, it’s still work on Angular 7

After a lot of tries, the solution provided by @AnthonyNahas allowed me to deploy a universal app as a firebase function 😃 . My suggestion is to check if the ts files are effectively transformed into js, if they are, then the error about import/export must not appear.

Edit (26/12/2018) I run to the problem again with the snazzy info window module. I ended up discovering that babel was not running when I was using firebase deploy (Remember that when deploying AU as a firebase function, a npm install is performed, which means that the package will install again as ts files). In the end, I just forked the library(https://github.com/jota12x/angular-google-maps), apply babel, and install it from the repo. Problem solved. (Waiting for the fix in the main repo though).

@AnthonyNahas we’re seeing this same issue with the map clusterer package as well. Super frustrating, I appreciate your taking the time to work on it. Is there a proposed solution that I could implement while the PR is in review?

I can add this manually to make our tests pass, but it will still fail in the pipeline.

Thanks @AnthonyNahas , You saved my day, its really great work around, as i wasn’t agree with ejecting cli tool.

Thank you so much.

@AnthonyNahas , Thankyou so much , working fine for me , when I have opened the @agm files , after seeing ES6 syntax, first thought went for compiling using webpack which is a tought one(atleast for me), anyway thanks again, have setup Angular Universl SSR and absolutely fine now!

@AnthonyNahas saved my day. Was struggling to get this Angular Universal Server Side rendering up and running for weeks now. Your solution worked like a charm!!

@cmddavid It could potentially take a long time to upload a node modules directory would be my guess as to why, but I don’t actually know. Personally, I put the compiled modules in a directory inside the functions directory and just reference it from the package.json in the functions directory. For example "@agm/core": "file:./compiled_modules/@agm/core"

@AnthonyNahas MVP

@AnthonyNahas thanks so much

@AnthonyNahas , thanks, for one module it worked. But now I’m using another package ng2-slim-loading-bar and it throws error:

some_path/client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyle.ts:9

export const styles:any[] = ['.slim-loading-bar[_ngcontent-%COMP%] {\n    position: fixed;\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 99999;\n}\n\n\n.slim-loading-bar-progress[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 0;\n    z-index: 99998;\n    background-color: green;\n    color: green;\n    box-shadow: 0 0 10px 0; \n    height: 2px;\n    opacity: 0;\n\n    \n    -webkit-transition: all 0.5s ease-in-out;\n    -moz-transition: all 0.5s ease-in-out;\n    -o-transition: all 0.5s ease-in-out;\n    transition: all 0.5s ease-in-out;\n}'];
^^^^^^

SyntaxError: Unexpected token export

Any idea how can I fix it?

@AnthonyNahas ，your solution has helped me solve this problem

@AnthonyNahas, thank you so much for your solution! I tried several other solutions that didn’t work for me for roughly one month! This actually solves my problem =)

@AnthonyNahas that is a very interesting idea. It seems too good to be true! I’ll give it a go

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

and added

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