The error indicates that the defined routes does not match with the page url. Compare your main.js with the one provided in shared package.
Focus on the routing code in main.js (or refer Chapter-2):
function AemPageMatcher(url) {
var path = url.join('/');
if (path.startsWith('content/wknd-events/angular/')) {
return ({
consumed: url,
posParams: { path: url[url.length - 1] }
});
}
}
var AemPageDataResolver = /** @class */ (function () {
function AemPageDataResolver() {
}
AemPageDataResolver.prototype.resolve = function (route) {
// Returns the absolute resource path with no extension, ex: /content/wknd-events/angular/home/event-1
return '/' + route.url.join('/').replace(/\.[^/.]+$/, '');
};
AemPageDataResolver = __decorate([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Injectable"])(),
__metadata("design:paramtypes", [])
], AemPageDataResolver);
return AemPageDataResolver;
}());
var AemPageRouteReuseStrategy = /** @class */ (function () {
function AemPageRouteReuseStrategy() {
}
AemPageRouteReuseStrategy.prototype.shouldDetach = function (route) { return false; };
AemPageRouteReuseStrategy.prototype.store = function (route, detachedTree) { };
AemPageRouteReuseStrategy.prototype.shouldAttach = function (route) { return false; };
AemPageRouteReuseStrategy.prototype.retrieve = function (route) { return null; };
AemPageRouteReuseStrategy.prototype.shouldReuseRoute = function (future, curr) { return false; };
return AemPageRouteReuseStrategy;
}());
var routes = [
{
matcher: AemPageMatcher,
component: _components_page_page_component__WEBPACK_IMPORTED_MODULE_2__["PageComponent"],
resolve: {
path: AemPageDataResolver
}
},
{
path: '',
redirectTo: 'content/wknd-events/angular/home.html',
pathMatch: 'full'
}
];
var AppRoutingModule = /** @class */ (function () {
function AppRoutingModule() {
}
AppRoutingModule = __decorate([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["NgModule"])({
imports: [_angular_router__WEBPACK_IMPORTED_MODULE_1__["RouterModule"].forRoot(routes)],
exports: [_angular_router__WEBPACK_IMPORTED_MODULE_1__["RouterModule"]],
providers: [AemPageDataResolver, {
provide: _angular_router__WEBPACK_IMPORTED_MODULE_1__["RouteReuseStrategy"],
useClass: AemPageRouteReuseStrategy
}]
})
], AppRoutingModule);
return AppRoutingModule;
}());
