Angular6 не работает локально после настройки рендеринга на стороне сервера
После успешной настройки рендеринга на стороне сервера в angular6 он строится и работает как SSR, затем приложение перестает работать как базовое приложение, в основном я хотел бы запустить свое приложение angular6 как npm run start, однако, когда я запустил эту команду, я получил это ошибка и, похоже, не связана с документацией.
Приложение создает и выполняет рендеринг на стороне сервера, но не как обычное приложение.
Это ошибка, которую я получаю:
ITWS08:A6-Test-3-SSR CC$ npm run start [email protected] start /eclipse/A6-Test-3-SSR ng serve
Could not determine a single project for the 'serve' target. Error: Could not determine a single project for the 'serve' target. at ServeCommand.getProjectNamesByTarget (/eclipse/A6-Test-3-SSR/node_modules/@angular/cli/models/architect-command.js:175:19) at MergeMapSubscriber._loadWorkspaceAndArchitect.pipe.operators_1.concatMap [as project] (/eclipse/A6-Test-3-SSR/node_modules/@angular/cli/models/architect-command.js:50:43) at MergeMapSubscriber._tryNext (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/operators/mergeMap.js:122:27) at MergeMapSubscriber._next (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/operators/mergeMap.js:112:18) at MergeMapSubscriber.Subscriber.next (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/Subscriber.js:103:18) at TapSubscriber._next (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/operators/tap.js:109:26) at TapSubscriber.Subscriber.next (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/Subscriber.js:103:18) at MergeMapSubscriber.notifyNext (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/operators/mergeMap.js:141:26) at InnerSubscriber._next (/eclipse/A6-Test-3-SSR/node_modules/rxjs/internal/InnerSubscriber.js:30:21) at InnerSubscriber.Subscriber.next (/eclipse/A6-Test-3->SSR/node_modules/rxjs/internal/Subscriber.js:103:18)
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start:
ng servenpm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in: npm ERR! /Users/CC/.npm/_logs/2018-05-29T13_46_21_934Z-debug.log ITWS08:A6-Test-3-SSR CC$
Эти ошибки не отображаются в сборке как рендеринг на стороне сервера.
Любые идеи?
Кажется проблема на angular-cli.json ??
Если я заменю angular-cli.json без конфигурации рендеринга на стороне сервера, приложение будет работать как обычно, но не сможет создать SSR.
{
"$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular.io-example": {
"root": "",
"projectType": "application",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
{
"glob": "favicon.ico",
"input": "src",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
],
"styles": [
{"input": "node_modules/font-awesome/css/font-awesome.css"},
{"input": "src/assets/css/flag-icon.css"},
{"input": "src/assets/css/bootstrap.css"},
{"input": "src/assets/css/xmas.css"},
{"input": "src/assets/css/styles.css"},
{"input": "src/assets/css/browser-specific.css"}
],
"scripts": [
{"input": "node_modules/hammerjs/hammer.js"}
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angular.io-example:build"
},
"configurations": {
"production": {
"browserTarget": "angular.io-example:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular.io-example:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
{
"input": "styles.css"
}
],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
}
}
изменение angular-cli.json на серверную конфигурацию, SSR-сборка идеальна и служит SSR-идеальной, но не работает нормально, я хотел бы знать, как заставить работать оба мира
{
"$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular.io-example": {
"root": "",
"projectType": "application",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
{
"glob": "favicon.ico",
"input": "src",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
],
"styles": [
{"input": "node_modules/font-awesome/css/font-awesome.css"},
{"input": "src/assets/css/flag-icon.css"},
{"input": "src/assets/css/bootstrap.css"},
{"input": "src/assets/css/xmas.css"},
{"input": "src/assets/css/styles.css"},
{"input": "src/assets/css/browser-specific.css"}
],
"scripts": [
{"input": "node_modules/hammerjs/hammer.js"}
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true
}
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular.server:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
{
"input": "styles.css"
}
],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
}
}
Ответы 2
У меня была такая же ошибка. Моя проблема заключалась в том, что название проекта приложения и название проекта библиотеки совпадали. Когда я изменил имя библиотеки, ошибка исчезла, и я также могу начать свой проект с ng serve.
angular.json:
"projects": {
"project-name": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "pn",
...
}
"project-name-lib": {
"root": "projects/project-name-lib",
"sourceRoot": "projects/project-name-lib/src",
"projectType": "library",
"prefix": "pn",
...
}
Сохраните конфигурации "serve" и "server" в вашем файле angular.json. Благодаря этому вы сможете запускать приложение локально, а также выполнять рендеринг на стороне сервера. Надеюсь, это решит вашу проблему.