3

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

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
phenric
  • 307
  • 1
  • 8
  • 15

5 Answers5

11

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.

enter image description here

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

Hiep Tran
  • 3,735
  • 1
  • 21
  • 29
  • I changed the file , and still have the error any other suggestion ? or you just copy and paste the solution? from a forum – fsalazar_sch Oct 19 '22 at 18:52
3

I have solved it using below command:

ng add @ionic/cordova-builders

Source: ionic forum

Prashant
  • 139
  • 1
  • 4
1

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

Brian Sanchez
  • 832
  • 1
  • 13
  • 11
0

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"
            }]
        }
    }
}
Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
Paris Benamour
  • 327
  • 2
  • 3
0

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.

SauerTrout
  • 471
  • 1
  • 8
  • 13