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