Simplified state definition

[zmitic]

If I have a state definition like this (shortened for readibility):

let states = [
    {
        name: 'app.profile',
        url: '/profile',
        views: {
            $default: {component: ProfileComponent},  //  <--- this 
            'about_me@app.profile': {component: ProfileAboutMeComponent},
            'photos@app.profile': {component: ProfilePhotosComponent},
            'help@app': {component: ProfileHelpComponent},
        },
    },
];

and a ProfileComponent that only has a template with no logic:

@Component({
    template: `
<h4>My profile</h4>
<ui-view>
    <ui-view name="about_me"></ui-view>
    <ui-view name="photos"></ui-view>
</ui-view>
`
})
export class ProfileComponent { }

---

can I define this state without creating ProfileComponent so state definition becomes something like this:

let states = [
    {
        name: 'app.profile',
        url: '/profile',
        template: `
<h4>My profile</h4>
<ui-view>
    <ui-view name="about_me"></ui-view>
    <ui-view name="photos"></ui-view>
</ui-view>
`
        views: {
            // <--- removed ProfileComponent was here
            'about_me@app.profile': {component: ProfileAboutMeComponent},
            'photos@app.profile': {component: ProfilePhotosComponent},
            'help@app': {component: ProfileHelpComponent},
        },
    },
];

Is it possible to do something like this?

EDITED: This is probably even better:

let states = [
    {
        name: 'app.profile',
        url: '/profile',
        views: {
            $default: {        template: `
<h4>My profile</h4>
<ui-view>
    <ui-view name="about_me"></ui-view>
    <ui-view name="photos"></ui-view>
</ui-view>
`},
            'about_me@app.profile': {component: ProfileAboutMeComponent},
            'photos@app.profile': {component: ProfilePhotosComponent},
            'help@app': {component: ProfileHelpComponent},
        },
    },
];

this way I could replace help@app view as well, because it is static text at bottom of the page.