George Edwards George Edwards - 2 months ago 18
TypeScript Question

Angular2.0 router works for components not modules?

I am trying to modify an existing angular app to fit into the structure of this Starter Project. Anyway, so I have my app module with a submodule (tutorial). Which looks like this:

enter image description here
When landing on the root domain and then navigating with 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 that link, I get the 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


So I believe this is happening because rather than that url linking to the appcomponent, with the tutorial submodule as a child, it's just linking to the TutorialModule, and then the
<my-app></my-app>
tags from the
index.html
aren't recognised. This worked before, so I am not sure what aspect of this new configuration has broken 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 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 tutorial component.

The whole repo is here

Answer

The issue was the index.html file, I had <base href="."> where it should have been <base href="/">. I have a bug report here