Angular s-s-r 成功编译但在错误路径中查找字段
Posted
技术标签:
【中文标题】Angular s-s-r 成功编译但在错误路径中查找字段【英文标题】：Angular s-s-r successfully compiling but looking for fileds in thr wrong path 【发布时间】：2022-01-15 23:15:08 【问题描述】：我正在构建一个 Angular 应用程序，当我尝试使用 Angular s-s-r (https://angular.io/guide/universal) 在服务器端本地渲染它时。它成功编译并运行服务器端生成的文件，这就是我得到的消息：
Node Express server listening on http://localhost:4000
但是，当我尝试访问 CLI 提供的指定地址时，我收到此错误：
Error: Failed to lookup view "index" in views directory "projects/project-name/frontend/dist/server/dist/project-name/browser" at Function.render (Documents/projects/project-name/frontend/dist/server/main.js:139878:17)
我注意到一件事：它嵌套了项目文件夹。
我尝试按照一些教程进行操作，但我无法找到解决方案。我曾尝试多次更改我的angular.json 文件，但没有成功。
我知道你们不喜欢其他问题中的问题，但这可能是相关的：
我已经设置了一个多语言应用程序，它还生成一个嵌套路径：例如：dist/es/es 而不是 dist/es 我真的尝试到处寻找解决方案，但找不到任何可以解决我的问题的解决方案，所以我希望有人有更多的经验可以启发我。
据我了解，当我运行 npm run dev:s-s-r 时，它应该可以工作，但它没有，所以我希望并祈祷有人可以帮助我。
这是我的angular.json 文件
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects":
"porject-name":
"projectType": "application",
"schematics":
"@schematics/angular:application":
"strict": true
,
"root": "",
"sourceRoot": "src",
"prefix": "app",
"i18n":
"sourceLocale": "en-US",
"locales":
"pt": "src/locale/messages.pt.xlf",
"baseHref": ""
,
"architect":
"build":
"builder": "@angular-devkit/build-angular:browser",
"options":
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
,
"configurations":
"production":
"budgets": [
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
,
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
],
"fileReplacements": [
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
],
"baseHref": "./",
"outputHashing": "all"
,
"pt":
"aot": true,
"localize": ["pt"],
"outputPath": "dist/lang",
"baseHref": "../",
"i18nMissingTranslation": "error",
,
"development":
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
,
"defaultConfiguration": "production"
,
"serve":
"builder": "@angular-devkit/build-angular:dev-server",
"configurations":
"production":
"browserTarget": "project-name:build:production"
,
"pt":
"browserTarget":"project-name:build:pt"
,
"development":
"browserTarget": "project-name:build:development"
,
,
"defaultConfiguration": "development"
,
"extract-i18n":
"builder": "@angular-devkit/build-angular:extract-i18n",
"options":
"browserTarget": "project-name:build"
,
"test":
"builder": "@angular-devkit/build-angular:karma",
"options":
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
,
"server":
"builder": "@angular-devkit/build-angular:server",
"options":
"outputPath": "dist/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
,
"configurations":
"production":
"outputHashing": "media",
"fileReplacements": [
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
]
,
"pt":
"i18nMissingTranslation": "error"
,
"development":
"optimization": false,
"sourceMap": true,
"extractLicenses": false
,
"defaultConfiguration": "production"
,
"serve-s-s-r":
"builder": "@nguniversal/builders:s-s-r-dev-server",
"configurations":
"development":
"browserTarget": "project-name:build:development",
"serverTarget": "project-name:server:development"
,
"production":
"browserTarget": "project-name:build:production",
"serverTarget": "project-name:server:production"
,
"defaultConfiguration": "development"
,
"prerender":
"builder": "@nguniversal/builders:prerender",
"options":
"routes": [
"/"
]
,
"configurations":
"production":
"browserTarget": "project-name:build:production",
"serverTarget": "project-name:server:production"
,
"development":
"browserTarget": "project-name:build:development",
"serverTarget": "project-name:server:development"
,
"defaultConfiguration": "production"
,
"defaultProject": "project-name"
`
我尝试了不同的配置，但没有任何效果。
【问题讨论】：
【参考方案1】：在 server.ts 文件中，更改 dist 文件夹路径，同时生成构建
来自 const distFolder = join(process.cwd(), 'dist/project-name/browser'); // 本地运行
到 const distFolder = join(process.cwd(), '../browser'); // 用于构建
【讨论】：
以上是关于Angular s-s-r 成功编译但在错误路径中查找字段的主要内容，如果未能解决你的问题，请参考以下文章
ERROR 错误：未捕获（承诺中）：TypeError：i.BehaviorSubject 不是 Angular 10 s-s-r 中的构造函数
Angular Universal (s-s-r) 错误：无法在视图目录中查找视图“索引”