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

我已经设置了一个angular2/Electron应用程序，类似于本视频中的说明：

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

    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，并编译到根/生成文件夹中。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'
};

我对electron和angular2都是新手！任何支持将不胜感激-我不喜欢使用内联模板

---

尝试回答1的以下建议后，结果如下：

---

这是生成目录：

---

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

templateUrl: 'menu/menu.component.html'

---

我做了一些研究，发现问题出在网页配置中使用的加载程序。当使用

webpack

时，您不必使用

moduleId

（它仅适用于

SystemJS

），因为webpack有自己的angular2模板加载程序，即

angular2模板加载程序

。此外，还有用于

html

和

css

文件的

raw加载程序

因此，首先，从
组件
声明中删除
moduleId

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

export class MenuComponent {
...

其次，您必须安装
angular2模板加载器
和
raw加载器

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

警告：确保正确满足所有
angular2模板加载程序
和
原始加载程序
的依赖关系，否则，
webpack.config
将无法使用它

注1：
angular2模板加载器
require
reflect-metadata@0.1.3
因此，您必须更改您的
包.json
依赖项，然后再次运行
npm install

最后，更改
webpack.config
以对typescript和静态文件使用适当的加载程序。这样，您就可以运行
webpack
，然后运行
npm start

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: ['ts', 'angular2-template-loader'],
            exclude: [/\.(spec|e2e)\.ts$/]
        },
        {
            test: /\.(html|css)$/,
            loader: 'raw-loader'
        }
    ]
}

那么
？它实际上以某种方式破坏了一切。“它”将默认的相对基本路径设置为html中使用的所有路径，因此它肯定会破坏一切。因此，请确保它的目标是正确的路径。但是我认为您应该显示您的
构建
输出目录，它就是从那里运行的。嗯，所以electron从
文件：//
加载您的页面。试试这个
叛逆。我已经回答了你的问题，希望这有帮助：o。如果我是你，我会开始悬赏；-）当您使用
moduleId:module.id
来允许相对于组件的路径时，这是不必要的。感谢您的评论：）这对我不起作用-请查看更新的问题，在这里我将显示如何处理此问题。当您使用moduleId:module.id时，然后使用templateUrl:'menu/menu.component.html'它可以工作-太棒了！我是否应该将排除节点模块行包括在上面的webpack配置中？@renegaden好吧，这取决于您，排除是为了防止angular2测试文件（
app.component.spec.ts
，等等）在具有
.ts
扩展名后加载，如果您没有测试，可以删除它，但这根本不是问题。但是我原来的webpack.config.js在从加载程序中排除时有一行exclude:[/node\u modules/]吗？我不知道这会有什么不同？我认为当不使用chuck插件时，webpack可以加载条目上指定的所有内容，包括note_模块中不必要的文件，但我认为这种情况下只会捆绑common、angular2和应用程序。但是最好排除node_模块如果您使用类似node的libs，这可能会导致问题，请注意，
/node_modules/
是一个正则表达式，它排除了声音越大可能找到的所有node_模块匹配项。@RenegadeAndy似乎没有必要包括这一点，如果node_模块成为问题，您会很快注意到。我稍后会检查你的下一个问题哈哈：{D
module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: ['ts', 'angular2-template-loader'],
            exclude: [/\.(spec|e2e)\.ts$/]
        },
        {
            test: /\.(html|css)$/,
            loader: 'raw-loader'
        }
    ]
}