Non-SPA с угловым2

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

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

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

источник

2016-03-08 ilana917

Для первой проблемы я добавил проверку на наличие <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/' 
     } 
    });

источник

2016-03-13 17:43:58 ilana917

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

2) Установка базового URL-адреса с использованием тега <base> или предоставление APP_BASE_HREF может исправить это. См. Также Angular 2 router no base href set

источник

2016-03-08 09:44:04

Спасибо @Gunter. Я пробовал тег '' и не видел разницы, затем в качестве теста я попробовал '', чтобы посмотреть, что на самом деле произошло, и когда я нажал на ссылки, контролируемые 'RouteConfig', добавленный «бла» в начале каждого углового маршрута, за которым следует весь URL-адрес, запрашиваемый на сервере. По другой проблеме, я посмотрю, может ли быть проверена элемент на странице, прежде чем вызывать загрузку. Все еще чувствует себя немного взломанным. – ilana917

Вы также можете создать отчет об ошибке в https://github.com/angular/angular для поддержки готового загрузочного окна. –

Non-SPA с угловым2

ответ

Смежные вопросы