Búsqueda de sitios web

express - ¿El enrutador de Angular2.0 funciona para componentes y no para módulos?

Estoy tratando de modificar una aplicación angular existente para que se ajuste a la estructura de este Proyecto Inicial. De todos modos, tengo mi módulo de aplicación con un submódulo (tutorial). Que se ve así:

Al aterrizar en el dominio raíz y luego navegar con los enlaces del enrutador a http://localhost:3000/tutorial/chapter/0, todo funciona bien. Sin embargo, si actualizo la página o intento ir directamente a ese enlace, obtengo el error:

Unhandled Promise rejection: Template parse errors:
'my-app' is not a known element:
1. If 'my-app' is an Angular component, then verify that it is part of this module.
2. If 'my-app' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

<body>
    [ERROR ->]<my-app>
        <div class="valign-wrapper">
            <div class="preloader-wrapper active valign"): a@30:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse

Así que creo que esto está sucediendo porque, en lugar de que esa URL enlace al appcomponent, con el submódulo tutorial como hijo, solo está enlazando al TutorialModule, y luego las etiquetas <my-app></my-app> del index.html no se reconocen. Esto funcionaba antes, así que no estoy seguro de qué aspecto de esta nueva configuración ha roto esto.

Aquí está mi app.routes.ts:

import { homeComponent } from './components/home/home.component';
import { pluginsComponent } from './components/plugins/plugins.component';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: homeComponent },
  { path: 'tutorial', loadChildren: 'tutorial/tutorial.module', pathMatch: 'prefix'},
  { path: 'plugins', component: pluginsComponent }
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes);

y mi tutorial.routes.ts:

import { Routes, RouterModule } from '@angular/router';

import { tutorialComponent }    from './tutorial.component';
import { chapterComponent }  from './chapter/chapter.component';

const tutorialRoutes: Routes = [
  {
    path: 'tutorial',
    component: tutorialComponent,
    children: [
      { path: 'chapter/:id',  component: chapterComponent },
      { path: '', redirectTo: 'chapter/0', pathMatch: 'full'},
    ]
  }
];

export const tutorialRouting = RouterModule.forChild(tutorialRoutes);

finalmente en mi app.ts donde defino las rutas de express tengo:

app.all(/^\/tutorial$/, (req, res) => {
  res.redirect('/tutorial/');
});
app.use('/tutorial/', (req, res) => {
  res.sendFile(resolve(__dirname, '../public/index.html'));
});

servir el índice angular para el componente de tutorial.

Todo el repositorio está aquí

Respuesta #1

El problema era el archivo index.html, tenía <base href="."> donde debería haber sido <base href="/">. Tengo un informe de errores aquí

Respuesta #2

@micronyks ya dijo esto en el comentario, pero lo que necesitas hacer es configurar tu servidor web para redirigir todas las solicitudes a tu página index.html. Luego tu aplicación se cargará y navegará a tu enlace "profundo".

Artículos relacionados