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-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
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