首页 文章

Angular 2中的多个模块

提问于
浏览
6

我有一个Angular 2应用程序(RC7),它作为单个组件开始,但很快就会以各种不同(有时甚至是完全不相关)的方式在整个项目中使用 .

因此,单个 NgModule 引导所有组件似乎是一个可怕的想法与巨大的膨胀 . 我正在努力寻找一种方法来拥有多个模块(模块A将包含组件A,模块B将包含组件B等),并且仍然允许在单个页面上引导多个A2应用程序 .

在实践中,我想要实现的是:

Page 1 bootstraps模块A - 这是有效的 .

Page 2 bootstraps模块B - 这是有效的 .

Page 3 bootstraps模块A和模块B - 这不起作用 .

index.html

<script src="/angular2/node_modules/zone.js/dist/zone.js"></script>
<script src="/angular2/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/angular2/node_modules/systemjs/dist/system.src.js"></script>
<script src="/angular2/systemjs.config.js"></script>


<script type="text/javascript">
    System.import('appOne').catch(function(err){ console.error(err); });
    System.import('appTwo').catch(function(err){ console.error(err); });
</script>

systemjs.config.js

(function (global) {
    System.config({
        paths: {
            'npm:': '/angular2/node_modules/'
        },
        map: {
            appOne: '/angular2/',
            appTwo: '/angular2/',
        },
        packages: {
            appOne: {
                main: './appOne.main.js',
                defaultExtension: 'js'
            },
            appTwo: {
                main: './appTwo.main.js',
                defaultExtension: 'js'
            },
        }
    });
})(this);

AppOne和AppTwo的模块只是引导相关组件(componentOne&componentTwo) . 但是,两者不会同时在同一页面上呈现 . 我在控制台中没有错误,但是最后在systemjs.config.js文件中列出的最新软件包是唯一要加载的软件包 .

谁能明白为什么它可能不起作用?或者推荐另一种方法来构建我的模块 . 我宁愿没有列出所有组件,服务等的父模块 - 这似乎打败了Angular 2的嵌套组件树,并最终会以指数方式影响页面加载时间 .

提前致谢 .

3 回答

  • 0

    对于任何感兴趣的人来说,问题在于引导 . 两个应用程序必须一致地引导才能工作 .

    index.html

    <script src="/angular2/node_modules/zone.js/dist/zone.js"></script>
    <script src="/angular2/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="/angular2/node_modules/systemjs/dist/system.src.js"></script>
    <script src="/angular2/systemjs.config.js"></script>
    
    
    <script type="text/javascript">
        System.import('appOneAndTwo').catch(function(err){ console.error(err); });
    </script>
    

    systemjs.config.js

    (function (global) {
        System.config({
            paths: {
                'npm:': '/angular2/node_modules/'
            },
            map: {
                appOne: '/angular2/',
                appTwo: '/angular2/',
                appOneAndTwo: '/angular2/',
            },
            packages: {
                appOne: {
                    main: './appOne.main.js',
                    defaultExtension: 'js'
                },
                appTwo: {
                    main: './appTwo.main.js',
                    defaultExtension: 'js'
                },
                appOneAndTwo: {
                    main: './appOneAndTwo.main.js',
                    defaultExtension: 'js'
                },
            }
        });
    })(this);
    

    appOneAndTwo.main.ts

    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
    import {AppOneModule} from './app/app.one.module';
    import {AppTwoModule} from './app/app.two.module';
    
    platformBrowserDynamic().bootstrapModule(CommentAppModule);
    platformBrowserDynamic().bootstrapModule(WorkflowAppModule);
    

    它仍然不理想,因为我必须为我创建的Angular 2应用程序的每个组合创建一个新的main.ts文件,但它确实意味着导入仅在必要时严格导入,并且有效负载不会膨胀给最终用户 .

    我目前正在使用Webpack查看AoT编译器(https://angular.io/docs/ts/latest/cookbook/aot-compiler.html)和uglification / minification以进一步减少有效负载大小 .

  • 4

    你可以从AppModule中提升一个组件数组,如下所示:

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import {AppComponent} from "./app.component";
    import {MainSidebarComponent} from "./menus/main-sidebar.component";
    import {FormsModule} from "@angular/forms";
    import {appRouting} from "./app.routes";
    import {DashBoardComponent} from "./dashboard/dashboard.component";
    import {HomeComponent} from "./home/home.component";
    import {LoginComponent} from "./login/login.component";
    import {UsersModule} from "./users/users.module";
    import {TopBarComponent} from "./menus/top-bar.component";
    
    @NgModule({
        imports:      [
            BrowserModule,
            FormsModule,
            appRouting,
    
            UsersModule
        ],
        declarations: [
            AppComponent,
            MainSidebarComponent,
            TopBarComponent,
            DashBoardComponent,
            HomeComponent,
            LoginComponent
        ],
        bootstrap:    [ AppComponent, MainSidebarComponent, TopBarComponent ]
    })
    export class AppModule { }
    

    然后在index.html中

    <!doctype html>
    <head>
        <base href="/">
        <meta charset="UTF-8">
    
        <!-- 1. Load libraries -->
        <!-- Polyfill(s) for older browsers -->
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <!-- 2. Configure SystemJS -->
        <script src="systemjs.config.js"></script>
        <script>
            System.import('app').catch(function (err) {
                console.error(err);
            });
        </script>
    </head>
    <body class=" sidebar_main_open sidebar_main_swipe">
    
    <header id="header_main">
     <top-bar></top-bar>
    </header><
    
    
    <aside id="sidebar_main">
        <main-sidebar></main-sidebar>
    </aside>
    
    
    <div id="page_content">
        <div id="page_content_inner">
            <my-app>Loading....</my-app>
        </div>
    </div>
    </body>
    </html>
    
  • 4

    我不知道你是否能够实现你想要的确切解决方案,但你可以尝试延迟加载一些模块 .

    例如,您创建一个AppModule(用于引导) . 在AppModule中,您只导入“home”模块(我将其命名为HomeModule) .

    比所有其他模块都可以延迟加载(reference

相关问题