标签: angular-compiler

我试图在我的Angular应用程序中包含外部模块(托管在git/npm存储库中)作为延迟加载的模块.

我用ngc编译器编译我的外部模块:

node_modules/.bin/ngc -p tsconfig-aot.json

这是我的编译器配置的外观:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "baseUrl": "src",
    "declaration": true,
    "outDir": "./release/src"
  },
  "files": [
    "./src/index.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "release",
    "skipTemplateCodegen": true,
    "entryModule": "index#ExternalModule",
    "skipMetadataEmit": false,
    "strictMetadataEmit": true
  }
}

在我的主应用程序中,我懒得加载给定模块:

RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full'},
      { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'},
      { path: 'external', loadChildren: '@angular-universal-serverless/external-module/release#ExternalModule'}
])

出于编译目的,我使用的是@ ngtools/webpack插件.

JIT编译没有任何问题,但AOT编译给我错误:

ERROR in ./src/ngfactory lazy
Module not found: Error: Can't resolve '/path/to/my/project/angular-universal-serverless/src/ngfactory/node_modules/@angular-universal-serverless/external-module/release/src/index.js' in '/Users/mtreder/Documents/private/work/angular-universal-serverless/src/ngfactory'
 @ ./src/ngfactory lazy
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./src/main.server.aot.ts

所以我决定检查 …

我不明白router-outlet和module's exports array编译策略之间的区别.

• router-outlet将通过ComponentFactoryResolver自动生成组件
• 如果您不是router-outlet用来访问其他模块的组件,它将从模板解析器中抛出错误

为什么我们需要将它添加到exports数组中,Angular不能自动生成模块中定义的组件router-outlet.

我知道如果我想使用其他模块的组件,则需要添加到导出.

实例

import { 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 { M1Module } from './m1/m1.module';
// import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    // AppRoutingModule,
    M1Module
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export …

我正在寻找这里列出的一些Angular Compiler选项的解释:

• useDebug - 打开调试
• useJit - 不清楚(仅在一个地方使用)
• defaultEncapsulation - 设置默认样式封装
• 提供者 - 不是很清楚(与ngModule装饰器是否相同？)
• missingTranslation - 策略如果缺少翻译密钥该怎么办
• enableLegacyTemplate - 支持template标记(已弃用)

这是我的 ng 库模块代码

   @NgModule({
      imports: [NgIdleModule.forRoot()],
      providers: [ {
        provide: APP_INITIALIZER,
        useFactory: (idleStateChangeHandlerService: IdleStateChangeHandlerService) =>  () => console.log(IdleStateChangeHandlerService),
        multi: true,
        deps: [IdleStateChangeHandlerService]
      }]
    })
    export class IdleActivityModule {
      static forRoot(config: IdleActivityConfig): ModuleWithProviders {
        return {
          ngModule: IdleActivityModule,
          providers: [
            {
              provide: IdleActivityConfigInjectionToken,
              useValue: config
            }
          ]
        };
      }
    }

构建时：

> Compiling TypeScript sources through ngc ERROR:
> C:/_dev/seemis-workspace/projects/shared-modules/src/lib/idle-activity/idle-activity.module.ts:9:1:
> Error encountered in metadata generated for exported symbol
> 'IdleActivityModule':  
> C:/_dev/seemis-workspace/projects/shared-modules/src/lib/idle-activity/idle-activity.module.ts:13:17:
> Metadata collected contains an error that will …

我正在尝试让我的应用程序部署在 Heroku 上。我收到了“sh: 1: ng: not found”错误，但根据这里的回复，我移动了我的@angular/cli、@angular-devkit/build-angular、@angular/compiler-cli 和 typescript。现在我收到“无法解析依赖项：npm ERR！peer @angular/compiler@"11.2.8"”错误。我认为它有一个版本问题？我不确定发生了什么。

我试过运行 'npm update' 并尝试手动将 '@angular/compiler@"11.2.8"' 插入依赖项，然后运行 ​​'npm i' 但两者都给我同样的错误。

这是我的错误：

npm ERR! Found: @angular/compiler@11.0.9
npm ERR! node_modules/@angular/compiler
npm ERR!   @angular/compiler@"~11.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"11.2.8" from @angular/compiler-cli@11.2.8
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"^11.0.9" from the root project
npm ERR!   peer @angular/compiler-cli@"^11.0.0" from @angular-devkit/build-angular@0.1100.7
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     @angular-devkit/build-angular@"~0.1100.2" from the root project

包.json：

"scripts": {
    "ng": …

生成浏览器应用程序包时发生错误（阶段：设置）。什么可能导致此错误？

来自控制台的信息：

生成浏览器应用程序包（阶段：设置）... TypeError：无法读取 NodeObject.getText 处未定义的属性“文本”（/opt/app-root/src/node_modules/typescript/lib/typescript.js:152697:31）在 getRequiredModulePath (/opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src/host/umd_host.js:519:99) 在 Object.getImportsOfUmdModule (/opt/app-root/src/node_modules) /@angular/compiler-cli/ngcc/src/host/umd_host.js:510:23) 在 UmdDependencyHost.extractImports (/opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src/dependencies /umd_dependency_host.js:43:54) 在 UmdDependencyHost.DependencyHostBase.recursivelyCollectDependencies (/opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src/dependency/dependency_host.js:85:32) 在 UmdDependencyHost .DependencyHostBase.collectDependency (/opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src/dependencies/dependency_host.js:38:22) 在 DependencyResolver.getEntryPointWithDependencies (/opt/app-root/src) /node_modules/@angular/compiler-cli/ngcc/src/dependency/dependency_resolver.js:75:22) 在 EntryPointCollector.walkDirectoryForPackages (/opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src /entry_point_finder/entry_point_collector.js:47:52) 在 EntryPointCollector.walkDirectoryForPackages (/opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src/entry_point_finder/entry_point_collector.js:75:103) 在 / opt/app-root/src/node_modules/@angular/compiler-cli/ngcc/src/entry_point_finder/program_based_entry_point_finder.js:124:100

