Question

我正在尝试在混合（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错误错误：尝试在设置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 });
  }
 }

但是如何将其添加到故事书模块中？

您是否有使用故事书进行角度混合应用的经验？

欢呼

P.S。天气怎么样？堆栈溢出想要更多不是代码的文本...

将Storybook与混合角度应用程序一起使用

0 个答案: