Angular8 : ng run => 'Project target does not exist.' when using i18n - json

Question

Based on those tutorials :
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
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

Answer 1

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

Answer 2

I have solved it using below command:
ng add #ionic/cordova-builders
Source: ionic forum

Answer 3

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

Answer 4

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.

Answer 5

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"
}]
}
}
}