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'
};

我对 electron 和 angular2 都是新手！非常感谢任何支持 - 我不喜欢必须使用内联模板。

在尝试下面的答案 1 的建议后，结果如下：

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

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

export class MenuComponent {

}

这是构建目录：

Answer 1

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

templateUrl: 'menu/menu.component.html'

Answer 2

好吧，我做了一些研究，发现问题出在您在 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

Warning: make sure that all angular2-template-loader and raw-loader dependencies are satisfied properly, otherwise, it won't be able to be used by webpack.config.

Note 1: angular2-template-loader require reflect-metadata@0.1.3 so you must change your package.json dependency and run npm install again.

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

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

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

Angular2 / Electron application components cannot find template HTML file

javascript

node.js

electron

angular