javascript - Angular2 test "provide => use value" -

i have following code invoke angular2

import { platformbrowserdynamic } "@angular/platform-browser-dynamic"; import { appmodule } "./src/app"; export function runangular2app(legacymodel: any) {        platformbrowserdynamic([            { provide: "legacymodel", usevalue: model }        ]).bootstrapmodule(appmodule)        .then(success => console.log("ng2 bootstrap success"))        .catch(err => console.error(err)); } 

and somewhere invoking in manner -

    var legacymodel = {}; // data     require(["myangular2app"], function(app) {        app.runangular2app(legacymodel); // input app     }); 

header.component.ts , in component use legacy model -

import { component, viewencapsulation, inject } '@angular/core';  @component({   selector: 'app-header',   encapsulation: viewencapsulation.emulated,   styleurls: [ './header.less' ],   templateurl: './header.html' }) export class headercomponent {     public eventtitle;      constructor(@inject("appmodel") private appmodel) {         this.eventtitle = this.appmodel.get("eventtitle");     } } 

now problem when testing component -

header.component.spec.ts  import {} 'jasmine';  import { componentfixture, testbed, async } '@angular/core/testing'; import { }              '@angular/platform-browser'; import { debugelement }    '@angular/core';  import { headercomponent } './header.component';    describe('headercomponent', () => {      let comp:    headercomponent;     let fixture: componentfixture<headercomponent>;     let de:      debugelement;     let el:      htmlelement;      // async beforeeach     beforeeach(async(() => {         testbed.configuretestingmodule({             declarations: [ headercomponent ]           })         .compilecomponents();  // compile template , css     }));      // synchronous beforeeach     beforeeach(() => {         fixture = testbed.createcomponent(headercomponent);          comp = fixture.componentinstance; // headercomponent test instance          de = fixture.debugelement.query(by.css('.title'));         el = de.nativeelement;     });      it('should display event title', () => {         fixture.detectchanges();         expect(el.textcontent).tocontain(comp.eventtitle);     });      it('should display different event title', () => {         comp.eventtitle = "angular2 moderator dashboard";         fixture.detectchanges();         expect(el.textcontent).tocontain("angular2 moderator dashboard");     });  }); 

i following error -

error: no provider appmodel! in spec.bundle.ts (line 4110)

since appmodel not service not able inject it.

how inject appmodel tests can run?

behind implementation question appears architecture question. see term "legacy model" -- trying test new version of model? component know how handle both model versions? angular service injection pattern not intended models, because 2 different models typically have different interfaces, , ineligible dependency injection, requires different implementations have same interface.

depending on answers above questions, imagine @ least 2 reasonable paths forward you:

(1) if indeed trying test 2 versions of model, should forget dependency injection , use standard imports like:

import { appmodel } './path/to/appmodel'; import { legacymodel } './path/to/legacymodel'; 

then can test how component responds both model implementations.

(2) if, however, "models" both have same interface, perhaps single function can see snippets:

get(eventtitle: string) 

...then in case introduce new service here, , have component invoke service instead of model directly. service appropriate level of abstraction when have multiple implementations, , can have both new , legacy implementation of service, injected appropriate app or tests (your tests should test both implementations until ready retire legacy version).