Как работает роутинг в связке angular2 + express?

Question

[learnfrontend]

Изучаю роутинг в angular2, до этого работал с Express. Изучил как задать нужные пути, как задать 404 ошибку, если такого пути нет. В общем все тоже самое я делал раньше но только в Express. Интересует как вообще они будут в плане роутинга взаимодействовать между собой, если у меня будет MEAN stack к примеру. Достаточно ли задать пути только в angular или же еще что-то в Express делать придется потом?

Answer 1

[Максим]

А как вы вообще планируете использовать express ? MEAN стэк подразумевает, что ваш бэкэнд - это только REST API, если не ошибаюсь. Следовательно - у вас все запросы на youhost.com/api/, например, идут в express и там он разруливает роуты, а все остальные запросы идут в клиентское приложение и там разруливает ангуляр.

Answer 2

[Igor Kalashnikov]

предположим приложение у нас состоит из back и front папочек, которые компилятся в /dist/*

let root = process.cwd();
        let nodeModules = '/node_modules/';
        let clientFiles = '/dist/front';

        application.use(express.static(path.join(_root , nodeModules)));
        // настраиваем express, указывая ссылку на папку с билдом фронтенда вот так
        application.use(express.static(path.join(_root , clientFiles)));
        // теперь экспресс будет знать где искать статику, т.е. наш front + node_modules папку

        // конфигурим API роутер, 
        router = express.Router();
        router
          .route('/todos')
          .get(TodoController.getAll)
          .post(TodoController.createTodo);

        // прячем все вызовы к api в отдельную ветку
        application.use('/api', router);
        // API ошибки будем обрабатывать своим JSON ответом
        application.use('/api', function (error: any, req: express.Request, res: express.Response, next: express.NextFunction){
                res.status(statusCode).json({error});
        }); 

        application.all('*', (req: any, res: any) => {  // все остальное отправляем в dist/front/index.html/angularRoute
            res.status(200).sendFile(path.join(root, clientFiles, '/index.html'));
        });

Прикол в том что ваше api не знает ваших front-овых роутов.
Поэтому когда в express попадает роут: '/users/1' и он его не находит, он отправляет его в index.html => index.html/users/1 , теперь ангуляр смотрит есть ли у него такой роут, и если нет, то тогда рисует страницу с ошибкой.
Однако api это чисто back-ендовские роуты, соответственно для этой ветки, мы эррор хендлер повесили.