Angular код не подключается к моей пружине

Question

Я пытался обновить свой проект Jhipster 4.0 (который использовал Angular 4) до Jhipster 6.0 (который использовал Angular 9). В версии angular и версии машинописного текста было такое различие, что вместо этого я просто создал проект Jhipster 6.0, а затем заменил все следующие файлы в этом проекте Jhipster 6.0. Эти файлы были заменены файлами из проекта Jhipster 4.0, поэтому я смог снова запустить интерфейс - src / main / webapp - src / test - package. json - webpack - tsconfig. json

По сути, это заставляет его снова использовать angular 4 ... заставляет использовать старый машинопись ... и позволяет ему иметь весь старый интерфейсный код. Я могу просто привести приложение к приложению (используя ./mvnvw и npm start) ... но затем я замечаю, что когда я go на своем интерфейсе (http://localhost: 9001 / # / da sh), он пытается подключиться к бэкэнду java по адресу localhost: 9001 / api / apps, что выдает ошибку -> Error occurred while trying to proxy to: localhost:9061/api/apps

Однако, когда я запустил приложение с помощью mvnw. .. запускается бэкэнд на http://localhost:8080/api/apps. Так как я могу заставить это перестать говорить с localhost:9001/api/apps и вместо этого поговорить с http://localhost:8080/api/apps.

Я запускаю свой бэкэнд с ./mvnw ... и затем я запускаю интерфейс с npm start

А вот мой 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')
        })
    ]
});

Answer 1

По умолчанию, если вы сделали запрос http с сервера angular dev только с URL (например, /api/someapi), он будет перенаправлен только на сервер angular dev.

Вы можете использовать настройка прокси при запуске сервера angular dev для направления данных к нужной цели.

Создайте proxy.conf.json в каталоге вашего проекта root.

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

Затем запустите angular Dev-сервер, запустив ng serve --proxy-config proxy.conf.json