标签: angular2-compiler

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

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

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

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

Angular 2同步动态组件创建

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

• 一种动态的ngIf用ComponentFactoryResolver.如果我将已知组件传递到托管内部@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>
   ...

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

<form>
   <text-editor
     [propertyName]="'code'"
     [entity]="entity"
   ></text-editor>
   ...

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

该 …

我想手动编译一些包含HTML的指令.$compileAngular 2中的等价物是什么？

例如,在Angular 1中,我可以动态编译HTML片段并将其附加到DOM:

var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);

我创建了一个angular-cli包含AppComponent的项目,如下所示:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

和app.component.html一样

<h1>
  Good Morning, {{title}}
</h1>

因此,当我使用ng build它生成它时会生成一些像这样的文件./dist/main.bundle.js,其中包含一些代码,如下所示 -

/* 586 */
/***/ function(module, exports) {

module.exports = "<h1>\n  Good Morning, {{title}}\n</h1>\n"

/***/ },
/* 587 */

这意味着,在构建时,编译器/ bundle-er正在读取html文件并将它们连接到生成的js文件中.

但在我的情况下,html也是动态的,内容驱动的是服务器端.可以说,我的模板文件不是html,而是app.component.jsp,并且完全驻留在一些不同的服务器或文件夹上.

此JSP文件有时会返回<h1>Good Morning, {{title}}</h1> ,有时还<h1>Good Afternoon, {{title}}</h1>取决于当前的服务器时间.

如何实现这一功能？

我的理解是,我需要定义某种加载器函数说: loadDynamicTemplate(template_url) …

我刚刚将我的项目更新为Angular 2 RC 6.我现在正在尝试使用Ahead of Time(AoT)编译,如博客文章http://angularjs.blogspot.com/中所述,但没有成功.

我在ASP.Net中构建项目时没有使用angular cli.

正如博客文章所暗示的,我已经安装了@ angular/compiler-cli

但是当我尝试从命令提示符运行ngc时,它会出错

'ngc' is not recognized as an internal or external command,
operable program or batch file.


npm run ngc
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "ngc"
npm ERR! node v6.4.0
npm ERR! npm  v3.10.3

npm ERR! missing script: ngc
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following …

我正在尝试使用angular2 编译器动态插入一个组件,只要所有代码都在默认模块中,它就可以正常工作.

但是如果尝试将组件放入其自己的功能模块中,它就会中断.注入的编译器实例(ModuleBoundCompiler)绑定到默认模块而不是特性模块,我无法在编译器调用中覆盖模块,因为我无法获得对它的引用,因为循环依赖(特征模块导出组件) ,组件需要引用功能模块).

不知道这是一个错误还是我做错了什么？

默认模块:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';

@NgModule({
    imports: [BrowserModule, FeatureModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent:

import {Component} from "@angular/core";

@Component({
    selector: "my-app",
    template: `
        <h1>Angular2 RC5 Test</h1>
        <feature-component></feature-component>
    `
})
export class AppComponent { }

功能模块:

import { NgModule }     from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule }  from "@angular/forms";

import { FeatureComponent } …

假设我有以下appRoutingModule:

export const routes: Route[] = [
  {
    path: '',
    component: ApplicationlistComponent
  }
];

@NgModule( {
  imports: [ ApplicationsModule, RouterModule.forRoot( routes ) ],
  exports: [ RouterModule ],
  declarations: [ApplicationlistComponent]
} )
export class AppRoutingModule {
}

使用ngc cli命令编译时,会出现以下错误:

Error: Error encountered resolving symbol values statically. Calling function 'RouterModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppRoutingModule in C:/git/mxt-frontend/landing-page-client/src/client/app/app-routing.module.ts, resolving symbol AppRoutingModule in C:/git/mxt-frontend/landing-page-client/src/client/app/app-routing.module.ts

我尝试将它放在导出的const中:

export const …

我正在尝试在这个Angular 2 项目中使用AOT编译器。当我执行命令时出现错误：不是一个函数：。如何解决这个问题？TypeError: this.compiler.compileModules"node_modules/.bin/ngc" -p tsconfig-aot.json

重现步骤：

1. 克隆此存储库：https://github.com/AngularClass/angular2-webpack-starter

2. 安装compiler-cli（版本2.1.2）：npm install @angular/compiler-cli --save

3. 从中删除src/app/+detail目录和detail路由器src/app/app.routes.ts（我这样做是因为"node_modules/.bin/ngc" -p tsconfig-aot.json输出错误can't resolve module src/app/+detail/index.ts from src/app/+detail/index.ts：）

4. 创造tsconfig-aot.json：

   {“compilerOptions”：{“target”：“es5”，“module”：“es2015”，“moduleResolution”：“node”，“sourceMap”：true，“emitDecoratorMetadata”：true，“experimentalDecorators”：true，“removeComments ": false, "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true },
   "angularCompilerOptions": { "genDir": "aot", "skipMetadataEmit" : true } }

5. 跑步"node_modules/.bin/ngc" -p tsconfig-aot.json

组件模板中有一些自定义元素和属性（在此示例中，第三方非角度代码使用了它们）：

<foo></foo>
<div data-bar="{{ bar }}"></div>

它们会导致编译器错误：

Template parse errors:
'foo' is not a known element:
1. If 'foo' is an Angular component, then verify that it is part of this module.
2. If 'foo' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
    [ERROR ->]<foo></foo>
    <div data-bar="{{ bar }}"></div>
  "): App@1:4
Can't bind to 'bar' since it isn't a known property of 'div'. ("
    <foo></foo>
    <div [ERROR ->]data-bar="{{ bar }}"></div> …