Неожиданный токен {синтаксическая ошибка

(Полный код ASP.Net Core + Angular Universal в https://github.com/jonasarcangel/ModuleIssue)

Я получаю следующую ошибку из моего предварительно обработанного SPA с использованием Angular Universal при использовании "dotnet run" и переходе по любому маршруту. Этого не происходит, когда я запускаю в папке ClientApp с помощью «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)

Вот что у меня есть для 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"
    ]
  }
}

Вот что у меня есть в 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"
  }
}

Мои версии Node и NPM:

Node 10.8.0 
NPM 6.3.0

Как узнать, что ошибка исходит от node_modules/apollo-angular/ApolloModule.js:1? Предоставьте дополнительную информацию, например stacktrace, вывод консоли, ...

AmazingTurtle 12.08.2018 00:21

Здравствуй. Я обновил его, чтобы включить полное исключение из dotnet.

Jonas Arcangel 12.08.2018 02:21

Можете ли вы показать ApolloModule.js?

vivek nuna 12.08.2018 02:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
4
1 608
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я клонировал ваш проект, и единственное изменение, которое я сделал, - я удалил Microsoft.AspNetCore.SpaServices.Extensions из ссылки.

и теперь он отлично работает.

Что-то еще должно было заставить его работать. Я все еще получаю сообщение об ошибке. Какие у вас версии node и npm? Мои: Node 10.8.0, NPM 6.3.0

Jonas Arcangel 12.08.2018 10:34

Узел: v8.11.1 и NPM: 5.6.0

Sajeetharan 12.08.2018 10:36

Я попытался понизить его, но по-прежнему получаю сообщение об ошибке, но на этот раз он сказал: «Неожиданный импорт токена», и все еще в той же строке.

Jonas Arcangel 12.08.2018 11:29

Я обновил его до вашей версии, и он работает, вы можете закрыть новую папку и попробовать

Sajeetharan 12.08.2018 12:04

Это говорит мне о том, что причина в другом. Версия ядра Dotnet? Моя 2.1.300.

Jonas Arcangel 12.08.2018 12:18

где вы получаете эту ошибку, можете ли вы предоставить шаги для воспроизведения?

Sajeetharan 12.08.2018 16:04

Я делаю «dotnet run», а затем просматриваю страницу в браузере.

Jonas Arcangel 12.08.2018 21:01

То же самое и здесь

Sajeetharan 13.08.2018 03:13

ха-ха, нет, я имел в виду, что выполнил ту же команду и проверил в браузере

Sajeetharan 13.08.2018 06:22

Какая у вас версия ядра dotnet?

Jonas Arcangel 13.08.2018 06:23

Вы используете деструктуризацию при импорте здесь: import { NgModule } from '@angular/core'

Деструктуризация - это функция, указанная в ecma 6 (см. спецификацию). Попробуйте настроить target на es6 в tsconfig.json.

Просто попробовал сейчас. Я все еще получаю ту же ошибку.

Jonas Arcangel 12.08.2018 15:11
Ответ принят как подходящий

Когда вы создаете пакет ssr, он не переносит модули из node_modules, поэтому apollo-angular не будет перенесен.

Вот решение, просто добавьте одну строку в свой 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
      },
...

затем запустите npm run build:ssr, и вы обнаружите, что размер ClientApp/dist/server/main.js очень велик.

Но вроде есть проблемы со стилем ?

ng-ssr

Это сработало. Спасибо. С макетом я займусь позже. Ваш ответ решил проблему.

Jonas Arcangel 14.08.2018 13:26

Другие вопросы по теме