Question

当使用webpack作为模块处理程序/捆绑器时，我在电子（桌面web应用程序）中实现Angular 2时遇到了一些问题。

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

我会从相关代码部分发布一些片段，并链接到相关项目的git。 https://github.com/viktorgullmark/TodoApp---Ng2---Electron

我非常感谢你提供任何帮助，因为我现在已经连续几个小时都遇到了同样的问题，感觉就像我已经尝试了一切。

应用/ 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 : '/' })
]);

应用/ 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>

应用/ 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 {}

应用/ 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）

1 个答案:

useAsDefault无法使用Electron + Webpack实现？ （Angular 2）

1 个答案:

useAsDefault无法使用Electron + Webpack实现？（Angular 2）