AEM SPA - Angular - Edit Template not redirecting correctly - WKND Events | Community
Skip to main content
A
albina11889976
August 12, 2019
Solved

AEM SPA - Angular - Edit Template not redirecting correctly - WKND Events

  • August 12, 2019
  • 3 replies
  • 2639 views

I'm following the tutorial  Adobe Experience Manager Help | Getting Started with Angular and AEM SPA Editor

After Chapter three, I'm not able to see any components on the home.html page. When I looked to edit the template it is not redirecting correctly. (http://localhost:4502/editor.html/conf/wknd-events/settings/wcm/templates/wknd-events-app-template/structure.html ) angular routing seems to redirect it to http://localhost:4502/editor.html.

Console log error

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'conf/wknd-events/settings/wcm/templates/wknd-events-page-template/structure.html' Error: Cannot match any routes. URL Segment: 'conf/wknd-events/settings/wcm/templates/wknd-events-page-template/structure.html'

So that may be the reason why I'm getting blank page for home.html since there is no components available in the template. Could anyone please help to resolve this issue.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Gaurav-Behl

http://localhost:4502/editor.html/content/wknd-events/angular/home.html should work fine per package provided in the tutorial or @ Release [Angular] WKND Events v1.1.0 · Adobe-Marketing-Cloud/aem-guides-wknd-events · GitHub

I'm able to see the editable components with the chapter-2 package

http://localhost:4502/editor.html/conf/wknd-events/settings/wcm/templates/wknd-events-app- template/structure.html  doesn't work because the router is restricted to work for 'content/wknd-events/angular/' in this tutorial. If you want to load the template-structure.html, you may provide a custom router.

Just for testing purpose, modify  path.startsWith('content/wknd-events/angular/')  to path.endsWith('.html') in main.js line #56  to see it work.

main.js #56

function AemPageMatcher(url) {

    var path = url.join('/');

    if (path.startsWith('content/wknd-events/angular/')) {

        return ({

            consumed: url,

            posParams: { path: url[url.length - 1] }

        });

    }

}

3 replies

Gaurav-Behl
Gaurav-Behl
Level 10
August 12, 2019

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;

}());

A
albina11889976Author
August 19, 2019

Thanks for your response. However, I'm bit confused where the routing for the template route (i.e, http://localhost:4502/editor.html/conf/wknd-events/settings/wcm/templates/wknd-events-app- template/structure.html) is specified.

I couldn't see the route written for the template path anywhere. The route mentioned as per the tutorial is given below.

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'

    }

];

Still my template page is not routing properly. As it is getting redirected to http://localhost:4502/editor.html/ .

Can you help me on this issue

Gaurav-Behl
Gaurav-BehlAccepted solution
Level 10
August 19, 2019

http://localhost:4502/editor.html/content/wknd-events/angular/home.html should work fine per package provided in the tutorial or @ Release [Angular] WKND Events v1.1.0 · Adobe-Marketing-Cloud/aem-guides-wknd-events · GitHub

I'm able to see the editable components with the chapter-2 package

http://localhost:4502/editor.html/conf/wknd-events/settings/wcm/templates/wknd-events-app- template/structure.html  doesn't work because the router is restricted to work for 'content/wknd-events/angular/' in this tutorial. If you want to load the template-structure.html, you may provide a custom router.

Just for testing purpose, modify  path.startsWith('content/wknd-events/angular/')  to path.endsWith('.html') in main.js line #56  to see it work.

main.js #56

function AemPageMatcher(url) {

    var path = url.join('/');

    if (path.startsWith('content/wknd-events/angular/')) {

        return ({

            consumed: url,

            posParams: { path: url[url.length - 1] }

        });

    }

}

Terms & ConditionsAccessibility statement

Loading footer...