useAsDefault 不适用于 Electron + Webpack 实现？ (Angular 2)

Question

当我将 webpack 用作 module-handler/bundler 时，我偶然发现了在 Electron（桌面网络应用程序）中实现 Angular 2 的一些问题。

我试图在启动我的应用程序时加载一个组件作为默认路由，但它似乎只在我使用 [routerLink] 时被路由到，即使我将它指定为默认路由使用"useAsDefault: true"。所以基本上我想要的是在启动时显示的模板，但目前它只在我按下 todo-app.component.html 中的 link 时显示。

我将 post 相关代码部分的一些片段以及 link 到相关项目的 git。 https://github.com/viktorgullmark/TodoApp---Ng2---Electron

我真的很感谢在这方面的任何帮助，因为我现在已经连续几个小时被同样的问题困扰，感觉我已经尝试了一切。

app/app.ts

/// <reference path="../node_modules/angular2/typings/browser.d.ts" />

import {bootstrap} from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router'
import {HTTP_PROVIDERS} from 'angular2/http'
import {provide} from 'angular2/core';
import {APP_BASE_HREF} from 'angular2/router';
import {TodoApp} from './todo-app.component'

import 'rxjs/Rx'

bootstrap(TodoApp, [
    ROUTER_PROVIDERS, HTTP_PROVIDERS,
    provide(APP_BASE_HREF, {useValue : '/' })
]);

app/index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>angular2-electron</title>
  </head>
  <body>
    <div class="container">
      <todo-app></todo-app>
    </div>
    <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>

    <script src="../build/common.js"></script>
    <script src="../build/angular2.js"></script>
    <script src="../build/app.js"></script>

    <script>
      window.jQuery = window.$ =  require('jquery/dist/jquery.min');
    </script>

    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="resources/style.css">

  </body>
</html>

app/todo-app.component.ts

import { Component } from 'angular2/core';
import { HTTP_PROVIDERS } from 'angular2/http';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import { LoginComponent } from './routes/login/login.component';
import 'rxjs/Rx'; // load the full rxjs

@Component({
    selector: 'todo-app',
    templateUrl: 'todo-app.component.html',
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    { path: '/', name: 'Login', component: LoginComponent, useAsDefault: true}
])
export class TodoApp {}

app/todo-app.component.html

<a [routerLink]="['Login']">todo-app</a>

<router-outlet></router-outlet>

app/routes/login/login.component.ts（简单指令+模板）

import { Component, OnInit } from 'angular2/core';
import { LoginFormComponent } from '../../components/login-form.component';
import 'rxjs/Rx'; // load the full rxjs

@Component({
    templateUrl: './routes/login/login.component.html',
    styleUrls: ['./routes/login/login.component.css'],
    directives: [LoginFormComponent]
})

export class LoginComponent implements OnInit{
    ngOnInit(){
        console.log('login init');
    }
}

非常感谢对此提供的任何帮助，希望有人能指出我做错了什么！ :D

Answer 1

我刚刚弄明白了。您需要使用 HashLocationStrategy 来设置您的 LocationStrategy，基本上与 angular1 中的 html5mode 相同。因为您没有托管节点服务器，所以在您的电子应用程序中，所有 url 都应该类似于：file:///your-file。以下设置应该可以简单地解决您的问题。

bootstrap(AppComponent, [ ROUTER_PROVIDERS, 提供（LocationStrategy，{useClass：HashLocationStrategy}） ]);

useAsDefault 不适用于 Electron + Webpack 实现？ (Angular 2)

useAsDefault not working with Electron + Webpack implementation? (Angular 2)

angular

webpack

electron

chromium