1. Anuncie Aqui ! Entre em contato fdantas@4each.com.br
Anuncie aqui Patrocinador Anuncios

The "publicHost" option will not be used because it is not supported by the...

Discussão em 'Angular' iniciado por user1624859, Outubro 3, 2024 às 10:22.

  1. user1624859

    user1624859 Guest

    I have an angular app which works on angular 13, i am trying to upgrade to angular 18 and facing issues with public host. I need a custom url to launch the angular app which fetches data from a java application hosted on tomcat.

    I use following command to launch in angular 13

    **npm run start-d**


    package.json

    {
    "name": "dashboard",
    "version": "0.0.0",
    "scripts": {
    "ng": "ng",
    "start-d": "ng serve --host 0.0.0.0 --public-host dw.localhost.s.org:4200 a",


    angular.json

    {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "d": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {
    "@schematics/angular:component": {
    "inlineStyle": true,
    "style": "scss"
    }
    },
    "architect": {
    "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
    "outputPath": "dist",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.app.json",
    "assets": [],
    "styles": [
    "node_modules/primeicons/primeicons.css",
    "node_modules/primeng/resources/themes/fluent-light/theme.css",
    "node_modules/primeng/resources/primeng.min.css",
    "node_modules/bootstrap/dist/css/bootstrap.css",
    "node_modules/@fortawesome/fontawesome-free/css/all.css",
    {
    "input": "./src/sass/static/css/styles.scss",
    "bundleName": "a_styles",
    "inject": true
    }

    ],
    "scripts": [],
    "vendorChunk": true,
    "extractLicenses": false,
    "buildOptimizer": false,
    "sourceMap": true,
    "optimization": false,
    "namedChunks": true
    },
    "configurations": {
    "production": {
    "budgets": [
    {
    "type": "anyComponentStyle",
    "maximumWarning": "6kb"
    }
    ],
    "fileReplacements": [
    {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
    }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "namedChunks": false,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true
    },
    "development": {}
    },
    "defaultConfiguration": "production"
    },
    "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
    "proxyConfig": "proxy.conf.json"
    },
    "configurations": {
    "production": {
    "browserTarget": "a:build:production"
    },
    "development": {
    "browserTarget": "a:build:development"
    }
    },
    "defaultConfiguration": "development"
    },
    "extract-i18n": {
    "builder": "@angular-devkit/build-angular:extract-i18n",
    "options": {
    "browserTarget": "a:build"
    }
    },
    "test": {
    "builder": "@angular-devkit/build-angular:karma",
    "options": {
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.spec.json",
    "karmaConfig": "src/karma.conf.js",
    "styles": ["src/styles.scss"],
    "scripts": [],
    "assets": ["src/favicon.ico", "src/assets"]
    }
    }
    }
    },


    proxy.config.json

    {
    "/a": {
    "target": "http://localhost:9080",
    "secure": false
    }
    }


    All the above code works in angular 13 version

    but once I upgrade to angular 18, my api calls are failing with error

    HttpErrorResponse
    error
    :
    {error: SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON at JSON.parse (<anonymous>…, text: '<!doctype html>\r\n<html lang="en">\r\n<head>\n <scrip…ain.js" type="module">\x3C/script></body>\r\n</html>\r\n'}
    headers
    :
    _HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
    message
    :
    **"Http failure during parsing for http://localhost:4200/a/Action/P"**
    name
    :
    "HttpErrorResponse"
    ok
    :
    false
    status
    :
    200
    statusText
    :
    "OK"
    url
    :
    "http://localhost:4200/a/Action/P"
    [[Prototype]]
    :
    HttpResponseBase


    angular 18 package.json

    {
    "name": "w-test",
    "version": "0.0.0",
    "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start-d": "ng serve --disable-host-check --port 4200 --public-host=dw.localhost.s.org:4200 a --host=0.0.0.0 ",


    angular 18 angular.json

    {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
    "w-test": {
    "projectType": "application",
    "schematics": {
    "@schematics/angular:component": {
    "style": "scss"
    }
    },
    "root": "",
    "sourceRoot": "src",
    "prefix": "app",
    "architect": {
    "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
    "outputPath": "dist/w-test",
    "index": "src/index.html",
    "browser": "src/main.ts",
    "polyfills": [
    "zone.js"
    ],
    "tsConfig": "tsconfig.app.json",
    "inlineStyleLanguage": "scss",
    "assets": [
    {
    "glob": "**/*",
    "input": "public"
    }
    ],
    "styles": [
    "src/styles.scss"
    ],
    "scripts": []
    },
    "configurations": {
    "production": {
    "budgets": [
    {
    "type": "initial",
    "maximumWarning": "500kB",
    "maximumError": "1MB"
    },
    {
    "type": "anyComponentStyle",
    "maximumWarning": "2kB",
    "maximumError": "4kB"
    }
    ],
    "outputHashing": "all"
    },
    "development": {
    "optimization": false,
    "extractLicenses": false,
    "sourceMap": true
    }
    },
    "defaultConfiguration": "production"
    },
    "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
    "options": {
    "proxyConfig": "proxy.conf.json"
    },
    "production": {
    "buildTarget": "w-test:build:production"
    },
    "development": {
    "buildTarget": "w-test:build:development"
    }
    },
    "defaultConfiguration": "development"
    },
    "extract-i18n": {
    "builder": "@angular-devkit/build-angular:extract-i18n"
    },
    "test": {
    "builder": "@angular-devkit/build-angular:karma",
    "options": {
    "polyfills": [
    "zone.js",
    "zone.js/testing"
    ],
    "tsConfig": "tsconfig.spec.json",
    "inlineStyleLanguage": "scss",
    "assets": [
    {
    "glob": "**/*",
    "input": "public"
    }
    ],
    "styles": [
    "src/styles.scss"
    ],
    "scripts": []
    }
    }
    }
    },


    angular 18 proxy.config.json

    {
    "/a/**": {
    "target": "http://dw.localhost:9080",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
    "^/a": ""
    }
    }
    }


    I tried everything but unable to figure out what has changes in angular 18 build system and what do i need to do to make it work.

    any help will be highly appreciated.

    Continue reading...
    user1624859, Outubro 3, 2024 às 10:22
    #1

Compartilhe esta Página