Я пытаюсь сделать несколько попыток с новым "@angular/ssr": "^18.0.4"
, я хочу создать собственную логику входа на стороне сервера, а затем опубликовать в ней данные из Angular.
Я добавил использование маршрутизации аутентификации следующим образом в server.ts
:
// Parse JSON bodies
server.use(express.json());
// Use auth routes
server.use('/api', authRoutes);
// Serve static files from /browser
server.get('**', express.static(browserDistFolder, {
maxAge: '1y',
index: 'index.html',
}));
// All regular routes use the Angular engine
server.get('**', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [
{ provide: APP_BASE_HREF, useValue: baseUrl }
],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
return server;
}
auth.routes
выглядит так:
import { Router } from 'express';
import { login } from './auth.controller';
const router = Router();
router.post('/login', login);
export default router;
Затем я пытаюсь вызвать API в Angular следующим образом:
async loginWithCredential(credential: Credential): Promise<void> {
try {
const session: Session = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify(credential)
}).then(res => res.json());
if (session) {
this.redirectToUrl(session);
return;
}
throw new Error("User not found!");
} catch (error: any) {
throw new Error(error.message);
}
}
Но похоже, что Angualr все еще пытается управлять маршрутизацией /api/ самостоятельно, вместо того, чтобы управлять ею через Express, поскольку я получаю эту ошибку:
ОШИБКА RuntimeError: NG04002: невозможно сопоставить ни один маршрут. URL-сегмент: 'API/логин' в Recouncer.noMatchError (e:/GitHub/GAB-Auth/node_modules/@angular/router/fesm2022/router.mjs:3774:12) при оценке (e:/GitHub/GAB-Auth/node_modules/@angular/router/fesm2022/router.mjs:3813:20) при оценке (e:/GitHub/GAB-Auth/node_modules/rxjs/dist/esm/internal/operators/catchError.js:10:39) в OperationSubscriber.OperatorSubscriber._error (e:/GitHub/GAB-Auth/node_modules/rxjs/dist/esm/internal/operators/OperatorSubscriber.js:23:21) в OperationSubscriber.error (e:/GitHub/GAB-Auth/node_modules/rxjs/dist/esm/internal/Subscriber.js:40:18) в OperationSubscriber._error (e:/GitHub/GAB-Auth/node_modules/rxjs/dist/esm/internal/Subscriber.js:64:30) в OperationSubscriber.error (e:/GitHub/GAB-Auth/node_modules/rxjs/dist/esm/internal/Subscriber.js:40:18) в OperationSubscriber._error (e:/GitHub/GAB-Auth/node_modules/rxjs/dist/esm/internal/Subscriber.js:64:30) в OperationSubscriber.error (e:/GitHub/GAB-Auth/node_modules/rxjs/dist/esm/internal/Subscriber.js:40:18) в OperationSubscriber._error (e:/GitHub/GAB-Auth/node_modules/rxjs/dist/esm/internal/Subscriber.js:64:30) {код: 4002} 11:23:11 [vite] Ошибка предварительного преобразования: не удалось загрузить URL /api/polyfills.js (разрешенный идентификатор: /api/polyfills.js). Имеет ли файл существовать? 11:23:11 [vite] Ошибка предварительного преобразования: не удалось загрузить URL-адрес. /api/main.js (разрешенный идентификатор: /api/main.js). Файл существует?
Как упоминалось в этой проблеме на GitHub, использование ng serve
игнорирует server.ts
, поэтому для запуска SSR мне нужно было запустить эти команды в двух отдельных терминалах:
npm run watch
и
npm run serve:ssr:projectName
Только что увидел, что о такой проблеме еще сообщалось на GitHub: github.com/angular/angular-cli/issues/26323