I am trying to modify an existing angular application to fit into the structure of this Starter Project . Anyway, that's why I have an application module with a sub-module (tutorial). Which looks like this:
When landing on the root domain, and then switching from the router links to http://localhost:3000/tutorial/chapter/0 , everything works fine. However, if I refresh the page or try to go directly to this link, I get an error message:
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
So, I believe this is because instead of this url associated with the appcomponent, with the tutorial submodule as a child, it just links to the TutorialModule and then the <my-app></my-app> tags from index.html not recognized. It worked before, so I'm not sure which aspect of this new configuration violated this.
Here is my 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);
and my 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);
finally, in my app.ts , where I define the express routes that I have:
app.all(/^\/tutorial$/, (req, res) => { res.redirect('/tutorial/'); }); app.use('/tutorial/', (req, res) => { res.sendFile(resolve(__dirname, '../public/index.html')); });
to serve the angular index for the training component.
Whole repo here