Angular code not connecting to my spring backend properly

Question

I was trying to update my Jhipster 4.0 project (which used Angular 4) to Jhipster 6.0 (which used Angular 9). There was such a difference in the angular version and typescript version, that I instead did just created a Jhipster 6.0 project, and then I replaced all of the following files in this Jhipster 6.0 project. These files were replaced with the files from the Jhipster 4.0 project, so I could get the front-end working again - src/main/webapp - src/test - package.json - webpack - tsconfig.json

In essence this makes it use angular 4 again ... makes it use the old typescript ... and lets it have all of the old front-end code. I can bring the application app just fine (using ./mvnvw and npm start) ... but then I notice that when I go to my frontend (http://localhost:9001/#/dash) , it tries to connect to the java backend at localhost:9001/api/apps, which gives an error of -> Error occurred while trying to proxy to: localhost:9061/api/apps

However when I started the app with mvnw... it starts up the backend on http://localhost:8080/api/apps. So how can I get this to stop talking to localhost:9001/api/apps and instead talk to http://localhost:8080/api/apps.

I'm running my backend with ./mvnw ... and then I start up the front-end with npm start

And here is my webpack.dev.js:

const webpack = require('webpack');
const writeFilePlugin = require('write-file-webpack-plugin');
const webpackMerge = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');

const utils = require('./utils.js');
const commonConfig = require('./webpack.common.js');

const ENV = 'development';

module.exports = webpackMerge(commonConfig({env: ENV}), {
    devtool: 'eval-source-map',
    devServer: {
        contentBase: './target/www',
        proxy: [{
            context: [
                /* jhipster-needle-add-entity-to-webpack - JHipster will add entity api paths here */
                '/api',
                '/management',
                '/swagger-resources',
                '/v2/api-docs',
                '/h2-console',
                '/auth'
            ],
            target: 'http://127.0.0.1:8081',
            secure: false
        }],
        watchOptions: {
            ignored: /node_modules/
        }
    },
    entry: {
        polyfills: './src/main/webapp/app/polyfills',
        global: './src/main/webapp/content/css/global.css',
        main: './src/main/webapp/app/app.main'
    },
    output: {
        path: utils.root('target/www'),
        filename: 'app/[name].bundle.js',
        chunkFilename: 'app/[id].chunk.js'
    },
    module: {
        rules: [{
            test: /\.ts$/,
            enforce: 'pre',
            loaders: 'tslint-loader',
            exclude: ['node_modules', new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
        },
            {
                test: /\.ts$/,
                loaders: [
                    'angular2-template-loader',
                    'awesome-typescript-loader'
                ],
                exclude: ['node_modules/generator-jhipster']
            },
            {
                test: /\.css$/,
                loaders: ['to-string-loader', 'css-loader'],
                exclude: /(vendor\.css|global\.css)/
            },
            {
                test: /(vendor\.css|global\.css)/,
                loaders: ['style-loader', 'css-loader']
            }]
    },
    plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 9001,
            proxy: {
                target: 'http://localhost:9061' // TODO - original
                // target: 'http://localhost:8080' // TODO - original
            }
        }, {
            reload: false
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.NamedModulesPlugin(),
        new writeFilePlugin(),
        new webpack.WatchIgnorePlugin([
            utils.root('src/test'),
        ]),
        new WebpackNotifierPlugin({
            title: 'JHipster',
            contentImage: path.join(__dirname, 'logo-jhipster.png')
        })
    ]
});

do u have proxy configuration file in angular project? what is the command you are using to start angular development server? — Plochie
@Plochie I'm running my backend with ./mvnw ... and then I start up the front-end with npm start — Mike K.

Plochie Plochie · Accepted Answer · 2020-04-24T15:25:31

By default if you made any http request from angular dev server with just URL (e.g. /api/someapi) then it will get routed to angular dev server only.

You can use proxy configuration while running the angular dev server to route the data to desired target.

Create proxy.conf.json in your project root directory.

{
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

Then start the angular dev server by running ng serve --proxy-config proxy.conf.json

Angular code not connecting to my spring backend properly

1 Answers