Angular8: ng run => '项目目标不存在。' 使用 i18n 时
[英]Angular8 : ng run => 'Project target does not exist.' when using i18n
问题描述
Based on those tutorials: https://angular-templates.io/tutorials/about/angular-internationalization-i18n-multi-language-app and https://medium.com/@ismaestro/angular-7-example-app-with-angularcli-angular-universal-i18n-official-firebase-66deac2dc31e I'm trying to build and use an Angular 8 app using i18n as internationalisation system.
基于这些教程： https://angular-templates.io/tutorials/about/angular-internationalization-i18n-multi-language-app和https://medium.com/@ismaestro/angular-7-example-app- with-angularcli-angular-universal-i18n-official-firebase-66deac2dc31e我正在尝试使用 i18n 作为国际化系统来构建和使用 Angular 8 应用程序。
However, when I try to run npm build:ssr (cfr. below), I get An unhandled exception occurred: Project target does not exist.但是，当我尝试运行npm build:ssr （参见下文）时， An unhandled exception occurred: Project target does not exist.
Here, the angular.json:在这里，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"
}
}
}
and a part of the package.json:和 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"
},
As previously explain, I would like to successfully run my Angular application with i18n.如前所述，我想使用 i18n 成功运行我的 Angular 应用程序。 But the error message is:但错误信息是：
[error] Error: Project target does not exist.
If someone already had the same issue and could explain me what I'm doing wrong?如果有人已经遇到同样的问题并且可以解释我做错了什么？ Thx谢谢
5 个解决方案
解决方案1
8 已采纳 2020-04-02 02:40:10
I found this.我找到了这个。 The problem is:问题是：
1) you are missing architect config in angular.json file. 1）您在angular.json文件中缺少architect配置。
2) There is a problem at your browserTarget . 2) 您的browserTarget存在问题。 The target must point to the project, not to Angular.目标必须指向项目，而不是 Angular。
1) Please add these line to angular.json file => project => {{your project name}} => achitect: (remember to replace "{{project name}}"` to your project name) 1) 请将这些行添加到angular.json file => project => {{your project name}} => achitect: (remember to replace "{{project name}}"` angular.json file => project => {{your project name}} => achitect: (remember to replace为你的项目名称)
"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) Make sure you have @nguniversal/express-engine and @nguniversal/builders in your package.json : npm i @nguniversal/express-engine @nguniversal/builders -D 2) 确保你的package.json有@nguniversal/express-engine和@nguniversal/builders ： npm i @nguniversal/express-engine @nguniversal/builders -D
解决方案2
3 2022-03-12 14:59:45
I have solved it using below command:我已经使用以下命令解决了它：
ng add @ionic/cordova-builders
Source: ionic forum来源： 离子论坛
解决方案3
1 2019-08-23 14:27:32
I had the same problem and my fix was to add the "server" information.我遇到了同样的问题，我的解决方法是添加“服务器”信息。
because this line因为这条线
"build:client-and-server-bundles": "ng build --prod && ng run ngkol:server:production", "build:client-and-server-bundles": "ng build --prod && ng run ngkol:server:production",
this is trying to run ng run ngkol:server:production <<<这是试图运行 ng run 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"
}]
}
}
}
here my app running https://www.supercolegas.com/soon这里我的应用程序运行https://www.supercolegas.com/soon
解决方案4
0 2019-10-30 11:04:15
you can try this:你可以试试这个：
"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" }] } } } "server": { "builder": "@angular-devkit/build-angular:server", "options": { "outputPath": "dist/server", "main": "src/main.server.ts" , "tsConfig": "src/tsconfig.server.json" -------- 尝试用 tsconfig.app.json 替换 tsconfig.server.json ------------- } , "configurations": { "production": { "fileReplacements": [{ "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" }] } } }
解决方案5
0 2021-02-13 04:33:39
I got this error because my project name was slightly different from the name of my working directory.我收到此错误是因为我的项目名称与我的工作目录名称略有不同。 Because of this, when I wrote in the 'project name' as this answer advised, I was writing in the name of my project's directory and not the name of the project itself.因此，当我按照这个答案的建议写下“项目名称”时，我写的是我的项目目录的名称，而不是项目本身的名称。
The name of the project can be confirmed in the angular.json file in the projects object.项目名称可以在projects对象中的angular.json文件中确认。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.