Expand my Community achievements bar.

SOLVED

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

Avatar

Level 1

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/s... ) 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.

1 Accepted Solution

Avatar

Correct answer by
Level 10

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] }

        });

    }

}

View solution in original post

3 Replies

Avatar

Level 10

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;

}());

Avatar

Level 1

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

Avatar

Correct answer by
Level 10

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] }

        });

    }

}