意外的令牌{语法错误

Question

(Complete ASP.Net Core + Angular Universal code at https://github.com/jonasarcangel/ModuleIssue )

I'm getting the following error from my prerendered SPA using Angular Universal when using "dotnet run" and navigating to any route. It does not happen when I run in ClientApp folder using "npm run build:ssr && npm run start".

Request starting HTTP/1.1 GET https://localhost:5001/account/login  
fail: Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[1]
An unhandled exception has occurred while executing the request.
    Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: Prerendering failed because of error: /Workspace/ModuleIssue/ClientApp/node_modules/apollo-angular/ApolloModule.js:1
    (function (exports, require, module, __filename, __dirname) { import { NgModule } from '@angular/core';
                                                                         ^
SyntaxError: Unexpected token {
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
Current directory is: /Workspace/ModuleIssue

   at Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.InvokeExportAsync[T](NodeInvocationInfo invocationInfo, CancellationToken cancellationToken)
   at Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance.InvokeExportAsync[T](CancellationToken cancellationToken, String moduleName, String exportNameOrNull, Object[] args)
   at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.InvokeExportWithPossibleRetryAsync[T](String moduleName, String exportedFunctionName, Object[] args, Boolean allowRetry, CancellationToken cancellationToken)
   at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.InvokeExportWithPossibleRetryAsync[T](String moduleName, String exportedFunctionName, Object[] args, Boolean allowRetry, CancellationToken cancellationToken)
   at Microsoft.AspNetCore.Builder.SpaPrerenderingExtensions.<>c__DisplayClass0_0.<<UseSpaPrerendering>b__1>d.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext httpContext)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

This is what I have for tsconfig.json:

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

This is what I have in package.json:

{
  "name": "ModuleIssue",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server",
    "build:client-and-server-bundles": "ng build --prod && ng run ModuleIssue:server",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "ssr": "npm run build:universal && npm run generate:prerender && npm run server",
    "ssr:debug": "ng build --aot=true --output-hashing=all --named-chunks=false --build-optimizer=true  && ng run ModuleIssue:server:dev && webpack && node server.js",
    "ssr:cw": "ng build --aot=true --output-hashing=all --named-chunks=false --build-optimizer=true --watch",
    "ssr:sw": "ng run MyProject:server:dev --watch",
    "ssr:webpack": "webpack --watch",
    "ssr:server": "nodemon server.js",
    "build:server": "ng run ModuleIssue:server:production",
    "build:prod": "ng build --prod",
    "build:universal": "ng build --prod && ng run ModuleIssue:server:production && webpack --config webpack.server.config.js --progress --colors",
    "server": "node server.js",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:prerender": "npm run build:universal && npm run generate:prerender",
    "generate:prerender": "node prerender.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/platform-server": "^6.0.0",
    "@angular/router": "^6.0.0",
    "@ng-bootstrap/ng-bootstrap": "^2.2.2",
    "@nguniversal/express-engine": "^6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "apollo-angular": "^1.1.2",
    "apollo-angular-link-http": "^1.1.1",
    "apollo-cache-inmemory": "^1.2.7",
    "apollo-client": "^2.3.8",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.0.0",
    "core-js": "^2.4.1",
    "graphql": "^0.11.0",
    "graphql-tag": "^2.9.2",
    "primeicons": "^1.0.0-beta.10",
    "primeng": "^6.1.0",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.0.0-rc.0",
    "ts-loader": "^4.4.2",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.6.0",
    "@angular/cli": "^6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~8.0.30",
    "codelyzer": "^4.0.2",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.9.2",
    "uglifyjs-webpack-plugin": "^1.2.7"
  }
}

My Node and NPM versions:

Node 10.8.0 
NPM 6.3.0

Answer 1

You're using destructuring in your import here: import { NgModule } from '@angular/core'

Destructuring is a feature specified in ecma 6 ( see specification ). Try setting your target to es6 in your tsconfig.json

Answer 2

When you building ssr bundle, it doesn't transpile modules from node_modules, so apollo-angular will not be transpiled.

Here is a solution, just add one line to your angular.json :

"server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json",
        "bundleDependencies": "all" // add this line
      },
...

then run npm run build:ssr , and you will find that the size of ClientApp/dist/server/main.js is very large.

But it seems that there is some problems with style 🤔

Answer 3

I cloned your project and the only change i did was , i removed Microsoft.AspNetCore.SpaServices.Extensions from the reference.

and it works fine now.