search

angular / universal

Server-side rendering and Prerendering for Angular
MIT License
4.04k stars 483 forks source link

Invalid JSON character: " " at 32:11. after ng add @...express-engine #1231

Closed hakkurishian closed 5 years ago

hakkurishian commented 5 years ago

Bug Report

What is the expected behavior?

When trying to add SSR to my existing Angular 8 app I was using this command: ng add @nguniversal/express-engine --clientProject spa --verbose=true I expected the necessary package to be installed (happened) and files created(apparently does not happen). The error message (see below) is not descriptive and gives no hint to the file that might be affected.

What is the current behaviour?

After a second execution I got the following output:

ng add @nguniversal/express-engine --clientProject spa --verbose=true
Skipping installation: Package already installed #this was not present in the first execution
Invalid JSON character: " " at 32:11.

What modules are related to this issue?

- [x] express-engine

Environment:

@nguniversal versions

Angular CLI: 8.3.3 Node: 10.16.3 OS: darwin x64 Angular: 8.2.5 ... animations, common, compiler, core, forms, platform-browser ... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.803.3 @angular-devkit/build-angular 0.803.3 @angular-devkit/build-optimizer 0.803.3 @angular-devkit/build-webpack 0.803.3 @angular-devkit/core 8.3.3 @angular-devkit/schematics 8.3.3 @angular/cdk 8.1.4 @angular/cli 8.3.3 @angular/compiler-cli 7.2.15 @angular/http 7.2.15 @angular/language-service 7.2.15 @angular/material 8.1.4 @ngtools/webpack 8.3.3 @nguniversal/express-engine 8.1.1 @schematics/angular 8.3.3 @schematics/update 0.803.3 rxjs 6.5.3 typescript 3.6.2 webpack 4.39.2

alan-agius4 commented 5 years ago

Do you have comments in your package.json by any chance?

hakkurishian commented 5 years ago

@alan-agius4 Not that I'm aware of. Here is my package.json right now

{
  "name": "spa",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --port 4200 --base-href http://localhost:5002/app/",
    "start-vpn": "ng serve --host 0.0.0.0 --port 4200 --base-href http://172.27.232.1:5002/app/ --configuration vpn",
    "start-broken": "ng serve --host 0.0.0.0 --port 4200 --base-href http://localhost:5002/app/ --live-reload-client http://localhost:4400",
    "build": "ng build  --base-href /project/spa/dist/ --output-hashing=all",
    "build-staging": " ng build --configuration staging --base-href /project/spa/dist/ --output-hashing=all",
    "build-production": " ng build --configuration production --base-href /app/ --output-hashing=all",
    "start-staging": "ng serve --host 0.0.0.0 --port 4200 --base-href http://localhost:5002/app/ --configuration dev --poll 1000",
    "start-production": "ng serve --port 4200  --configuration production",
    "start-dev": "ng serve --port 4200  --configuration dev --host 0.0.0.0 ",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^0.803.3",
    "@angular/animations": "^8.2.5",
    "@angular/cdk": "^8.1.4",
    "@angular/common": "^8.2.5",
    "@angular/compiler": "^8.2.5",
    "@angular/core": "^8.2.5",
    "@angular/forms": "^8.2.5",
    "@angular/http": "^7.2.15",
    "@angular/material": "^8.1.4",
    "@angular/platform-browser": "^8.2.5",
    "@angular/platform-browser-dynamic": "^8.2.5",
    "@angular/router": "^8.2.5",
    "@auth0/angular-jwt": "^3.0.0",
    "@kolkov/angular-editor": "^1.0.0-beta.4",
    "@nguniversal/express-engine": "^8.1.1",
    "@swimlane/dragula": "^3.8.0",
    "@swimlane/ngx-dnd": "^8.0.0",
    "@types/waypoints": "^4.0.1",
    "angular-calendar": "^0.27.18",
    "angular-tree-component": "^8.3.0",
    "angular2-tinymce": "^3.3.0",
    "auth0-js": "^9.11.3",
    "bootstrap": "^4.3.1",
    "core-js": "^3.2.1",
    "dropzone": "^5.5.1",
    "shared": "file:../shared",
    "jquery": "^3.4.0",
    "katex": "^0.11.0",
    "moment": "^2.24.0",
    "ng-click-outside": "^5.1.1",
    "ngx-dropzone-wrapper": "^8.0.0",
    "ngx-select-ex": "^3.7.2",
    "ngx-slick-carousel": "^0.4.6",
    "popper": "^1.0.1",
    "rxjs": "^6.5.3",
    "rxjs-compat": "6.5.3",
    "slick-carousel": "^1.8.1",
    "tinymce": "^5.0.15",
    "ts-helpers": "^1.1.1",
    "waypoints": "^4.0.1",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular/cli": "^8.3.3",
    "@angular/compiler-cli": "^8.2.5",
    "@angular/language-service": "^8.2.5",
    "@types/jasmine": "^3.4.0",
    "@types/jasminewd2": "^2.0.6",
    "@types/jquery": "^3.3.31",
    "@types/node": "~12.7.4",
    "codelyzer": "~5.1.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.19.0",
    "typescript": "~3.5.2"
  }
}
alan-agius4 commented 5 years ago

Would you be able to share a reproduction? Or you angular.json ?

hakkurishian commented 5 years ago

here is my angular.json. 


{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "spa": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.json",
            "preserveSymlinks": true,
            "polyfills": "src/polyfills.ts",
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/app/theme",
                "src/theme",
                "assets"
              ]
            },
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/android-chrome-192x192.png",
              "src/android-chrome-256x256.png",
              "src/apple-touch-icon.png",
              "src/favicon-16x16.png",
              "src/favicon-32x32.png",
              "src/mstile-150x150.png"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/angular-calendar/css/angular-calendar.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/katex/dist/katex.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/tinymce/tinymce.min.js",
              "node_modules/waypoints/lib/noframework.waypoints.js",
              "node_modules/auth0-js/build/auth0.js"
            ]
          },
          "configurations": {
            "source": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.ts"
                }
              ]
            },
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
            },
            "vpn": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.vpn.ts"
                }
              ]
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "staging": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "spa:build",
            "host": "localhost",
            "port": 4200
          },
          "configurations": {
            "source": {
              "browserTarget": "spa:build:source"
            },
            "dev": {
              "browserTarget": "spa:build:dev"
            },
            "vpn": {
              "browserTarget": "spa:build:vpn",
              "host": "http://172.27.232.1"
            },
            "production": {
              "browserTarget": "spa:build:production"
            },
            "staging": {
              "browserTarget": "spa:build:staging"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "spa:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "scripts": [],
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/tinymce/plugins/link/plugin.js",
              "node_modules/tinymce/plugins/paste/plugin.js",
              "node_modules/tinymce/plugins/table/plugin.js",
              "node_modules/tinymce/plugins/table/image.js"
            ],
            "assets": [
              "src/assets",
              "src/.htaccess",
              "src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.json"
            ],
            "exclude": []
          }
        }
      }
    },
    "spa-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "spa:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "defaultProject": "spa",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}
hakkurishian commented 5 years ago

The problem was in my tsconfig.json a place where it said "include": [ where the space between include and the bracket was somehow an irregular space character. Removing it did the job. It would be helpful to see this in an error message, in case the message is thrown from within the ng tool.

angular-automatic-lock-bot[bot] commented 4 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.