seo Question posted in
Some basic information to get you started with this can be found here.

SyntaxError: Unexpected token export after angular4 + Universal – SEO

I am stuck in making my nagular 4 with SEO friendly using Universal.

I have followed the steps as provided here. https://github.com/neoighodaro/Angular-SEO-friendly-example/blob/master/tutorial.md with my existing application.

If i create seperate application, i am getting perfect output.

But, when i am trying to integrate in existing ang4 it’s throwing error.

I have resolved all the issues one by one. But

"angangularnode_modulesngx-bootstrapmodalindex.js:1
 (function (exports, require, module, __filename, __dirname) { export { 
 BsModalRef } from './bs-modal-ref.service';
   ^^^^^^SyntaxError: Unexpected token export

this is my package.json

{
        "name": "angular2-cli",
        "version": "0.0.0",
        "license": "MIT",
        "scripts": {
          "prestart": "ng build -- eve=prod --aot=false && ngc",
          "start": "ts-node src/server.ts"
        },
        "private": true,
        "dependencies": {
          "@angular/animations": "^4.0.0",
          "@angular/common": "^4.0.0",
          "@angular/compiler": "^4.0.0",
          "@angular/core": "^4.0.0",
          "@angular/forms": "^4.0.0",
          "@angular/http": "^4.0.0",
          "@angular/platform-browser": "^4.0.0",
          "@angular/platform-browser-dynamic": "^4.0.0",
          "@angular/platform-server": "^4.0.0",
          "@angular/router": "^4.0.0",
          "angular-2-local-storage": "^1.0.1",
          "angular2-busy": "^2.0.4",
          "angular2-emoji-picker": "1.4.3",
          "angular2-infinite-scroll": "^0.3.5",
          "angular2-social-login": "^3.0.1",
          "core-js": "^2.4.1",
          "enhanced-resolve": "^3.3.0",
          "google-maps": "^3.2.1",
          "jquery": "^3.2.1",
          "lg-autoplay": "^1.0.4",
          "lg-fullscreen": "^1.0.1",
          "lg-hash": "^1.0.1",
          "lg-pager": "^1.0.2",
          "lg-share": "^1.0.2",
          "lg-thumbnail": "^1.0.3",
          "lg-video": "^1.0.1",
          "lg-zoom": "^1.0.4",
          "lightgallery": "^1.3.9",
          "lightgallery.js": "^1.0.1",
          "ng-cli": "^0.7.0",
          "ng2-bootstrap": "^1.6.3",
          "ng2-go-top-button": "^2.0.8",
          "ng2-google-place-autocomplete": "^1.4.2",
          "ng2-toastr": "^4.0.1",
          "ng2-validation": "^4.2.0",
          "ngx-bootstrap": "^2.0.0-beta.8",
          "ngx-pagination": "^3.0.1",
          "rxjs": "^5.1.0",
          "time-ago-pipe": "^1.2.1",
          "zone.js": "^0.8.4"
        },
        "devDependencies": {
          "@angular/cli": "^1.5.0",
          "@angular/compiler-cli": "^4.0.0",
          "@types/jasmine": "2.5.38",
          "@types/node": "~6.0.60",
          "codelyzer": "~2.0.0",
          "jasmine-core": "~2.5.2",
          "jasmine-spec-reporter": "~3.2.0",
          "karma": "~1.4.1",
          "karma-chrome-launcher": "~2.1.1",
          "karma-cli": "~1.0.1",
          "karma-coverage-istanbul-reporter": "^0.2.0",
          "karma-jasmine": "~1.1.0",
          "karma-jasmine-html-reporter": "^0.2.2",
          "protractor": "~5.1.0",
          "ts-node": "~2.0.0",
          "tslint": "~4.5.0",
          "typescript": "~2.2.0",
          "webpack": "^3.8.1"
        }
      }

This is my tsconfigapp.json:

   {
      "extends": "../tsconfig.json",
      "compilerOptions": {
        "outDir": "../out-tsc/app",
        "module": "es2015",
        "baseUrl": "",
        "types": []
      },
      "exclude": [
        "server.ts",
        "test.ts",
        "**/*.spec.ts"
      ]
    }

This is my tsconfig.json

         {
              "compileOnSave": false,
              "compilerOptions": {
                "outDir": "./dist/out-tsc",
                "baseUrl": "src",
                "sourceMap": true,
                "declaration": false,
                "moduleResolution": "node",
                "emitDecoratorMetadata": true,
                "experimentalDecorators": true,
                "target": "es5",
                "typeRoots": [
                  "node_modules/@types"
                ],
                "lib": [
                  "es2016",
                  "dom"
                ]
              },
              "angularCompilerOptions": {                          

                "genDir": "./dist/ngfactory",
                "entryModule": "./src/app/app.module#AppModule"
              }
            }

i am stuck and i surfed all the internet and no perfect solution i got.

Please suggest me how can i resolve this error.

ERROR is:
enter image description here

Tags:

2

Answers


  1. 0

    Try adding this: 

    { BsModalRef } from 'ngx-bootstrap';

    instead of this:

    { BsModalRef } from './bs-modal-ref.service';
    Login or Signup to reply.
  2. 0

    I have been facing this problem for a very long. I use to do a workaround to bypass this. But finally, I have fixed this. So, here is the solution.

    Where did I find this problem:

    ngx-bootstrap

    Problem:

    This npm package is written in ES6 and is not being transpiled to support older environments like ES5. So, it does not understand the keyword like export or import.

    Solution

    To make the package compatible with our environment, we have to transpile it by ourselves. I did it using webpack and babel-loader to transpile ngx-bootstrap package.

    Steps:

    1. Get your universal build ready.

    2. Install webpack and loaders packages related to babel using this command,

      npm install -D babel-loader @babel/core @babel/preset-env webpack

    3. Create a webpack configuration file webpack.config.js.

    4. Add babel-loader like this, and exclude all other packages than ngx-bootstrap.

      module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/(?!ngx-bootstrap)/
      }
    ]
  }

    To understand transpilation and what’s going wrong in this issue, I would recommend you to read this nice article How to transpile node modules.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search