相关疑难解决方法(0)

如何使用/创建动态模板来使用Angular 2.0编译动态组件?

我想动态创建模板.这应该用于ComponentType运行时构建一个并在托管组件内部放置(甚至替换)它.

直到我使用RC4 ComponentResolver,但RC5我收到消息:

ComponentResolver不推荐用于动态编译.使用ComponentFactoryResolver连同@NgModule/@Component.entryComponents或ANALYZE_FOR_ENTRY_COMPONENTS提供商,而不是.对于仅运行时编译,您也可以使用Compiler.compileComponentSync/Async.

我发现了这个(官方的angular2)文件

Angular 2同步动态组件创建

并了解我可以使用其中之一

  • 一种动态的ngIfComponentFactoryResolver.如果我将已知组件传递到托管内部@Component({entryComponents: [comp1, comp2], ...})- 我可以使用.resolveComponentFactory(componentToRender);
  • 真正的运行时编译,带Compiler...

但问题是如何使用它Compiler?上面的注释说我应该打电话:Compiler.compileComponentSync/Async- 那怎么样?

例如.我想为一种设置创建(基于一些配置条件)这种模板

<form>
   <string-editor
     [propertyName]="'code'"
     [entity]="entity"
   ></string-editor>
   <string-editor
     [propertyName]="'description'"
     [entity]="entity"
   ></string-editor>
   ...
Run Code Online (Sandbox Code Playgroud)

在另一种情况下这个(string-editor被替换text-editor)

<form>
   <text-editor
     [propertyName]="'code'"
     [entity]="entity"
   ></text-editor>
   ...
Run Code Online (Sandbox Code Playgroud)

等等(editors属性类型的不同数量/日期/引用,跳过一些用户的某些属性......).即这是一个例子,真正的配置可以生成更多不同和复杂的模板.

该 …

compilation typescript angular2-compiler angular

185
推荐指数
10
解决办法
13万
查看次数

例外:未加载运行时编译器

版本。

@ angular / cli @ 1.0.0-rc.2

复制步骤。

ng build -prod -e prod

故障给出的日志。

vendor.380a744….bundle.js:218 Error: Runtime compiler is not loaded
    at new Error (native)
    at Error.d (http://localhost:9000/portal/assets/dist/polyfills.a61f849adcea6ec74b69.bundle.js:36:1731)
    at r (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:1410:3338)
    at t.compileModuleAndAllComponentsAsync (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:1417:702)
    at e.ngOnChanges (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:1171229)
    at e.ngDoCheck (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:914180)
    at t.GGjx.t.detectChangesInternal (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:332790)
    at t.R2h3.t.detectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5749)
    at t.Sqya.t.detectChangesInNestedViews (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:667:780)
    at t.GGjx.t.detectChangesInternal (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:329907)
    at t.R2h3.t.detectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5749)
    at t.R2h3.t.internalDetectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5542)
    at t.YSmj.t.detectChangesInternal (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:662563)
    at t.R2h3.t.detectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5749)
    at t.Sqya.t.detectChangesInNestedViews (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:667:780)
Run Code Online (Sandbox Code Playgroud)

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "Origianlly fomr a webpack starter for …
Run Code Online (Sandbox Code Playgroud)

angular-cli angular

7
推荐指数
2
解决办法
9112
查看次数