加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

无法在Angular 2.0.0测试中加载.html

发布时间:2020-12-17 17:42:07 所属栏目:安全 来源:网络整理
导读:我在Angular 2.0.0中遇到了TestBed的问题 beforeEach( async(() = { TestBed.configureTestingModule({ declarations: [ SomethingComponent ] }).compileComponents(); // compile template })); beforeEach(() = { fixture = TestBed.createComponent(Some
我在Angular 2.0.0中遇到了TestBed的问题

beforeEach( async(() => {
        TestBed.configureTestingModule({
            declarations: [
                SomethingComponent
            ]
        }).compileComponents(); // compile template
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(SomethingComponent);
        comp = fixture.componentInstance;
    });

    it('test',async(() => {
        fixture.detectChanges();
        expect(true)
    }));

给定组件:

@Component({
    templateUrl: 'app/components/something/something.component.html'
})

我收到错误:

Firefox 48.0.0 (Mac OS X 10.11.0)
Failed: Uncaught (in promise): Failed to load app/components/something/something.component.html
resolvePromise@node_modules/zone.js/dist/zone.js:429:31
resolvePromise@node_modules/zone.js/dist/zone.js:414:17
scheduleResolveOrReject/<@node_modules/zone.js/dist/zone.js:462:17
ZoneDelegate.prototype.invokeTask@node_modules/zone.js/dist/zone.js:236:23
ProxyZoneSpec.prototype.onInvokeTask@node_modules/zone.js/dist/proxy.js:96:20
ZoneDelegate.prototype.invokeTask@node_modules/zone.js/dist/zone.js:235:23
Zone.prototype.runTask@node_modules/zone.js/dist/zone.js:136:28
drainMicroTaskQueue@node_modules/zone.js/dist/zone.js:368:25
ZoneTask/this.invoke@node_modules/zone.js/dist/zone.js:308:25

我想这可能是因为配置没有正确设置.我正在使用gulp将TypeScript预编译为JavaScript,我有以下项目结构:

|_ grails-app
|_ frontend
  |_ angular
    |_ app
    |    |_ components
    |    |     |_ something
    |    |          |_ something.component.ts
    |    |          |_ something.component.html
    |    |_ model
    |    |_ test
    |    |_ app.module.ts
    |    |_ app.routing.ts
    |    |_ main.ts
    |_ assets
    |_ build
    |    |_ app
    |        |_ components
    |        |      |_ something
    |        |          |_ something.component.html
    |        |          |_ something.component.js
    |        |          |_ something.component.js.map
    |        |_      
    |        |_      
    |        |      
    |_ node_modules
    |_ gulpfile.js
    |_ karma.conf.js
    |_ karma-test-shim.js
    |_ systemjs.config
    |_
    |_
    |

但是,如果我假设html文件是预编译的,并从测试中删除命令.compileComponents(),我会收到以下错误:

Firefox 48.0.0 (Mac OS X 10.11.0)
Error: Cannot create the component SomethingComponent as it was not imported into the testing module!

如果我删除异步,我收到此错误:

Firefox 48.0.0 (Mac OS X 10.11.0)
Error: This test module uses the component SomethingComponent which is using a "templateUrl",but they were never compiled. Please call "TestBed.compileComponents" before your test.

在karma-test-shim.js中,我有:

System.config({
baseURL: '/base/',paths: {
    // paths serve as alias
    'npm:': 'node_modules/'
},map: {
    'app': '/base/build/app/','@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',// angular testing umd bundles
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js','@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js','@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js','@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js','@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js','@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js','@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js','@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',// other libraries
    'rxjs': 'npm:rxjs'
},packages: {
    'app': {
        defaultExtension: 'js'
    },'rxjs': {
        defaultExtension: 'js'
    }
}
});

我希望有人可以帮我弄明白,我在配置上做错了什么.

解决方法

您可以将基本路径i karma.conf.js定义为代理:

// Proxied base paths for loading assets
proxies: {
  // required for component assets fetched by Angular's compiler
  "/app/": '/base/build/app/'
},

资料来源:https://github.com/angular/quickstart

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读