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 文件。

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

...
@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 依赖都正确满足，否则webpack.config 将无法使用它。

注意 1：angular2-template-loader 需要 reflect-metadata@0.1.3，因此您必须更改您的 package.json 依赖项并再次运行 npm install。

最后，更改webpack.config 以对打字稿和静态文件使用正确的加载器。那么，您将能够运行webpack，然后运行npm start。

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

Answer 2

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

templateUrl: 'menu/menu.component.html'