質問編集履歴
1
修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Angular→Express
|
|
1
|
+
Angular→Expressをnpm start一発で起動したい
|
test
CHANGED
|
@@ -1,46 +1,22 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
|
|
3
|
-
Angular→Express
|
|
3
|
+
Angular→Expressを一発で起動したいです
|
|
4
4
|
|
|
5
5
|
### 前提
|
|
6
6
|
|
|
7
7
|
AngularCLIを使ってExpressへ接続するためのプロキシ設定をしていますが、
|
|
8
|
-
|
|
8
|
+
npm start で両方を起動することができません
|
|
9
9
|
|
|
10
10
|
ご存じの方に教えていただきたいです。
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
ファイル構成は添付画像のようになっていて、
|
|
13
|
+
1つのアプリケーションに、フロントエンドのコードと
|
|
14
|
+
バックエンド用のコード(/server)が入っています。
|
|
13
15
|
|
|
14
|
-
```
|
|
15
|
-
[
|
|
16
|
+
|
|
16
|
-
```
|
|
17
17
|
|
|
18
|
-
### 試したこと
|
|
19
|
-
|
|
20
|
-
```
|
|
21
|
-
ng new my-angular
|
|
22
|
-
npm install express
|
|
23
|
-
npm install -g express-generator
|
|
24
|
-
npm install npm-run-all
|
|
25
|
-
express server
|
|
26
|
-
npm install
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
プロキシ設定
|
|
33
|
-
|
|
34
|
-
```proxy.conf.json
|
|
35
|
-
{
|
|
36
|
-
|
|
18
|
+
現状は別窓で/serverを開いてnode app.js
|
|
37
|
-
"target": "http://localhost:3000",
|
|
38
|
-
"pathRewrite": { "^/api": "/" },
|
|
39
|
-
|
|
19
|
+
としてサーバを立てています
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
```
|
|
44
20
|
|
|
45
21
|
|
|
46
22
|
```package.json
|
|
@@ -87,98 +63,3 @@
|
|
|
87
63
|
|
|
88
64
|
```
|
|
89
65
|
|
|
90
|
-
※↓デフォルトのままです
|
|
91
|
-
```app.js
|
|
92
|
-
var createError = require('http-errors');
|
|
93
|
-
var express = require('express');
|
|
94
|
-
var path = require('path');
|
|
95
|
-
var cookieParser = require('cookie-parser');
|
|
96
|
-
var logger = require('morgan');
|
|
97
|
-
|
|
98
|
-
var indexRouter = require('./routes/index');
|
|
99
|
-
var usersRouter = require('./routes/users');
|
|
100
|
-
|
|
101
|
-
var app = express();
|
|
102
|
-
|
|
103
|
-
// view engine setup
|
|
104
|
-
app.set('views', path.join(__dirname, 'views'));
|
|
105
|
-
app.set('view engine', 'jade');
|
|
106
|
-
|
|
107
|
-
app.use(logger('dev'));
|
|
108
|
-
app.use(express.json());
|
|
109
|
-
app.use(express.urlencoded({ extended: false }));
|
|
110
|
-
app.use(cookieParser());
|
|
111
|
-
app.use(express.static(path.join(__dirname, 'public')));
|
|
112
|
-
|
|
113
|
-
app.use('/', indexRouter);
|
|
114
|
-
app.use('/users', usersRouter);
|
|
115
|
-
|
|
116
|
-
// catch 404 and forward to error handler
|
|
117
|
-
app.use(function(req, res, next) {
|
|
118
|
-
next(createError(404));
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
// error handler
|
|
122
|
-
app.use(function(err, req, res, next) {
|
|
123
|
-
// set locals, only providing error in development
|
|
124
|
-
res.locals.message = err.message;
|
|
125
|
-
res.locals.error = req.app.get('env') === 'development' ? err : {};
|
|
126
|
-
|
|
127
|
-
// render the error page
|
|
128
|
-
res.status(err.status || 500);
|
|
129
|
-
res.render('error');
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
module.exports = app;
|
|
133
|
-
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
※↓デフォルトのままです
|
|
137
|
-
```index.js
|
|
138
|
-
var express = require("express");
|
|
139
|
-
var router = express.Router();
|
|
140
|
-
|
|
141
|
-
/* GET home page. */
|
|
142
|
-
router.get("/", function (req, res, next) {
|
|
143
|
-
// res.render("index", { title: "Express" });
|
|
144
|
-
res.send("HELOOOOOOOOOOOOO");
|
|
145
|
-
});
|
|
146
|
-
|
|
147
|
-
module.exports = router;
|
|
148
|
-
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
### 試したこと
|
|
153
|
-
|
|
154
|
-
npm startで起動して
|
|
155
|
-
http://localhost:4200/api
|
|
156
|
-
http://localhost:4200/api/
|
|
157
|
-
にアクセスしてみましたが、以下のようにエラーとなってしまいます。。。
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
> angular-express@0.0.0 start
|
|
163
|
-
> ng serve --proxy-config proxy.conf.json
|
|
164
|
-
|
|
165
|
-
✔ Browser application bundle generation complete.
|
|
166
|
-
|
|
167
|
-
Initial Chunk Files | Names | Raw Size
|
|
168
|
-
vendor.js | vendor | 2.04 MB |
|
|
169
|
-
polyfills.js | polyfills | 314.28 kB |
|
|
170
|
-
styles.css, styles.js | styles | 209.87 kB |
|
|
171
|
-
main.js | main | 48.11 kB |
|
|
172
|
-
runtime.js | runtime | 6.53 kB |
|
|
173
|
-
|
|
174
|
-
| Initial Total | 2.60 MB
|
|
175
|
-
|
|
176
|
-
Build at: 2023-02-13T14:03:09.763Z - Hash: 03cfe64eb3a47dab - Time: 5875ms
|
|
177
|
-
|
|
178
|
-
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
√ Compiled successfully.
|
|
182
|
-
<e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:4200/ to http://localhost:3000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)
|
|
183
|
-
```
|
|
184
|
-
|