[英]Angular 2 - Karma cannot find the external template or style file
文件结构(这是来自Angular 2官方网站的quickstarter项目):
刚开始时,启动Karma时出现错误,提示无法在/ @ angular /下找到两个文件。
我发现我必须更改systemjs.config.js中的路径才能使其工作:
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': '/base/node_modules/' <<<<<<<------ Vincent: to be able to run the test,
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
因此,至少Karma现在可以运行,我可以运行其他测试。 但是,组件测试失败,因为它找不到组件的外部模板和样式文件。
我曾经能够通过在Chrome中打开http:// localhost:9876 / base / src / app / app.component.html来打开html,但现在找不到了。
尝试了以下答案: https : //stackoverflow.com/a/39909929/3634727 ,以及此处的所有解决方案: 错误:未被发现(承诺):无法加载login.component.html ,没有运气。
我的第一个问题是,让我们搁置设置,在浏览器中打开app.component.html的正确URL是什么? http:// localhost:9876 / src / app / app.component.html不起作用。
我已解决它,并希望分享我发现的内容。
首先,要回答我自己的第一个问题,URI( http:// localhost:9876 / base / src / app / app.component.html )是正确的,Karma通过此URI解决了文件。 重新启动PC后,可以直接在Chrome中打开它来访问它。
Karma提供的根路径与用于运行应用程序的根路径不同,因此,一个好的做法是在组件的注释中为外部模板和样式文件使用相对路径,例如:
// imports...
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [RuntimeSettingsService]
})
export class AppComponent implements OnInit {
//...
}
在两种情况下都可以使用根路径的设置。 有关更多详细信息,请参阅此博客: 使用Jasmine&Karma在Angular 2快速入门示例上运行单元测试 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.