angular - Electron 无法工作的Angular2路线

标签 angular angular2-routing electron

我在angular2中的应用是功能完备的组件。当我尝试将其与 Electron 结合使用时,一切都变得艰难了。我一直在尝试遵循不同的教程,但是它们对我不起作用。任何人都可以向我指出为什么它不起作用的方向。

app/内部的index.html

<html>
 <head>
  <meta charset="utf-8">
  <title>QuizzUmmah</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
<body>
 <h1>Index On</h1>
 <app></app>

 <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>
</body>
</html>

app.ts在app/start/内
///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import { Component, provide } from "angular2/core";
import { ROUTER_DIRECTIVES, RouteConfig, Router, ROUTER_PROVIDERS } from 'angular2/router';
import { APP_BASE_HREF,HashLocationStrategy, Location, LocationStrategy } from '@angular/common';
import { Control } from 'angular2/common';
import { HomeComponent } from '../home/home.component';

@RouteConfig([
 { path: '/home', component: HomeComponent, name: 'HomeComponent' },
 { path: '/**', redirectTo: ['HomeComponent'] }
])

@Component({
  selector: "app",
  template:`<h1>Working</h1>
  <router-outlet></router-outlet>`,
  directives: [ROUTER_DIRECTIVES],
 })

 export class App {}

 bootstrap(App, [
  ROUTER_PROVIDERS,
  provide(APP_BASE_HREF, { useValue: '/' }),
  provide(LocationStrategy, { useClass: HashLocationStrategy })
 ]);

App/home中的HomeComponent
  import { Component} from '@angular/core';
  import { Router } from '@angular/router';

  @Component({
    selector: 'app-home',
    template:  `<h1>Home is working</h1>`,
   })
   export class HomeComponent{

   constructor(){}

   }

最佳答案

只需更改index.html文件的主体,如下所示。在体内使用<base>标记而不使用“/”符号,然后尝试一下。

<body>
    <base href="">
    <h1>Index On</h1>
    <app></app>
    <script src=".....></script>
</body>

关于angular - Electron 无法工作的Angular2路线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41325513/

相关文章:

error-handling - 如何检测网络在Angular 2+中已断开连接

vuejs2 - 在electronic-vue项目中使用boots-vue组件会导致数据属性更改错误

javascript - 混合编译后无法从模块导入

angular - 文件上传进度检查文件是否作为 Angular 7 中的 FormData 发送?

Angular 5 - 复制到剪贴板

单击任何 [routerLink] 时的 Angular 2 事件

javascript - Angular 7 的 addEventListerner 行为不一致

asp.net-mvc - 从 MVC 站点路由到 Angular 2 应用程序

使用 routerLink 的 Angular 2 单元测试组件

javascript - [Electron][OSX] 始终显示托盘图标