意外的令牌 语法错误
Posted
技术标签:
【中文标题】意外的令牌 语法错误【英文标题】：Unexpected token syntax error意外的令牌 语法错误 【发布时间】：2019-01-17 08:57:39 【问题描述】：（完整的 ASP.Net Core + Angular Universal 代码https://github.com/jonasarcangel/ModuleIssue）
在使用“dotnet run”并导航到任何路线时，我使用 Angular Universal 从我的预渲染 SPA 中收到以下错误。当我使用“npm run build:s-s-r && npm run start”在 ClientApp 文件夹中运行时，它不会发生。
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:s-s-r": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:s-s-r": "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",
"s-s-r": "npm run build:universal && npm run generate:prerender && npm run server",
"s-s-r:debug": "ng build --aot=true --output-hashing=all --named-chunks=false --build-optimizer=true && ng run ModuleIssue:server:dev && webpack && node server.js",
"s-s-r:cw": "ng build --aot=true --output-hashing=all --named-chunks=false --build-optimizer=true --watch",
"s-s-r:sw": "ng run MyProject:server:dev --watch",
"s-s-r:webpack": "webpack --watch",
"s-s-r: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？请提供其他信息，例如堆栈跟踪，控制台输出，...
嗨。我更新了它以包含来自 dotnet 的完整例外。
你能展示一下 ApolloModule.js 吗？
github.com/jonasarcangel/ModuleIssue/blob/master/apollo-angular/…
【参考方案1】：
我克隆了您的项目，我所做的唯一更改是，我从参考中删除了 Microsoft.AspNetCore.SpaServices.Extensions。
现在可以正常使用了。
【讨论】：
一定有其他东西使它起作用。我仍然收到错误消息。你的 node 和 npm 版本是什么？我的是：节点 10.8.0，NPM 6.3.0 节点：v8.11.1 和 NPM：5.6.0 我尝试降级它，我仍然得到一个错误，但这次它说“意外的令牌导入”，并且仍然在同一行。 我把它升级到你的版本，它可以工作了，你能关闭新文件夹试试 这告诉我，原因是其他的。 dotnet核心版本？我的是 2.1.300。【参考方案2】：您在此处的导入中使用解构：import NgModule from '@angular/core'
解构是 ecma 6 (see specification) 中指定的功能。尝试在tsconfig.json 中将target 设置为es6
【讨论】：
刚刚试了一下。我仍然遇到同样的错误。【参考方案3】：当你构建 s-s-r bundle 时，它不会从 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:s-s-r，你会发现ClientApp/dist/server/main.js的尺寸很大。
不过好像风格有些问题?
【讨论】：
成功了。谢谢。稍后我将处理布局问题。您的回答解决了问题。以上是关于意外的令牌 语法错误的主要内容，如果未能解决你的问题，请参考以下文章