我已经设置了一个与此视频中的说明类似的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 {
}
这是构建目录:
答案 0 :(得分: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
答案 1 :(得分:-1)
您必须编写相对于索引文件的路径:
templateUrl: 'menu/menu.component.html'