1

I'm trying to use storybook with my hybrid (Angular + angularjs) app.

import { AjsJsDirective } from './ajs-js.directive';
import { Component } from '@angular/core';
import { storiesOf, moduleMetadata } from '@storybook/angular';
import { TestChangesComponent } from './test-changes/test-changes.component';
import { UpgradeModule, setAngularJSGlobal } from '@angular/upgrade/static';
import * as angular from 'angular';

setAngularJSGlobal(angular);

@Component({
  template: `<app-ajs-js-directive></app-ajs-js-directive>`
})
class HybridWrapperComponent{}

storiesOf('Test', module)
  .addDecorator(
    moduleMetadata({
      declarations: [
        HybridWrapperComponent,
        AjsJsDirective,
        TestChangesComponent
      ],
      imports: [
        UpgradeModule
      ],
      providers: [
        {
          provide: '$scope',
          useExisting: '$rootScope'
        }
      ]
    })
  )
  .add('test angular', () => ({
    component: TestChangesComponent,
  }))
  .add('test hybrid', () => ({
    component: HybridWrapperComponent,
  }));

My Angular component works. But my angularjs component fails with:

HybridWrapperComponent.html:1 ERROR Error: Trying to get the AngularJS injector before it being set.

at injectorFactory (static.js:893)
at _callFactory (core.js:20295)
at _createProviderInstance (core.js:20253)
at resolveNgModuleDep (core.js:20214)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20904)
at Object.resolveDep (core.js:21275)
at Injector_.push../node_modules/@angular/core/fesm5/core.js.Injector_.get (core.js:20763)
at new UpgradeHelper (static.js:1122)
at new UpgradeComponent (static.js:1440)
at new AjsJsDirective (ajs-js.directive.ts:12)

I understand that this part is missing:

@NgModule({...})
export class AppModule {
  constructor(
    private upgrade: UpgradeModule
  ) {
    this.upgrade.bootstrap(document.body, ['ajs'], { strictDi: true });
  }
 }

But how do I add it to storybook module?

Have you had experience using storybook for angular hybrid applications?

Cheers

P.S. How's the weather? Stack overflow want's more text that is not code...

4

0 回答 0