首页 文章

非SPA与angular2

提问于
浏览 次
13

我开始使用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) {
    }
}

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

2 回答

  • 2

    对于第一个问题，我在调用bootstrap方法之前在页面上添加了对 <main-comp> 存在的检查（感谢@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/'
        }
    });
    回复于
  • 5

    1）我猜你需要在调用 bootstrap() 之前手动检查，然后如果找不到选择器则跳过 bootstrap() .

    2）使用 <base> 标记设置基本URL或提供 APP_BASE_HREF 可能会解决这个问题 . 另见Angular 2 router no base href set

    回复于

相关问题