同一项目的角度AOT和JIT

2 回答

• 0

  试试这个：

  import { Compiler, COMPILER_OPTIONS, CompilerFactory, NgModule } from '@angular/core';
      import { BrowserModule, } from '@angular/platform-browser';
      import { FormsModule } from '@angular/forms';
  
      import { AppComponent } from './app.component';
      import { HelloComponent } from './hello.component';
  
  
      import { JitCompilerFactory } from '@angular/platform-browser-dynamic';
  
      export function createCompiler(compilerFactory: CompilerFactory) {
        return compilerFactory.createCompiler();
      }
  
  
      @NgModule({
        providers: [
          { provide: COMPILER_OPTIONS, useValue: {}, multi: true },
          { provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS] },
          { provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] }
        ],
        imports: [BrowserModule, FormsModule],
        declarations: [AppComponent, HelloComponent],
        bootstrap: [AppComponent]
      })
      export class AppModule { }
  

  CODE EXAMPLE

  但是JitCompiler仍然无法创建依赖注入树 . 我怀疑@Injectable是从AOT部分删除的 . 但我不能做你的伎俩 .

  在上面的代码示例中，NgModule和Component没有 decorators . 所以，这意味着没有 @Injectable 也无法注入 providers . 那么为什么我们不为 @NgModule 和 @Component @Injectable decorator编写并只将其写入 Services ？因为，他们有装饰器（@ NgModule / @ Components）， Services 没有 . 他们的装饰者足以让Angular知道他们是 injectable .

  CODE EXAMPLE与DI .

  UPDATE: 创建自定义包装器 CustomNgModule ， CustomComponent 和 CustomInjectable 装饰器：

  export function CustomComponent(annotation: any) {
      return function (target: Function) {
          const component = new Component(annotation);
          Component(component)(target);
  
      };
  }
  
  export function CustomNgModule(annotation: any) {
      return function (target: Function) {
          const ngModule = new NgModule(annotation);
          NgModule(ngModule)(target);
      };
  }
  
  
  export function CustomInjectable() {
    return function (target: Function) {
        const injectable = new Injectable();
        Injectable()(target);
    };
  }
  

  使用AOT标志构建时，Angular-CLI看起来像是从需要动态编译的代码部分中清除本机装饰器的包 . 并且您希望在具有DI功能的AOT中使用组件动态编译模块，将自然装饰器（NgModule / Injectable ...）替换为自定义装饰器以在AOT编译模式下保留装饰器：

  lazy.module.ts:

  @CustomComponent({
    selector: 'lazy-component',
    template: 'Lazy-loaded component. name:  {{name}}.Service 
             {{service.foo()}}!',
    //providers: [SampleService]
  })
  export class LazyComponent {
    name;
    constructor(public service: SampleService) {
      console.log(service);
      console.log(service.foo());
    }
  }
  
  @CustomNgModule({
    declarations: [LazyComponent],
    providers: [SampleService]
  })
  export class LazyModule {
  }
  

  app.component.ts:

  ...
   ngAfterViewInit() {
  
      this.compiler.compileModuleAndAllComponentsAsync(LazyModule)
        .then((factories) => {
          const f = factories.componentFactories[0];    
          const cmpRef = this.vc.createComponent(f);    
          cmpRef.instance.name = 'dynamic';
        });
    }
  ...
  

  CODE EXAMPLE 3

  回复于 2024-04-29T01:13:36+08:00
• 3

  我最近遇到了同样的问题，现在放弃了尝试解决的问题 .

  Afaik这不能（现在）因为angular removes metadata on production build .

  我们应该在8896关闭后再试一次 .

  回复于 2024-04-29T01:13:36+08:00