Как настроить асинхронный роутинг Angular2+Webpack?

Question

[Валентин]

Недавно начал работать с webpacko-м. И все не могу научить его принимать мой асинхронный роутинг. В стандартной сборке есть рабочий пример :

@RouteConfig([
  { path: '/',      name: 'Index', component: Home, useAsDefault: true },
  { path: '/home',  name: 'Home',  component: Home },
  // Async load a component using Webpack's require with es6-promise-loader and webpack `require`
  { path: '/about', name: 'About', loader: () => require('es6-promise!./about/about')('About') },
])

about.ts

import {Component} from 'angular2/core';

console.log('`About` component loaded asynchronously');

@Component({
  selector: 'about',
  template: `<h1>Bla-bla-bla</h1>`
})
export class About {
  constructor() {

  }

  ngOnInit() {
    console.log('hello `About` component');
  }

}

Даже просто меня названия, т.е имя класса, оно не хочет работать. Так же не понимаю смысла:

require('es6-promise!./about/about')('About') Оно же не вызывает друг друга, аргументы никуда не подставляются, что же это за чудо такое?
Буду рад вашей помощи! Как оказалось, для нормальной работы с Angular 2, webpack нужно некисло настроить...почти через каждое действия какая проблема вылазит.

Answer 1

[Алексей Зуев]

require('es6-promise!./about/about')('About')

что же это за чудо такое?

Попробуем разобраться. Заходим на документацию к вебпаку тык.

Т.е. эта конструкция require('es6-promise!./about/about') является вызовом загрузки модуля с помощью переопределенного лоадера, а не просто лоадера, который прописан в webpack.config.js этой сборки

loaders: [
  // See: https://github.com/s-panferov/awesome-typescript-loader
  {test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [/\.(spec|e2e)\.ts$/]},

Идем в исходники es6-promise-loader, который как раз у нас является одной из devDependencies сборки. Там можно маленько посмеяться над комментариями).
Смотрим, что тут, ага - это pitch лоадер, который делает обертку es6-promise. А внутри метод из вебпака ensure, который позволяет отделять chunk и загружать его динамически. В итоге получается примерно такой модуль (пути я порезал маленько)



Т.е. require('es6-promise!./about/about') грубо говоря превращается в функцию с параметром namespace. И вобщем когда придет время сдерживать своё обещание и возвращать модуль, то сработает следующее выражение
require("......app\\about\\about.ts")[namespace]
Require вернет нам как раз наш exports объект, который мы возвращаем в about.ts
export class About {
Смотрим на практике

А к свойству объекта мы уж по namespace сможем легко обратиться. Именно поэтому там 'About'.

Если напишете about, то не видать вам

ngOnInit() {
  console.log('hello `About` component');
}

из компонента

Comments

[Валентин]

Большое вам спасибо за ответ. С горем пополам, но разобрался в этом,благодаря вам, и вроде все заработало, но не понятно почему не отображаются потомки, т.е если я делаю структуру без потомков, то чанки подгружаются, но не отображаются. Но если я делаю структуру с потомками, то чанки подгружаются, но не отображаются :

{path: '/', name: 'Index', component: Home, useAsDefault: true},
  {path: '/home', name: 'Home', component: Home},
  {
    path: '/administrationPanel/...',
    name: 'AdminRoot',
    loader: () => require('es6-promise!./admin/admin')('AdminRoot')
  },

admin.ts

import {Component,OnInit} from 'angular2/core';
import {RouteConfig, Router} from 'angular2/router';

@Component({
  selector: 'admin',
  pipes: [],
  providers: [],
  directives: [],
  styles: [``],
  template: `<h1>From Admin!</h1>
  <div><a [routerLink]=" ['./Tables'] ">Tables</a></div>
  <router-outlet></router-outlet>`
})

@RouteConfig([
  {path: '/tables', name: 'Tables', loader: () => require('es6-promise!./tables/tables.component')('Tables')}
])
export class AdminRoot implements OnInit {

  ngOnInit() {
    console.log('hello `Admin` component');
  }

}

tables

import {Component,OnInit} from 'angular2/core';

@Component({
  selector: 'app',
  pipes: [],
  providers: [],
  directives: [],
  styles: [``],
  template: `<h1>Tables,Man!</h1>`
})

export class Tables implements OnInit {

  ngOnInit() {
    console.log('hello `Table!` component');
  }

p.s Еще раз большое вам спасибо за помощь, не сочтите за наглость, хочу у вас еще проконсультироваться по паре вопросов, на счет Webpack-а.Вообще моя цель java была, но пришлось и js изучать, чтобы проект сделать, а потом так синтаксис typescript понравился + Angular2, а как посмотрю, что все столько весит, да и файлов тучу передается...в обще догнал себя до webpack-а. К сути : Пытался я сначала сделать свою сборку, но что-то долго не склеивалось, пришел к этой.Я то, конечно понял, что они хотели сделать 3-я модулями: main.ts, vendor.ts, polyfills.ts, Т.е они предоставили самые нужные библиотеки+ наш главный модуль, который подтягивает все приложение, но как тогда работает CommonsChunkPlugin? Он же,вроде, должен из всех этих модулей вынести одинаковые библиотеки, и сделать из этого отдельный чанк, но этого не происходит. Он производит только наши асинхронные модули, что вполне логично. Тогда, что пытались сделать создатели сборки, разбивая верхушку приложения на 3 отдельных куска?

И я буду вам признателен, если подскажете, почему же у меня браузер подгружает gzip файлы, но не распаковывает их, т.е я напрямую в index.html отдаю вместо

[Алексей Зуев]

Waynes: CommonsChunkPlugin асинхронные модули в данном случае не производит, их производит require.ensure. Он для оптимизации повторяющегося кода. name: ['main', 'vendor', 'polyfills'] Три раза вызовется плагин и последовательно будет вытаскивать общий код из предыдущего прохода в текущую. Т.е. в polyfills попадет общий для всех трех скриптов код. В vendor - общий код для main и vendor. Если даже ничего общего и не добавляете в код, то в любом случае в polyfills будет вебпаковская шапка для управления модулями, которая начинается с /******/ (function(modules) { // webpackBootstrap и любой другой код. к примеру, что-то из babel. Именно поэтому мы подключаем эти скрипты друг за другом, хотя итак логично)

[Алексей Зуев]

Waynes:

[Валентин]

Спасибо, Алексей, что столько мне помогли понять. Решил я проблему....в общем, по какой-то мне непонятной причине, раньше до вебпака, мне не хотел стандартный компилятор компилировать, и ругался, если есть потом у класса, и хотел, чтобы я прописал /administrationPanel/... . Но сейчас я просто оставил /administrationPanel и все красиво заработало, уж не знаю почему и где тут магия, но меня радует, что я наконец-то смогу продвинуться в работе

[Валентин]

Если еще немного мне разъясните, буду очень благодарен, на счет gzip-а. А точнее: как заставить браузер его прочитать, ведь банально отправить эти файлы как javascript не помогает?

[Валентин]

Еще нашел очередную проблему: если переходить вверх по родительским ссылкам, то дочерние представления не закрываются. Загуглил, но везде пишут, что ангулар сам уничтожает дочерние представления.

[Алексей Зуев]

Валентин: чтобы браузер читал gzip, нужно сервер настроить на правильные заголовки. к примеру в апач htaccess

AddType "text/javascript" .gz
 AddEncoding gzip .gz