Unexpected token import after angular universal

[rohanpadwalkar]

Giving following issue after enabling SSR using Angular Universal

Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/node_modules/ngx-google-places-autocomplete/ngx-google-places-autocomplete.directive.js:1
(function (exports, require, module, __filename, __dirname) { import { Directive, ElementRef, EventEmitter, Input, NgZone, Output } from '@angular/core';
^^^^^^

SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:152:10)
at Module._compile (module.js:605:28)
at Object.Module._extensions..js (module.js:652:10)
at Module.load (module.js:560:32)
at tryModuleLoad (module.js:503:12)
at Function.Module._load (module.js:495:3)
at Module.require (module.js:585:17)
at require (internal/module.js:11:18)
at Object.ngx-google-places-autocomplete/ngx-google-places-autocomplete.directive (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:15441:18)
at webpack_require (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:20:30)
at Object../src/app/home/home.component.ngfactory.js (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:12836:10)
at webpack_require (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:20:30)
at Object../src/app/app.server.module.ngfactory.js (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:12612:10)
at webpack_require (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:20:30)
at Object../src/main.server.ts (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:14891:37)

[divya130]

same issue here , did you got any solution???

[rohanpadwalkar]

did you tried command node local.js

[divya130]

did you tried command node local.js

no i haven't tried

[rohanpadwalkar]

try
npm run build:prod

after build

node local.js

make sure you are in angular project folder

[divya130]

try
npm run build:prod

after build

node local.js

make sure you are in angular project folder
will try, but what does node local.js do and do i need to install local.js

[rohanpadwalkar]

Have a look at your package.json

your npm run server command calls "node local.js"
check your file structure you will find local.js file

[jkapongo]

You need to use Babel to compile the code to ES2015, similar to Anthony Nahas's solution for angular-google-maps:

1. Install Babel: 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 the following npm script in package.json: "compile_ngx-google-places-autocomplete": "babel node_modules/ngx-google-places-autocomplete -d node_modules/ngx-google-places-autocomplete --presets @babel/preset-env",
4. Add a postinstall script in package.json: "postinstall": "npm run compile_ngx-google-places-autocomplete",
5. Run npm i to install the dependencies and after the installation the postintall scripts will run Babel to compile ngx-google-places-autocomplete to ES2015.

[vijaycreatise]

You need to use Babel to compile the code to ES2015, similar to Anthony Nahas's solution for angular-google-maps:

1. Install Babel: 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 the following npm script in package.json: "compile_ngx-google-places-autocomplete": "babel node_modules/ngx-google-places-autocomplete -d node_modules/ngx-google-places-autocomplete --presets @babel/preset-env",
4. Add a postinstall script in package.json: "postinstall": "npm run compile_ngx-google-places-autocomplete",
5. Run npm i to install the dependencies and after the installation the postintall scripts will run Babel to compile ngx-google-places-autocomplete to ES2015.

This is not working. I'm using Angular 8. Can u please help me out in this.

[mshenawy]

• stall Babel: npm install --save-dev @babel/core @babel/cli @babel/preset-env
• Add this to the root project under the name .babelrc or add the presets directly via cli
  { "presets": ["@babel/preset-env"] }
• Add the following npm script in package.json: "compile_ngx-google-places-autocomplete": "babel node_modules/ngx-google-places-autocomplete -d node_modules/ngx-google-places-autocomplete --presets @babel/preset-env",
• Add a postinstall script in package.json: "postinstall": "npm run compile_ngx-google-places-autocomplete",
• Run npm i to install the dependencies and after the installation the postintall scripts will run Babel to compile ngx-google-places-autocomplete to ES2015.

I'm having the same problem, 'm using Angular 8. but this solution not working with me.
any help ?

[nausad-creator]

You need to use Babel to compile the code to ES2015, similar to Anthony Nahas's solution for angular-google-maps:

1. Install Babel: 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 the following npm script in package.json: "compile_ngx-google-places-autocomplete": "babel node_modules/ngx-google-places-autocomplete -d node_modules/ngx-google-places-autocomplete --presets @babel/preset-env",
4. Add a postinstall script in package.json: "postinstall": "npm run compile_ngx-google-places-autocomplete",
5. Run npm i to install the dependencies and after the installation the postintall scripts will run Babel to compile ngx-google-places-autocomplete to ES2015.

This is not working. I'm using Angular 11. Can u please help me out in this.

[stwasant]

Hello Guys.. I trying to use this library but I need active this Api when the address has number. I'm not found the way to do this work. I'm Using angular. Any idea? Thank you so much.