Angular8 : ng run => 'Project target does not exist.' when using i18n
Question
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.
However, when I try to run npm build:ssr (cfr. below), I get An unhandled exception occurred: Project target does not exist.
Here, the 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:
"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. But the error message is:
[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)
If someone already had the same issue and could explain me what I'm doing wrong? Thx
5 answers
solution1
8 ACCPTED 2020-04-02 02:40:10
I found this. The problem is:
1) you are missing architect config in angular.json file.
2) There is a problem at your browserTarget . The target must point to the project, not to Angular.
1) Please add these line to angular.json file => project => {{your project name}} => achitect: (remember to replace "{{project name}}"` to your 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) Make sure you have @nguniversal/express-engine and @nguniversal/builders in your package.json : npm i @nguniversal/express-engine @nguniversal/builders -D
solution2
3 2022-03-12 14:59:45
solution3
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",
this is trying to run 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
solution4
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" }] } } }
solution5
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.