useAsDefault不能與Electron + Webpack實現一起工作？（Angular 2）

當我使用webpack作爲module-handler/bundler時，我偶然發現了在Electron（桌面web應用）中實現Angular 2的一個問題。useAsDefault不能與Electron + Webpack實現一起工作？（Angular 2）

我試圖加載一個組件作爲默認路由，當我啓動我的應用程序，但它似乎只被路由到當我使用[routerLink]，即使我指定它是一個默認路由使用「 useAsDefault：true「。所以基本上我想要的是在啓動時顯示模板，但此時僅在按下我的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>

應用程序/待辦事項-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>

應用程序/路由/登錄/ 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

來源

2016-04-22 Viktor Gullmark

我只是想通了。你需要使用HashLocationStrategy來設置你的LocationStrategy，基本上和angular1中的html5mode一樣。因爲你沒有託管節點服務器，所以在你的電子應用程序中，所有的URL都應該是這樣的：file：/// your-file。以下設置應該簡單地解決您的問題。

自舉（AppComponent，[ ROUTER_PROVIDERS，提供（LocationStrategy，{useClass：HashLocationStrategy}） ]）;

來源

2016-05-06 05:13:07 Lin

useAsDefault不能與Electron + Webpack實現一起工作？ （Angular 2）

回答

相關問題

useAsDefault不能與Electron + Webpack實現一起工作？（Angular 2）