1

ハイブリッド (Angular + angularjs) アプリでストーリーブックを使用しようとしています。

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,
  }));

私の Angular コンポーネントは動作します。しかし、私のangularjsコンポーネントは次のように失敗します:

HybridWrapperComponent.html:1 ERROR エラー: AngularJS インジェクターを設定する前に取得しようとしています。

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)

この部分が欠落していることを理解しています:

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

しかし、ストーリーブックモジュールに追加するにはどうすればよいですか?

Angular ハイブリッド アプリケーションに Storybook を使用した経験はありますか?

乾杯

PS天気はどうですか?スタック オーバーフロー コードではないテキストがもっと必要です...

4

0 に答える 0