angular 2“失败:无法读取未定义的属性“替换""；运行 ng 测试时 [英] angular 2 "Failed: Cannot read property 'replace' of undefined" when running ng test
问题描述
我已经检查了这个问题的 github 问题，并查看了各种堆栈溢出问题和博客等内容，但我找不到解决为什么在我的 angular 2 应用程序中运行ng test"时出现此错误的解决方案.
I have checked the github issues for this issue and looked around on various stack overflow questions and blogs and stuff, and I can't find a solution to why I get this error when running "ng test" in my angular 2 app.
测试如下所示:
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterModule } from "@angular/router";
import { Location,LocationStrategy } from "@angular/common";
describe('App: MemberAdmin', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
imports:[
RouterModule
],
providers:[
Location,
LocationStrategy
]
});
});
it('should create the app', async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app works!'`, async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app.loggedIn).toEqual(false);
}));
});
我的 package.json 看起来像这样:
My package.json looks like this:
{
"name": "member-admin",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"postinstall": "typings install",
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^2.4.10",
"@angular/compiler": "^2.3.1",
"@angular/compiler-cli": "^2.3.1",
"@angular/core": "^2.4.10",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.4.10",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "~3.1.0",
"angular-calendar": "^0.4.0",
"angular2-datatable": "^0.5.2",
"angular2-google-maps": "^0.16.0",
"bootstrap-datepicker": "^1.6.4",
"bootstrap-timepicker": "^0.5.2",
"core-js": "^2.4.1",
"mydatepicker": "^1.7.7",
"ng2-datepicker": "^1.8.2",
"ng2-datetime": "^1.2.2",
"ng2-facebook-sdk": "^2.1.1",
"ng2-file-upload": "^1.1.4-2",
"rxjs": "5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.8"
},
"devDependencies": {
"@angular/cli": "^1.0.0",
"@types/jasmine": "^2.2.30",
"@types/jquery": "^2.0.34",
"@types/node": "^6.0.42",
"awesome-typescript-loader": "2.2.1",
"codelyzer": "1.0.0-beta.1",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "2.2.1",
"typings": "1.0.4",
"webdriver-manager": "10.2.5"
}
}
这是运行 ng test 时的输出:
This is the output when running ng test:
ng test 05 04 2017 18:19:47.574:WARN [karma]:没有捕获的浏览器，打开 http://localhost:9876/ 05 04 2017 18:19:47.606:INFO [karma]:Karma v1.2.0 服务器于 http://localhost:9876/ 05 04 2017 启动18:19:47.607:INFO [启动器]:无限启动浏览器 Chrome并发 05 04 2017 18:19:47.614:INFO [启动器]:启动浏览器Chrome 05 04 2017 18:19:49.239:INFO [Chrome 56.0.2924 (Mac OS X10.10.5)]:在套接字/#XvtU7IkkctSlo1kYAAAA 上连接，ID 为 74276965 Chrome 56.0.2924 (Mac OS X 10.10.5) 应用程序:MemberAdmin 应创建应用失败失败:无法读取未定义的属性替换"类型错误:无法读取未定义的属性替换"在 _stripIndexHtml (webpack:///~/@angular/common/src/location/location.js:224:0 <-src/test.ts:9952:15)在新位置 (webpack:///~/@angular/common/src/location/location.js:41:0 <-src/test.ts:9769:54)在 DynamicTestModuleInjector.get (/DynamicTestModule/module.ngfactory.js:125:61)在 DynamicTestModuleInjector.getInternal (/DynamicTestModule/module.ngfactory.js:187:48)在 DynamicTestModuleInjector.NgModuleInjector.get (webpack:///~/@angular/core/src/linker/ng_module_factory.js:139:25 <-src/test.ts:19158:44)在 TestBed.get (webpack:///~/@angular/core/bundles/core-testing.umd.js:826:0 <-src/test.ts:6078:51)在 CompiledTemplate.proxyViewClass.AppView.injectorGet (webpack:///~/@angular/core/src/linker/view.js:152:0 <-src/test.ts:29850:45)在 CompiledTemplate.proxyViewClass.DebugAppView.injectorGet(webpack:///~/@angular/core/src/linker/view.js:580:0 <-src/test.ts:30278:49)在 CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal(/DynamicTestModule/AppComponent/host.ngfactory.js:15:63)在 CompiledTemplate.proxyViewClass.AppView.createHostView (webpack:///~/@angular/core/src/linker/view.js:108:0 <-src/test.ts:29806:21)在 CompiledTemplate.proxyViewClass.DebugAppView.createHostView(webpack:///~/@angular/core/src/linker/view.js:564:0 <-src/test.ts:30262:52)在 ComponentFactory.create (webpack:///~/@angular/core/src/linker/component_factory.js:202:0 <-src/test.ts:13033:25)在 initComponent (webpack:///~/@angular/core/bundles/core-testing.umd.js:865:0 <-src/test.ts:6117:53)在 ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:334:0 <- src/test.ts:37048:26)在 AsyncTestZoneSpec.onInvoke (webpack:///~/zone.js/dist/async-test.js:49:0 <- src/test.ts:23684:39)Chrome 56.0.2924 (Mac OS X 10.10.5) 应用程序:MemberAdmin 应具有标题应用程序有效！"失败的失败:无法读取未定义的属性替换"类型错误:无法读取未定义的属性替换"在 _stripIndexHtml (webpack:///~/@angular/common/src/location/location.js:224:0 <-src/test.ts:9952:15)在新位置 (webpack:///~/@angular/common/src/location/location.js:41:0 <-src/test.ts:9769:54)在 DynamicTestModuleInjector.get (/DynamicTestModule/module.ngfactory.js:125:61)在 DynamicTestModuleInjector.getInternal (/DynamicTestModule/module.ngfactory.js:187:48)在 DynamicTestModuleInjector.NgModuleInjector.get (webpack:///~/@angular/core/src/linker/ng_module_factory.js:139:25 <-src/test.ts:19158:44)在 TestBed.get (webpack:///~/@angular/core/bundles/core-testing.umd.js:826:0 <-src/test.ts:6078:51)在 CompiledTemplate.proxyViewClass.AppView.injectorGet (webpack:///~/@angular/core/src/linker/view.js:152:0 <-src/test.ts:29850:45)在 CompiledTemplate.proxyViewClass.DebugAppView.injectorGet(webpack:///~/@angular/core/src/linker/view.js:580:0 <-src/test.ts:30278:49)在 CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal(/DynamicTestModule/AppComponent/host.ngfactory.js:15:63)在 CompiledTemplate.proxyViewClass.AppView.createHostView (webpack:///~/@angular/core/src/linker/view.js:108:0 <-src/test.ts:29806:21)在 CompiledTemplate.proxyViewClass.DebugAppView.createHostView(webpack:///~/@angular/core/src/linker/view.js:564:0 <-src/test.ts:30262:52)在 ComponentFactory.create (webpack:///~/@angular/core/src/linker/component_factory.js:202:0 <-src/test.ts:13033:25)在 initComponent (webpack:///~/@angular/core/bundles/core-testing.umd.js:865:0 <-src/test.ts:6117:53)在 ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:334:0 <- src/test.ts:37048:26)在 AsyncTestZoneSpec.onInvoke (webpack:///~/zone.js/dist/async-test.js:49:0 <- src/test.ts:23684:39)Chrome 56.0.2924 (Mac OS X 10.10.5):执行 3 of 3 (2 FAILED) (0.638秒/0.469 秒) Chrome 56.0.2924 (Mac OS X 10.10.5) 错误
Disconnectedundefined Chrome 56.0.2924 (Mac OS X 10.10.5):已执行 3共 3 个(2 个失败)(0.638 秒/0.469 秒)
ng test 05 04 2017 18:19:47.574:WARN [karma]: No captured browser, open http://localhost:9876/ 05 04 2017 18:19:47.606:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/ 05 04 2017 18:19:47.607:INFO [launcher]: Launching browser Chrome with unlimited concurrency 05 04 2017 18:19:47.614:INFO [launcher]: Starting browser Chrome 05 04 2017 18:19:49.239:INFO [Chrome 56.0.2924 (Mac OS X 10.10.5)]: Connected on socket /#XvtU7IkkctSlo1kYAAAA with id 74276965 Chrome 56.0.2924 (Mac OS X 10.10.5) App: MemberAdmin should create the app FAILED Failed: Cannot read property 'replace' of undefined TypeError: Cannot read property 'replace' of undefined at _stripIndexHtml (webpack:///~/@angular/common/src/location/location.js:224:0 <- src/test.ts:9952:15) at new Location (webpack:///~/@angular/common/src/location/location.js:41:0 <- src/test.ts:9769:54) at DynamicTestModuleInjector.get (/DynamicTestModule/module.ngfactory.js:125:61) at DynamicTestModuleInjector.getInternal (/DynamicTestModule/module.ngfactory.js:187:48) at DynamicTestModuleInjector.NgModuleInjector.get (webpack:///~/@angular/core/src/linker/ng_module_factory.js:139:25 <- src/test.ts:19158:44) at TestBed.get (webpack:///~/@angular/core/bundles/core-testing.umd.js:826:0 <- src/test.ts:6078:51) at CompiledTemplate.proxyViewClass.AppView.injectorGet (webpack:///~/@angular/core/src/linker/view.js:152:0 <- src/test.ts:29850:45) at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (webpack:///~/@angular/core/src/linker/view.js:580:0 <- src/test.ts:30278:49) at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/DynamicTestModule/AppComponent/host.ngfactory.js:15:63) at CompiledTemplate.proxyViewClass.AppView.createHostView (webpack:///~/@angular/core/src/linker/view.js:108:0 <- src/test.ts:29806:21) at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (webpack:///~/@angular/core/src/linker/view.js:564:0 <- src/test.ts:30262:52) at ComponentFactory.create (webpack:///~/@angular/core/src/linker/component_factory.js:202:0 <- src/test.ts:13033:25) at initComponent (webpack:///~/@angular/core/bundles/core-testing.umd.js:865:0 <- src/test.ts:6117:53) at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:334:0 <- src/test.ts:37048:26) at AsyncTestZoneSpec.onInvoke (webpack:///~/zone.js/dist/async-test.js:49:0 <- src/test.ts:23684:39) Chrome 56.0.2924 (Mac OS X 10.10.5) App: MemberAdmin should have as title 'app works!' FAILED Failed: Cannot read property 'replace' of undefined TypeError: Cannot read property 'replace' of undefined at _stripIndexHtml (webpack:///~/@angular/common/src/location/location.js:224:0 <- src/test.ts:9952:15) at new Location (webpack:///~/@angular/common/src/location/location.js:41:0 <- src/test.ts:9769:54) at DynamicTestModuleInjector.get (/DynamicTestModule/module.ngfactory.js:125:61) at DynamicTestModuleInjector.getInternal (/DynamicTestModule/module.ngfactory.js:187:48) at DynamicTestModuleInjector.NgModuleInjector.get (webpack:///~/@angular/core/src/linker/ng_module_factory.js:139:25 <- src/test.ts:19158:44) at TestBed.get (webpack:///~/@angular/core/bundles/core-testing.umd.js:826:0 <- src/test.ts:6078:51) at CompiledTemplate.proxyViewClass.AppView.injectorGet (webpack:///~/@angular/core/src/linker/view.js:152:0 <- src/test.ts:29850:45) at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (webpack:///~/@angular/core/src/linker/view.js:580:0 <- src/test.ts:30278:49) at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/DynamicTestModule/AppComponent/host.ngfactory.js:15:63) at CompiledTemplate.proxyViewClass.AppView.createHostView (webpack:///~/@angular/core/src/linker/view.js:108:0 <- src/test.ts:29806:21) at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (webpack:///~/@angular/core/src/linker/view.js:564:0 <- src/test.ts:30262:52) at ComponentFactory.create (webpack:///~/@angular/core/src/linker/component_factory.js:202:0 <- src/test.ts:13033:25) at initComponent (webpack:///~/@angular/core/bundles/core-testing.umd.js:865:0 <- src/test.ts:6117:53) at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:334:0 <- src/test.ts:37048:26) at AsyncTestZoneSpec.onInvoke (webpack:///~/zone.js/dist/async-test.js:49:0 <- src/test.ts:23684:39) Chrome 56.0.2924 (Mac OS X 10.10.5): Executed 3 of 3 (2 FAILED) (0.638 secs / 0.469 secs) Chrome 56.0.2924 (Mac OS X 10.10.5) ERROR
Disconnectedundefined Chrome 56.0.2924 (Mac OS X 10.10.5): Executed 3 of 3 (2 FAILED) (0.638 secs / 0.469 secs)
推荐答案
我也遇到了这个问题.RouterTestingModule 对我有用，因为我只是测试组件而不是路由.
I ran into this as well. The RouterTestingModule worked for me since I was just testing the component and not routing.
文档内容如下:
* This module sets up the router to be used for testing.
* It provides spy implementations of {@link Location}, {@link LocationStrategy},
* and {@link NgModuleFactoryLoader}.
这里是如何添加它:
import {RouterTestingModule} from '@angular/router/testing';
describe('MyComponent', () => {
...
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
...
```
如果您不需要测试路由并且只测试组件，则不应在这些测试中提供 Location 和 LocationStrategy 提供程序.
You should not provide the Location and LocationStrategy providers in these tests if you don't need to test routing and are only testing the component.
这篇关于angular 2“失败:无法读取未定义的属性“替换""；运行 ng 测试时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
