When i try to build my app-shell i get this error:
✖ Application shell generation failed. Could not find server output directory: /Users/user/WebstormProjects/app-test/dist/server.
I also tried to re-generate the app-shell with npx ng g app-shell and everything it's updated.
When i edit optimization: false for the production build, it works.
This are the files in my directory:
├── app
│ ├── app-routing.module.ts
│ ├── app.component.scss
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── app.server.module.ts
├── index.html
├── main.server.ts
├── main.ts
This is my angular.json file:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app-test": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss",
"skipImport": false,
"export": true,
"inlineTemplate": true
},
"@schematics/angular:directive": {
"export": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"indexTransform": "./index-html-transform.js",
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/assets",
"src/robots.txt",
"src/manifest.webmanifest",
"src/preloaded.js"
],
"inlineStyleLanguage": "scss",
"stylePreprocessorOptions": {
"includePaths": []
},
"styles": ["src/styles.scss", "src/assets/design-system/main.scss"],
"scripts": ["src/global.js"],
"customWebpackConfig": {
"path": "webpack.config.js"
}
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.production.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "700kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
},
"cordova-production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.cordova.production.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
],
"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"
},
"test": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.test.ts"
}
],
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
},
"demo": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.demo.ts"
}
],
"optimization": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "app-test:build"
},
"configurations": {
"production": {
"browserTarget": "app-test:build:production"
},
"test": {
"browserTarget": "app-test:build:test"
},
"demo": {
"browserTarget": "app-test:build:demo"
}
},
"defaultConfiguration": "test"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app-test:build"
}
},
"test": {
"builder": "@angular-builders/custom-webpack:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets",
"src/manifest.webmanifest"
],
"stylePreprocessorOptions": {
"includePaths": []
},
"styles": ["src/styles.scss", "src/assets/design-system/main.scss"],
"scripts": ["src/global.js"],
"customWebpackConfig": {
"path": "webpack.config.js"
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
},
"e2e": {
"builder": "@cypress/schematic:cypress",
"options": {
"devServerTarget": "app-test:serve",
"watch": true,
"headless": false
},
"configurations": {
"production": {
"devServerTarget": "app-test:serve:production"
}
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "src/main.server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.production.ts"
}
],
"sourceMap": false,
"optimization": true
},
"demo": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.demo.ts"
}
]
}
},
"defaultConfiguration": "production"
},
"app-shell": {
"builder": "@angular-devkit/build-angular:app-shell",
"options": {
"route": "shell"
},
"configurations": {
"production": {
"browserTarget": "app-test:build:production",
"serverTarget": "app-test:server:production"
},
"demo": {
"browserTarget": "app-test:build:demo",
"serverTarget": "app-test:server:demo"
}
},
"defaultConfiguration": "production"
},
"cypress-run": {
"builder": "@cypress/schematic:cypress",
"options": {
"devServerTarget": "app-test:serve"
},
"configurations": {
"production": {
"devServerTarget": "app-test:serve:production"
}
}
},
"cypress-open": {
"builder": "@cypress/schematic:cypress",
"options": {
"watch": true,
"headless": false
}
}
}
}
},
"defaultProject": "app-test"
}
This is my tsconfig.json:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@app/*": ["src/app/*"],
"@shared/*": ["src/app/shared/*"],
"@env/*": ["src/environments/*"],
"*": ["node_modules/*"]
},
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"strict": true,
"experimentalDecorators": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"forceConsistentCasingInFileNames": true,
"suppressImplicitAnyIndexErrors": true,
"module": "es2020",
"target": "es2020",
"moduleResolution": "node",
"importHelpers": true,
"typeRoots": ["node_modules/@types"],
"lib": ["es2020", "dom"]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableI18nLegacyMessageIdFormat": false,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
I tried to remove everything app-shell generated updated ti angular to 14.0.2 and generated app-shell again, but when i build the app-shell for production it give me that error.
CodePudding user response：
I created a replication code for your case here.
I figure out that you changed the outputPath to dist from the original path dist/app-name/browser.
This cause the error when you try to build the app-shell for production with the app bundle.
I also opened a report to angular team here.
You can solve it using the default path for builder outputPath: dist/app-name/browser and server dist/app-name/server and the build will succeed.