How to setup parent+child routing in Angular 2?

V

Valentine2016-03-14 19:13:48

Angular

Valentine, 2016-03-14 19:13:48

Good day to all! Child-routing does not want to work for me in the 2nd Angular, or more precisely, when I say in app.component that I have a child (/...), then the child is not loaded, but errors there are none. If in the descendant (adminPanelRoot.component ) I add to the routing

@RouteConfig([
    {path: "/tables", component: Tables, name: "Tables",<b>useAsDefault:true</b>}
])

, then immediately everything is rendered to the child view. I would like the adminPanelRoot.component to be loaded first , and then, when following the link, the descendant was also loaded. Please help me figure it out:
boot.ts

import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from "angular2/router";
import {HTTP_PROVIDERS} from "angular2/http";

import {AppComponent} from "./app.component";

bootstrap(AppComponent,[ROUTER_PROVIDERS,HTTP_PROVIDERS]);

app.component.ts

import {Component} from "angular2/core";
import {ROUTER_DIRECTIVES} from "angular2/router";
import {RouteConfig} from "angular2/router";
import {AdminPanelRoot} from "./administrationPanel/adminPanelRoot.component";


@Component({
    selector: 'root-app',
    template: `<router-outlet> </router-outlet>`,
    directives: [ROUTER_DIRECTIVES]

})
@RouteConfig([
    {path: "/administrationPanel/...", name: "AdminPanelRoot", component: AdminPanelRoot}
    ])
export  class AppComponent{

}

adminPanelRoot.component.ts

import {Component} from "angular2/core";
import {ROUTER_DIRECTIVES,RouteConfig, RouterLink, AsyncRoute} from "angular2/router";

import {Tables} from "./tables/tables.component";

@Component({
    selector: "admin-root",
    template: `
      <header>
        <span id="logo">ADMIN PANEL</span>
        <span id="info_panel">
            <span id="panel_top_information">Table</span>
        </span>
      </header>
      <nav id="menu">
        <ul>
            <li> <a [routerLink]="['./Tables']">Tables</a> </li>
            <li>Home</li>
        </ul>
      </nav>
      <router-outlet></router-outlet>
        `,
    styleUrls: ["css/admin/adminPanelRoot.css"],
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: "/tables", component: Tables, name: "Tables"}
])
export class AdminPanelRoot {
    /*
     new AsyncRoute({path: "/tables", loader: () => Promise.resolve(Tables), name:"Tables"})
     */
}

tables.component.ts

import {Component} from "angular2/core";
@Component({
    selector:"table-list",
    template:"<div>Hello from list!</div>"
})

export class Tables{

}

ps I would also like to understand why AsyncRoute does not work , i.e. it still pulls up all the same files, even when I do not follow the link, i.e. I do not activate the view.
pps I would like to know if it is possible to shrink the whole thing to an adequate size, otherwise 2.5 megabytes are immediately pulled up? I heard you can use Gulp for these purposes, it really tightens everything up a lot, or is another approach needed here?:

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Administration Panel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.js"></script>

    <link rel="stylesheet" href="css/admin/appRoot.css">


    <script>
        System.config({
            packages: {
                views: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('views/adminViews/boot.js')
                .then(null, console.error.bind(console));
    </script>

</head>
<body>
<root-app>Loading...</root-app>


</body>

</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

B

bromzh, 2016-03-15
@bromzh

1) To prevent AsyncRouter from loading files, in the loader parameter you need not to resolve the component, but to use some kind of module loader because if you import the Tables component in the code, it will already be included in the final assembly, so you need to import not directly from ts, but through loaders that can work in a browser environment. For example System.import from SystemJS. Or Webpakovsky. The SystemJS example is here , and the webpack example is here .
2) Everything is compressed, for example, through UglifyJS, there are plugins for many collectors. But it's better to switch to webpack right away. There are cool optimizers in the kit. For example, the dedupe plugin removes code duplicates if they occur, and the webpack uglify plugin also removes unused code (it analyzes connected modules and cuts out unused ones). After all the optimizations, a pure helloworld in Angular takes me 500kb and another 100kb polyfills.