useAsDefault 不能与 Electron + Webpack 实现一起使用？（角度 2）答案

【问题标题】：useAsDefault not working with Electron + Webpack implementation? (Angular 2)useAsDefault 不能与 Electron + Webpack 实现一起使用？（角度 2）
【发布时间】：2016-08-16 15:12:15
【问题描述】：

当使用 webpack 作为模块处理程序/捆绑程序时，我偶然发现了在 Electron（桌面 Web 应用程序）中实现 Angular 2 的一些问题。

我尝试在启动应用程序时将组件加载为默认路由，但它似乎仅在我使用 [routerLink] 时才被路由到，即使我使用“useAsDefault”将其指定为默认路由：真的”。所以基本上我想要的是在启动时显示的模板，但此时它仅在我按下 todo-app.component.html 中的链接时显示。

我将从相关代码部分发布一些 sn-ps，并链接到相关项目的 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

【问题讨论】：

标签： angular webpack electron chromium

【解决方案1】：

我只是想通了。你需要使用HashLocationStrategy来设置你的LocationStrategy，基本上和angular1中的html5mode一样。因为您没有托管节点服务器，所以在您的电子应用程序中，所有 url 应该类似于：file:///your-file。以下设置应该可以轻松解决您的问题。

引导程序（应用程序组件，[ ROUTER_PROVIDERS, 提供（LocationStrategy，{useClass：HashLocationStrategy}） ]);

【讨论】：