Estoy trabajando para aprender a autenticar usando Angular 1 y Express. Tengo mi backend configurado para fines de prueba, y ahora estoy trabajando en el front-end. Tengo rutas básicas configuradas.
Este es el núcleo de mi interfaz:
function router($stateProvider, $urlRouterProvider, $locationProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { url: '/', templateUrl: 'views/home/', controller: 'mainController' }) .state('login', { url: '/login', templateUrl: 'views/login/', controller: 'loginController' }); $locationProvider.html5Mode(true); }Y aquí están las rutas en el back-end que serían relevantes:
app.use(express.static(path.join(__dirname, 'public'))); app.get('/', function(req,res){ res.sendFile(path.join(__dirname, 'public/', 'index.html')); }); El único otro enrutamiento que tengo es para mi API, que usa la constante apiRouter e inyecta /api/ en esas rutas.
Ahora, el problema viene cuando trato de acceder a una ruta directamente desde el navegador. He navegado a localhost:8080/login. Aparece el error Cannot GET /login , pero al usar un ui-sref en mi página de índice, parece funcionar bien.
¿Algunas ideas?
Así que descubrí cuál era mi problema.
Después de mi declaración GET de ruta raíz en mi archivo de servidor, necesito agregar el siguiente código:
app.get('*', function(req,res){ res.sendFile(path.join(__dirname, 'public/', 'index.html')); }); Lo que estaba sucediendo es que Express estaba tratando de encontrar una ruta de inicio de /login que yo había definido. El problema es que esa ruta debe ser manejada por Angular, y no por Express, por lo que el '*' es un cajón de sastre para cualquier ruta que Express no sepa cómo manejar explícitamente, luego transfiere esa responsabilidad al índice archivo .html.