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

我已经安装了类似于这个video中的解释的angular2 / Electron应用程序： https ： //www.youtube.com/watch？v = pLPCuFFeKOU

我有一个名为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 – 并编译到根/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的build议后，这是结果：

  import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'ct-menu', templateUrl: 'menu/menu.component.html' }) export class MenuComponent { } 

---

这是build立目录：

Answer 1

那么我已经做了一些调查，并发现问题来自您正在使用webpack的configuration的加载器。 当使用webpack ，你不必使用moduleId （它只需要SystemJS ），因为webpack有自己的angular2模板加载器，它是angular2-template-loader 。 另外，还有html和css文件的raw-loader 。

所以首先，从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将无法使用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

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

 templateUrl: 'menu/menu.component.html'