非SPA与angular2

Question

非SPA与angular2

我开始使用angular2(带有express.js后端),目的是将页面的几个部分的控制权传递给angular2组件,但我最终意识到当angular2控制页面的整个区域时系统更有效.但是,我的应用程序不是SPA,除了保存angular2根组件的选择器的路由之外,还有其他服务器呈现的路由.

我有两个问题,其次是代码片段:

每当我加载一个服务器控制的路由,其服务器端渲染模板不包含我的根组件的选择器时<main-comp></main-comp>,angular2基本上会进入控制台,说它没有任何地方可以初始化.我将所有angular2初始化代码放在我的整个应用程序的共享头文件中.有没有办法告诉angular2根组件如果它的选择器根本不存在于页面上而不呈现自身？
呈现angular2根组件的服务器端路由是/writing特定博客帖子的angular2路由URL /writing/2016/03/post.但是,每当我直接浏览到URL时,System.js会尝试相对于该位置加载app/boot,即/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) {
    }
}

Run Code Online (Sandbox Code Playgroud)

这是<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

ila*_*917 5

对于第一个问题,我<main-comp>在调用bootstrap方法之前添加了对页面存在的检查(感谢@Gunter的想法).

对于我上面的第二个问题,我在system.js配置中添加了一个启动文件的路径,如下所示,这样system.js就不会相对于请求URL加载app/boot.

    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/'
        }
    });

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，11 月前
查看次数：	2275 次
最近记录：	9 年，11 月前