ハイブリッド (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天気はどうですか?スタック オーバーフロー コードではないテキストがもっと必要です...