同一项目的角度AOT和JIT
|
在angular5上,我尝试对我的大部分模块/组件进行相同的项目AOT编译……但我有一部分需要进行JIT编译.
对于第二部分,HTML来自Ajax请求,并包含一些必须由angular编译的组件标记.要管理这部分,我使用看起来像这样的指令： export class ArticleLiveDirective implements OnInit,OnChanges,OnDestroy {
// [...]
constructor(
private container: ViewContainerRef,private compiler: Compiler
) { }
// [...]
private addHtmlComponent(template: string,properties: any = {}) {
this.container.clear();
//Force always rootDomElement.
const divTag = document.createElement('div');
divTag.setAttribute('id',this.currentId);
divTag.innerHTML = template;
template = divTag.outerHTML;
// We create dynamic component with injected template
@Component({ template })
class ArticleLIveComponent implements OnInit,OnDestroy {
constructor(
private articleService: ArticleService
) {}
ngOnInit() {}
ngOnChanges(changes: SimpleChanges) {}
ngOnDestroy() {}
goToPage($event: Event,pagination: string) {
this.articleService.askToChangeArticle(pagination);
//Stop propagation
$event.stopPropagation();
return false;
}
}
// we declare module with all dependencies
@NgModule({
declarations: [
ArticleLIveComponent
],imports: [
BrowserModule,MatTabsModule
],providers: []
})
class ArticleLiveModule {}
// we compile it
const mod = this.compiler.compileModuleAndAllComponentsSync(ArticleLiveModule);
const factory = mod.componentFactories.find((comp) =>
comp.componentType === ArticleLIveComponent
);
// fetch instance of fresh crafted component
const component = this.container.createComponent(factory);
// we inject parameter.
Object.assign(component.instance,properties);
}
}
正如您所看到的,我可以使用自定义HTML作为模板调用addHtmlComponent方法在运行时编译新组件. 我的模板看起来像： <div> <h2>Foo bar</h2> <mat-tab-group> <mat-tab label="Tab 1">Content 1</mat-tab> <mat-tab label="Tab 2">Content 2</mat-tab> </mat-tab-group> <p>Other content</p> 一切顺利,直到我切换到AOT编译(我使用：https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack) 可能的原因： 如果要检查角度材料的作用： 然后他们有装载机： 可能是正确的方法,但我不知道如何适应它来管理,动态Tab内容. 编辑：我在这里添加样品：https://github.com/yanis-git/aot-jit-angular(分店大师) 正如您将看到的,AOT编译从bundle中删除了wall编译器,结果如下： Module not found: Error: Can't resolve '@angular/compiler/src/config' 我试图在AppModule上强制compilater Factory,但仍然没有结果. 我在同一个repo上有另一个示例,但在分支“lazy-jit”上,现在我将Compiler嵌入到输出的包中,但是新的错误出现在我面前： ERROR Error: No NgModule metadata found for 'ArticleLiveModule'. 谁看起来与这个问题完全相同：https://github.com/angular/angular/issues/16033
试试这个：
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
在上面的代码示例中,没有NgModule和Component的装饰器.所以,这意味着没有@Injectable也无法注入提供者.那么为什么我们不为@NgModule和@Component @Injectable装饰器编写并只将其写入服务？ CODE EXAMPLE与DI. 更新： 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);
};
}
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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |