Angular ページ分けについて

Question

既存のAngularで表示している内容を、別ページにも表示したいと考えています。
(site.comで表示される箇所を、site.com/XXXにも表示したい)
表示したいBComponentはAComponentの子コンポーネントです。
現状、site.com/XXXを指定すると、site.comにリダイレクトしてしまいます。
ご存知な点ございましたら、ご教示いただきたいです。

■コード（一部抜粋）
・A.module.ts

import { AComponent } from './A.component';
import { BComponent } from './B.component';
declarations: [
  AComponent,
],
exports: [
  BComponent
],
})
export class AModule { }

・app.module.ts

import { AModule } from './components/A.module';
import { BComponent } from './components/B.component'; //追加

const appRoutes: Routes = [
    { path: '', loadChildren: './components/A.module#AModule' },
    //追加
    {
        path: APP_ROUTES.XXX, component: AComponent, data: {
            meta: {
                title: 'hoge',
                keywords: 'hoge',
                description: 'hoge'
            }
        }
    },
...
];

@NgModule({
    imports: [
        AModule,　//追加
    ],
    entryComponents: [
        BComponent //追加
    ],

・web.php

Route::get('XXX', 'HomeController@index'); //追加

・Constancts.ts

export const APP_ROUTES = {
 XXX: 'XXX', //追加
};