(完整的 ASP.Net Core + Angular 通用代码位于 https://github.com/jonasarcangel/ModuleIssue )
在使用“dotnet run”并导航到任何路线时，我使用 Angular Universal 从我的预呈现 SPA 中收到以下错误。当我使用“npm run build:ssr && 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: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"
}
}
我的节点和 NPM 版本:
Node 10.8.0
NPM 6.3.0
最佳答案
当您构建 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的大小非常大。
不过好像风格有点问题 🤔
关于javascript - 意外的标记 { 语法错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51774716/