Non-SPA с angular2

Я начал использовать angular2 (с backend файлом express.js) с целью передать управление несколькими разделами страницы компонентам angular2, но в конце концов понял, что система намного эффективнее, если angular2 контролирует всю область страницы. Тем не менее, мое приложение не является SPA, и кроме маршрута, содержащего селектор моего корневого компонента angular2, есть другие серверные маршруты.

У меня есть 2 вопроса, а затем фрагменты кода:

Всякий раз, когда я загружаю серверный маршрут, чей серверный визуализированный шаблон не содержит селектор моего корневого компонента, <main-comp></main-comp>, angular2 в основном запутывает консоль, говоря, что ей негде инициализации. Я поместил весь свой код инициализации angular2 в общий заголовок для всего моего приложения. Есть ли способ сказать корневому компоненту angular2 не отображать себя, если его селектор просто не существует на странице?
Маршрут на стороне сервера, который отображает корневой компонент angular2, составляет /writing, а URL-адрес маршрутизации angular2 для определенного сообщения в блоге - это что-то вроде /writing/2016/03/post. Однако, всякий раз, когда я просматриваю URL-адрес, System.js пытается загрузить приложение/загрузку относительно этого местоположения, то есть /writing/2016/03/app/boot, что, очевидно, не с 404. Я думаю, что это происходит, потому что мой сервер управляет /writing route и angular загружается относительно базового URL-адреса, запрашиваемого на сервере. Таким образом, единственным решением, которое я знаю, было бы превращение моего приложения в SPA с одним маршрутом сервера, который был бы '/', что потребовало бы много переписывания на передний план. Как я могу обойти эту проблему?

Это мой корневой компонент:

@Component({
    selector: 'main-comp',
    template: '<router-outlet></router-outlet>',
    providers: [TagService, PostService, BlogStateService],
    directives: [ROUTER_DIRECTIVES, BlogComponent]
})
@RouteConfig([
    {path: '/writing/...', name: 'Blog', component: BlogComponent }  
])
export class AppComponent {
    constructor(private _blogState : BlogStateService, 
        private _postService : PostService) {
    }
}

И вот элемент <head>:

<head>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>

    <!-- Angular Dependencies -->
    <script src="/app/node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="/app/node_modules/es6-shim/es6-shim.js"></script>

    <script src="/app/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/app/node_modules/moment/moment.js"></script>

    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                },
                moment: {
                    main: 'moment.js',
                    type: 'cjs',
                    defaultExtension: 'js'
                }
            },
            map: {
                moment: '/app/node_modules/moment/'
            }
        });
    </script>

    <script src="/app/node_modules/rxjs/bundles/Rx.js"></script>
    <script src="/app/node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="/app/node_modules/angular2/bundles/http.dev.js"></script>
    <script src="/app/node_modules/angular2/bundles/router.dev.js"></script>

    <script>
        System.import('app/js/boot').then(null, console.error.bind(console)); 
    </script>
    <base href="/">

</head>

Ответ 1

Для первой проблемы я добавил проверку на существование <main-comp> на странице перед вызовом метода начальной загрузки (спасибо @Gunter за идею).

Для моей второй проблемы выше, я добавил путь к моему загрузочному файлу в конфигурации system.js следующим образом, так что system.js не загружает приложение/загрузку относительно URL-адреса запроса.

    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            },
            moment: {
                main: 'moment.js',
                type: 'cjs',
                defaultExtension: 'js'
            }
        },
        map: {
            app: '/app',   //<----------added this line
            moment: '/app/node_modules/moment/'
        }
    });

Ответ 2

1) Я думаю, вам нужно будет вручную проверить перед вызовом bootstrap(), а затем пропустить bootstrap(), если селектор не найден.

2) Настройка базового URL-адреса с помощью тега <base> или обеспечения APP_BASE_HREF может исправить это. См. Также Angular 2 маршрутизатора без базового href