首页 文章

Angular 2 - Karma无法找到外部模板或样式文件

提问于
浏览
0

文件结构(这是Angular 2官方网站的快速启动项目):

enter image description here

在一开始,当启动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现在工作,我可以运行其他测试 . 但是,组件测试失败,因为它无法找到组件的外部模板和样式文件 .

enter image description here

我曾经能够在我的Chrome中打开html打开html:http://localhost:9876/base/src/app/app.component.html,再也找不到了 .

试过这个答案:https://stackoverflow.com/a/39909929/3634727,这里的所有解决方案:Error: Uncaught (in promise): Failed to load login.component.html,没有运气 .

我的第一个问题是,让我们把设置放在一边,在我的浏览器中打开app.component.html的正确URL是什么? http://localhost:9876/src/app/app.component.html不起作用 .

1 回答

  • 0

    我解决了它,想分享我发现的东西 .

    首先,回答我自己的No.1问题,URI(http://localhost:9876/base/src/app/app.component.html)是正确的,Karma通过这个URI解决了这个问题 . 重新启动我的电脑后,我可以直接在我的Chrome中打开它来访问它 .

    Karma所服务的根路径与运行应用程序的根路径不同,因此,一个好的做法是在组件的注释中使用外部模板和样式文件的相对路径,如:

    // imports...
    
    @Component({
        selector: 'my-app',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
        providers: [RuntimeSettingsService]
    })
    export class AppComponent implements OnInit {
        //...
    }
    

    它适用于两种情况下的根路径设置 . 有关详细信息,请参阅此博客:Run Unit Tests On Angular 2 Quick-Start Example With Jasmine & Karma .

相关问题