Angular2 / Electron应用程序组件找不到模板HTML文件

Question

我已经设置了一个与此视频中的说明类似的angular2 / Electron应用：https://www.youtube.com/watch?v=pLPCuFFeKOU

我在app / menu文件夹中有一个名为MenuComponent的组件。当我将模板放入自己的HTML文件并加载我的电子应用程序时，它会失败并显示错误：

    xhr_impl.js:40 GET file:///menu.component.html
 net::ERR_FILE_NOT_FOUNDXHRImpl.get @ xhr_impl.js:40DirectiveNormalizer.normalizeTemplate @ directive_normalizer.js:51DirectiveNormalizer.normalizeDirective @ directive_normalizer.js:24(anonymous function) @ runtime_compiler.js:60RuntimeCompiler._loadAndCompileComponent @ runtime_compiler.js:60(anonymous function) @ runtime_compiler.js:83RuntimeCompiler._compileComponent @ runtime_compiler.js:76(anonymous function) @ runtime_compiler.js:66ZoneDelegate.invoke @ zone-node.js:232onInvoke @ ng_zone_impl.js:45ZoneDelegate.invoke @ zone-node.js:231Zone.run @ zone-node.js:114(anonymous function) @ zone-node.js:502ZoneDelegate.invokeTask @ zone-node.js:265onInvokeTask @ ng_zone_impl.js:36ZoneDelegate.invokeTask @ zone-node.js:264Zone.runTask @ zone-node.js:154drainMicroTaskQueue @ zone-node.js:401
browser_adapter.js:86 EXCEPTION: Failed to load /menu.component.html
browser_adapter.js:77 EXCEPTION: Failed to load /menu.component.htmlBrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:296ZoneDelegate.invoke @ zone-node.js:232onInvoke @ ng_zone_impl.js:45ZoneDelegate.invoke @ zone-node.js:231Zone.run @ zone-node.js:114(anonymous function) @ zone-node.js:502ZoneDelegate.invokeTask @ zone-node.js:265onInvokeTask @ ng_zone_impl.js:36ZoneDelegate.invokeTask @ zone-node.js:264Zone.runTask @ zone-node.js:154drainMicroTaskQueue @ zone-node.js:401
browser_adapter.js:86 EXCEPTION: Error: Uncaught (in promise): Failed to load /menu.component.html
browser_adapter.js:77 EXCEPTION: Error: Uncaught (in promise): Failed to load /menu.component.htmlBrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone-node.js:236Zone.runGuarded @ zone-node.js:131_loop_1 @ zone-node.js:412drainMicroTaskQueue @ zone-node.js:421
browser_adapter.js:77 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:59(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone-node.js:236Zone.runGuarded @ zone-node.js:131_loop_1 @ zone-node.js:412drainMicroTaskQueue @ zone-node.js:421
browser_adapter.js:77 Error: Uncaught (in promise): Failed to load /menu.component.html
    at resolvePromise (zone-node.js:468)
    at PromiseCompleter.reject (zone-node.js:445)
    at application_ref.js:295
    at ZoneDelegate.invoke (zone-node.js:232)
    at Object.onInvoke (ng_zone_impl.js:45)
    at ZoneDelegate.invoke (zone-node.js:231)
    at Zone.run (zone-node.js:114)
    at zone-node.js:502
    at ZoneDelegate.invokeTask (zone-node.js:265)
    at Object.onInvokeTask (ng_zone_impl.js:36)BrowserDomAdapter.logError @ browser_adapter.js:77ExceptionHandler.call @ exception_handler.js:60(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:112onError @ ng_zone.js:120onHandleError @ ng_zone_impl.js:66ZoneDelegate.handleError @ zone-node.js:236Zone.runGuarded @ zone-node.js:131_loop_1 @ zone-node.js:412drainMicroTaskQueue @ zone-node.js:421
zone-node.js:388 Unhandled Promise rejection: Failed to load /menu.component.html ; Zone: angular ; Task: Promise.then ; Value: Failed to load /menu.component.html undefinedconsoleError @ zone-node.js:388_loop_1 @ zone-node.js:417drainMicroTaskQueue @ zone-node.js:421
zone-node.js:390 Error: Uncaught (in promise): Failed to load /menu.component.html(…)consoleError @ zone-node.js:390_loop_1 @ zone-node.js:417drainMicroTaskQueue @ zone-node.js:421```

我已经尝试将我的模板html内联，并且一切正常。

我的项目树如下所示：

当我尝试将模板放在自己的HTML文件中时 - menu.component.html这是menu.component.ts中的@Component元数据：

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'ct-menu',
  templateUrl: 'menu.component.html'
})

export class MenuComponent {

}

该项目正在使用webpack - 并编译到root / build文件夹中。 webpack.config.js文件包含以下内容：

var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;

module.exports = {
  devtool: 'source-map',
  debug: true,

  entry: {
    'angular2': [
      'rxjs',
      'reflect-metadata',
      'zone.js',
      '@angular/core',
      '@angular/router',
      '@angular/http'
    ],
    'app': './app/app'
  },

  output: {
    path: __dirname + '/build/',
    publicPath: 'build/',
    filename: '[name].js',
    sourceMapFilename: '[name].js.map',
    chunkFilename: '[id].chunk.js'
  },

  resolve: {
    extensions: ['','.ts','.js','.json', '.css', '.html']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts',
        exclude: [ /node_modules/ ]
      }
    ]
  },

  plugins: [
    new CommonsChunkPlugin({ name: 'angular2', filename: 'angular2.js', minChunks: Infinity }),
    new CommonsChunkPlugin({ name: 'common',   filename: 'common.js' })
    ],
  target: 'electron-renderer'
};

我是电子和angular2的新手！任何支持都将受到高度赞赏 - 我不喜欢使用内联模板。

在尝试下面的答案1的建议之后，这就是结果：

    import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'ct-menu',
  templateUrl: 'menu/menu.component.html'
})

export class MenuComponent {

}

这是构建目录：

Answer 1

我做了一点研究，发现问题来自于您在webpack配置中使用的加载程序。使用webpack时，您不必使用moduleId（仅SystemJS需要它），因为webpack拥有自己的angular2加载程序模板angular2-template-loader。此外，还有raw-loader html和css个文件。

首先，从moduleId声明中删除component。

...
@Component({
  selector: 'ct-menu',
  templateUrl: 'menu.component.html'
})

export class MenuComponent {
...

其次，您必须安装angular2-template-loader和raw-loader。

npm install --save-dev angular2-template-loader raw-loader

  

警告：确保正确满足所有angular2-template-loader和raw-loader个相关性，否则{{1}无法使用它}。

     

注1 ：webpack.config需要angular2-template-loader，因此您必须更改reflect-metadata@0.1.3依赖关系并再次运行package.json。

最后，更改npm install以使用适当的加载器来处理打字稿和静态文件。那么，您就可以运行webpack.config然后webpack。

npm start

Answer 2

您必须编写相对于索引文件的路径：

templateUrl: 'menu/menu.component.html'