Angular8：使用 i18n 时 运行 => 'Project target does not exist.'
Angular8 : ng run => 'Project target does not exist.' when using i18n
基于这些教程：
https://angular-templates.io/tutorials/about/angular-internationalization-i18n-multi-language-appand https://medium.com/@ismaestro/angular-7-example-app-with-angularcli-angular-universal-i18n-official-firebase-66deac2dc31e
我正在尝试使用 i18n 作为国际化系统来构建和使用 Angular 8 应用程序。
但是，当我尝试 运行 npm build:ssr（参见下文）时，我得到 An unhandled exception occurred: Project target does not exist.
在这里，angular.json：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"boilerplate": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"en": {
"outputPath": "dist/browser/",
"baseHref": "/",
"i18nFile": "src/locale/messages.en.xlf",
"i18nFormat": "xlf",
"i18nLocale": "en",
"i18nMissingTranslation": "error",
"assets": [
{
"glob": "**/*",
"input": "src/assets/",
"output": "/assets/",
"ignore": [
"base/*",
"css/*",
"js/*"
]
},
{
"glob": "**/*",
"input": "src/assets/base",
"output": "/"
}
]
},
"fr": {
"outputPath": "dist/browser/",
"baseHref": "/fr/",
"i18nFile": "src/locale/messages.fr.xlf",
"i18nFormat": "xlf",
"i18nLocale": "fr",
"i18nMissingTranslation": "error",
"assets": [
{
"glob": "**/*",
"input": "src/assets/",
"output": "/assets/",
"ignore": [
"base/*",
"css/*",
"js/*"
]
},
{
"glob": "**/*",
"input": "src/assets/base",
"output": "/"
}
]
},
"production-en": {
"assets": [
{
"glob": "**/*",
"input": "src/assets/",
"output": "/assets/",
"ignore": [
"base/*",
"css/*",
"js/*"
]
},
{
"glob": "**/*",
"input": "src/assets/base",
"output": "/"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
],
"outputPath": "dist/browser/",
"baseHref": "/",
"i18nFile": "src/locale/messages.en.xlf",
"i18nFormat": "xlf",
"i18nLocale": "en",
"i18nMissingTranslation": "error"
},
"production-fr": {
"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,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
],
"outputPath": "dist/browser/fr/",
"baseHref": "/fr/",
"i18nFile": "src/locale/messages.fr.xlf",
"i18nFormat": "xlf",
"i18nLocale": "fr",
"i18nMissingTranslation": "error"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "boilerplate:build:production-en"
},
"configurations": {
"fr": {
"browserTarget": "boilerplate:build:production-fr"
},
"en": {
"browserTarget": "boilerplate:build:production-en"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "boilerplate:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.scss"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"boilerplate-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "boilerplate:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "boilerplate",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
和package.json的一部分：
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"lint": "ng lint boilerplate",
"build:prod:en": "ng build --configuration=production-en",
"build:prod:fr": "ng build --configuration=production-fr",
"build:server:prod:en": "ng run boilerplate:server:production-en",
"build:server:prod:fr": "ng run boilerplate:server:production-fr",
"build:library": "ng build ngx-example-library",
"build:client-and-server-bundles": "npm run build:prod:en && npm run build:prod:fr && npm run build:server:prod:en && npm run build:server:prod:fr",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server"
},
如前所述，我想成功地 运行 我的 Angular 应用程序使用 i18n。但是错误信息是：
[error] Error: Project target does not exist.
at WorkspaceNodeModulesArchitectHost.getBuilderNameForTarget (/Users/user$
at RunCommand.runSingleTarget (/Users/user/Desktop/Boilerplate/boilerpla$
at RunCommand.runArchitectTarget (/Users/user/Desktop/Boilerplate/boiler$
at RunCommand.run (/Users/user/Desktop/Boilerplate/boilerplate/node_modu$
at RunCommand.validateAndRun (/Users/user/Desktop/Boilerplate/boilerplat$
at process._tickCallback (internal/process/next_tick.js:43:7)
at Function.Module.runMain (internal/modules/cjs/loader.js:778:11)
at startup (internal/bootstrap/node.js:300:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:826:3)
如果有人遇到同样的问题并且可以解释我做错了什么？谢谢
我遇到了同样的问题，我的解决方法是添加 "server" 信息。
因为这一行
"build:client-and-server-bundles": "ng build --prod && ng run ngkol:server:production",
这是试图 运行 ng 运行 ngkol:server:production <<<
"projects": {
"ngkol": {
"projectType": "application",
"schematics": {},
"root": "src",
"sourceRoot": "src",
"prefix": "app",
"architect": {
//2019-08-23 here goes your other info
// build, serve,extract-i18n, options, lint, e2e,
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}]
}
}
}
这里是我的应用 运行ning https://www.supercolegas.com/soon
你可以试试这个：
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json" -------- Try to Replace tsconfig.server.json by tsconfig.app.json -------------
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}]
}
}
}
我找到了这个。问题是：
1) 您在 angular.json 文件中缺少 architect 配置。
2) 您的 browserTarget 有问题。目标必须指向项目，而不是 Angular.
1) 请将这些行添加到 angular.json file => project => {{your project name}} => achitect: (remember to replace"{{project name}}"` 到您的项目名称）
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/"{{project name}}"/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": ""{{project name}}":build",
"serverTarget": ""{{project name}}":server"
},
"configurations": {
"production": {
"browserTarget": ""{{project name}}":build:production",
"serverTarget": ""{{project name}}":server:production"
}
}
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"browserTarget": ""{{project name}}":build:production",
"serverTarget": ""{{project name}}":server:production",
"routes": [
"/"
]
},
"configurations": {
"production": {}
}
}
2) 确保你的 package.json 中有 @nguniversal/express-engine 和 @nguniversal/builders：
npm i @nguniversal/express-engine @nguniversal/builders -D
我收到此错误是因为我的项目名称与工作目录的名称略有不同。
正因为如此，当我按照这个答案的建议在 'project name' 中写的时候，我写的是我的项目目录的名称，而不是项目本身的名称。
项目名称可以在projects对象中的angular.json文件中确认。
我已经使用以下命令解决了它：
ng add @ionic/cordova-builders
来源：ionic forum
基于这些教程： https://angular-templates.io/tutorials/about/angular-internationalization-i18n-multi-language-appand https://medium.com/@ismaestro/angular-7-example-app-with-angularcli-angular-universal-i18n-official-firebase-66deac2dc31e 我正在尝试使用 i18n 作为国际化系统来构建和使用 Angular 8 应用程序。
但是，当我尝试 运行 npm build:ssr（参见下文）时，我得到 An unhandled exception occurred: Project target does not exist.
在这里，angular.json：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"boilerplate": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"en": {
"outputPath": "dist/browser/",
"baseHref": "/",
"i18nFile": "src/locale/messages.en.xlf",
"i18nFormat": "xlf",
"i18nLocale": "en",
"i18nMissingTranslation": "error",
"assets": [
{
"glob": "**/*",
"input": "src/assets/",
"output": "/assets/",
"ignore": [
"base/*",
"css/*",
"js/*"
]
},
{
"glob": "**/*",
"input": "src/assets/base",
"output": "/"
}
]
},
"fr": {
"outputPath": "dist/browser/",
"baseHref": "/fr/",
"i18nFile": "src/locale/messages.fr.xlf",
"i18nFormat": "xlf",
"i18nLocale": "fr",
"i18nMissingTranslation": "error",
"assets": [
{
"glob": "**/*",
"input": "src/assets/",
"output": "/assets/",
"ignore": [
"base/*",
"css/*",
"js/*"
]
},
{
"glob": "**/*",
"input": "src/assets/base",
"output": "/"
}
]
},
"production-en": {
"assets": [
{
"glob": "**/*",
"input": "src/assets/",
"output": "/assets/",
"ignore": [
"base/*",
"css/*",
"js/*"
]
},
{
"glob": "**/*",
"input": "src/assets/base",
"output": "/"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
],
"outputPath": "dist/browser/",
"baseHref": "/",
"i18nFile": "src/locale/messages.en.xlf",
"i18nFormat": "xlf",
"i18nLocale": "en",
"i18nMissingTranslation": "error"
},
"production-fr": {
"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,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
],
"outputPath": "dist/browser/fr/",
"baseHref": "/fr/",
"i18nFile": "src/locale/messages.fr.xlf",
"i18nFormat": "xlf",
"i18nLocale": "fr",
"i18nMissingTranslation": "error"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "boilerplate:build:production-en"
},
"configurations": {
"fr": {
"browserTarget": "boilerplate:build:production-fr"
},
"en": {
"browserTarget": "boilerplate:build:production-en"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "boilerplate:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.scss"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"boilerplate-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "boilerplate:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "boilerplate",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
和package.json的一部分：
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"lint": "ng lint boilerplate",
"build:prod:en": "ng build --configuration=production-en",
"build:prod:fr": "ng build --configuration=production-fr",
"build:server:prod:en": "ng run boilerplate:server:production-en",
"build:server:prod:fr": "ng run boilerplate:server:production-fr",
"build:library": "ng build ngx-example-library",
"build:client-and-server-bundles": "npm run build:prod:en && npm run build:prod:fr && npm run build:server:prod:en && npm run build:server:prod:fr",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server"
},
如前所述，我想成功地 运行 我的 Angular 应用程序使用 i18n。但是错误信息是：
[error] Error: Project target does not exist. at WorkspaceNodeModulesArchitectHost.getBuilderNameForTarget (/Users/user$ at RunCommand.runSingleTarget (/Users/user/Desktop/Boilerplate/boilerpla$ at RunCommand.runArchitectTarget (/Users/user/Desktop/Boilerplate/boiler$ at RunCommand.run (/Users/user/Desktop/Boilerplate/boilerplate/node_modu$ at RunCommand.validateAndRun (/Users/user/Desktop/Boilerplate/boilerplat$ at process._tickCallback (internal/process/next_tick.js:43:7) at Function.Module.runMain (internal/modules/cjs/loader.js:778:11) at startup (internal/bootstrap/node.js:300:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:826:3)
如果有人遇到同样的问题并且可以解释我做错了什么？谢谢
我遇到了同样的问题，我的解决方法是添加 "server" 信息。
因为这一行
"build:client-and-server-bundles": "ng build --prod && ng run ngkol:server:production",
这是试图 运行 ng 运行 ngkol:server:production <<<
"projects": {
"ngkol": {
"projectType": "application",
"schematics": {},
"root": "src",
"sourceRoot": "src",
"prefix": "app",
"architect": {
//2019-08-23 here goes your other info
// build, serve,extract-i18n, options, lint, e2e,
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}]
}
}
}
这里是我的应用 运行ning https://www.supercolegas.com/soon
你可以试试这个：
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json" -------- Try to Replace tsconfig.server.json by tsconfig.app.json -------------
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}]
}
}
}
我找到了这个。问题是：
1) 您在 angular.json 文件中缺少 architect 配置。
2) 您的 browserTarget 有问题。目标必须指向项目，而不是 Angular.
1) 请将这些行添加到 angular.json file => project => {{your project name}} => achitect: (remember to replace"{{project name}}"` 到您的项目名称）
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/"{{project name}}"/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": ""{{project name}}":build",
"serverTarget": ""{{project name}}":server"
},
"configurations": {
"production": {
"browserTarget": ""{{project name}}":build:production",
"serverTarget": ""{{project name}}":server:production"
}
}
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"browserTarget": ""{{project name}}":build:production",
"serverTarget": ""{{project name}}":server:production",
"routes": [
"/"
]
},
"configurations": {
"production": {}
}
}
2) 确保你的 package.json 中有 @nguniversal/express-engine 和 @nguniversal/builders：
npm i @nguniversal/express-engine @nguniversal/builders -D
我收到此错误是因为我的项目名称与工作目录的名称略有不同。 正因为如此，当我按照这个答案的建议在 'project name' 中写的时候，我写的是我的项目目录的名称，而不是项目本身的名称。
项目名称可以在projects对象中的angular.json文件中确认。
我已经使用以下命令解决了它：
ng add @ionic/cordova-builders
来源：ionic forum