来自 angle-errors.log 的信息

构建期间发生错误：错误：NGCC 失败。在 NgccProcessor.process (/opt/app-root/src/node_modules/@ngtools/webpack/src/ngcc_processor.js:139:19) 在 /opt/app-root/src/node_modules/@ngtools/webpack/src/ ivy/plugin.js:129:27 在 Hook.eval [作为调用] (eval at create (/opt/app-root/src/node_modules/tapable/lib/HookCodeFactory.js:19:10), :28:1 ）在 Hook.CALL_DELEGATE [as _call] (/opt/app-root/src/node_modules/tapable/lib/Hook.js:14:14) 在 Compiler.newCompilation (/opt/app-root/src/node_modules/webpack) /lib/Compiler.js:1043:30) 在 /opt/app-root/src/node_modules/webpack/lib/Compiler.js:1088:29 在 Hook.eval [as callAsync] （eval at create (/opt/ app-root/src/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1) 在 Hook.CALL_ASYNC_DELEGATE [as _callAsync] …

我正在运行时创建 Angular 代码，特别是，我使用 SVG 库来创建一个矢量图形，其中包含 Angular 代码指令，如(click)='myMethod()'，反过来，调用我在 SVG 封闭组件中静态定义的方法。在运行时生成我需要编译创建的模板并将其添加到组件中。我当时在这篇文章的帮助下用 Angular 3 实现了这样的代码，这篇文章非常繁琐。我尝试在 Angular 8 应用程序中复制旧代码：

private addComponent(template: string) {

    @Component({template: template + ' <div #target></div>'})
    class TemplateComponent {

      @ViewChild('target', {static: false, read: ViewContainerRef}) public target;

      constructor() {
      }

      public myMethod() {
        // do something     
      }
    }

    @NgModule({declarations: [TemplateComponent]})
    class TemplateModule {
      @ViewChild('target', {static: false, read: ViewContainerRef}) public target;
    }

    // ERROR in next line:
    const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
    const factory = mod.componentFactories.find((comp) =>
        comp.componentType …

我正在尝试创建一个动态组件。这是 plunker 中的示例。http://embed.plnkr.co/EVFglgkp24hkRkpxrEGe/ 一切正常，但存在内存泄漏。

这是 github 票https://github.com/angular/angular/issues/19997

动态创建的组件正在被销毁，但创建动态组件的组件并没有被销毁。换句话说，编译动态组件的组件没有被破坏。

在上面的示例中，如果我们在“主页”和“动态页面”之间来回导航并在 chrome 中拍摄内存快照，您可以看到假设被销毁的组件仍然存在，如下图所示。

出于测试目的，我什至尝试评论以下行，但问题仍然存在。

      let injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
      let ngMdlRef = ngMdlFac.create(injector);
      let cmpFactory = ngMdlRef.componentFactoryResolver.resolveComponentFactory(DynamicHtmlComponent);
      this.cmpRef = this.vcRef.createComponent(cmpFactory);

我打电话的那一刻

this.compiler.compileModuleAsync

创建者组件根本没有被破坏。在那之前没有问题。

你能请人帮忙吗？先感谢您。

如果我使用AOT编译动态编译将不可能。所以我需要将编译器加载到浏览器。那么如何加载呢？如果我使用

import { JitCompilerFactory } from '@angular/compiler';

但是，导入后JitCompilerFactory出现以下错误：

“在 'angular/compiler' 中找不到导出 'JitCompilerFactory'

那么我现在需要从'angular/platform-browser-dynamic'动态编译中导入它是对的吗？