标签: angular2-aot

简介:我正在尝试将Angular2 AoT用于我的Angular2应用程序,但由于我有静态提供程序将一些值从服务器传递给Angular2,因此ngc显示了一些错误.我的问题是如何ngFactory使用创建的文件ngc.

详细信息:我正在使用食谱指南,并运行"node_modules/.bin/ngc" -p tsconfig-aot.json显示以下错误:

Error: Cannot determine the module for component AppComponent!
    at F:\workspace\node\my-project\node_modules\@angular\compiler\bundles\compiler.umd.js:12839:25
    at Array.map (native)
    at OfflineCompiler.compile (F:\workspace\node\my-project\node_modules\@angular\compiler\bundles\compiler.umd.js:12835:31)
    at F:\workspace\node\my-project\node_modules\@angular\compiler-cli\src\codegen.js:108:18
    at Array.map (native)
    at CodeGenerator.codegen (F:\workspace\node\my-project\node_modules\@angular\compiler-cli\src\codegen.js:106:38)
    at codegen (F:\workspace\node\my-project\node_modules\@angular\compiler-cli\src\main.js:7:81)
    at Object.main (F:\workspace\node\my-project\node_modules\@angular\tsc-wrapped\src\main.js:30:16)
    at Object.<anonymous> (F:\workspace\node\my-project\node_modules\@angular\compiler-cli\src\main.js:14:9)
    at Module._compile (module.js:541:32)
Compilation failed

tsconfig-aot.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings" …

我试图按照https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#tree-shaking实现AOT和Rollup

我运行rollup per:"node_modules/.bin/rollup"-c scripts/rollup-config.js

结果是一个build.js文件,只包含条目文件,没有别的.没有错误,只有一个警告:"'default'是从外部模块'汇总'导入的,但从未使用过"

"aot"文件夹确实包含所有相关的已编译的ngfactory文件.

以下是输入文件:

import { platformBrowser }    from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

rollup-js.config:

import rollup      from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify'

export default {
    entry: 'scripts/app/main.js',
    dest: 'scripts/app/build.js', // output a single application bundle
    sourceMap: true,
    sourceMapFile: 'scripts/app/build.js.map',
    format: 'iife',
    onwarn: function(warning) {
        // Skip certain warnings

        // should intercept ... but doesn't in some rollup versions
        if ( warning.code === 'THIS_IS_UNDEFINED' …

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'image-display',
  templateUrl: './image-display.component.html'
})
export class ImageDisplayComponent implements OnChanges {
  @Input() image: File;
  @Input() imagePath?: string;

  private fileReader: FileReader;

  constructor() { }

  ngOnChanges() {
    if (this.image && this.fileReader) {
      this.fileReader.readAsDataURL(this.image);
    }
  }
}

在使用AOT进行编译时得到以下错误:

PRINHYLTPAP0592:matata ajays$ ng build --prod --aot
/myApp/src/$$_gendir/app/image-uploader/image-display/image-display.component.ngfactory.ts (61,9): 
Supplied parameters do not match any signature of call target.

ng build --prod Angular CLI命令在Angular4应用程序中生成高度压缩的javascript文件.

当使用ng eject命令弹出应用程序时,Angular CLI命令消失了,我们留下了npm脚本(npm run build构建应用程序的命令),但不幸的是,该命令输出了非生产版本.

我试图运行webpack -p直接命令,但输出的结果文件稍微大相比的输出ng build --prod命令.

如何ng build --prod在弹出的应用程序上获得压缩等效命令？什么命令/参数可以产生这样的结果？

我有一个多语言的应用程序,使用每种语言的--aot编译,例如德语:

ng build --aot --env=prod --prod --build-optimizer --i18nFile=src/locale/DARI_messages_de_DE.xlf --i18nFormat=xlf --locale=de --missingTranslation warning --output-path dist/de --base-href /de/

我们需要在运行时获取locale的值,以便将它处理到我们的后端.

如果看起来试图得到

    import { LOCALE_ID } from '@angular/core';

constructor(private modalService: BsModalService) {
  console.log("LOCALE_ID", LOCALE_ID);
}

但是LOCAL_ID是空的我认为它只适用于JIT

是否有任何方法可以在运行时获取此参数？

我正在尝试将已经使用Lazy加载模块的应用程序转换为AOT.我正在使用@ ngtools/webpack工具包来编译AOT代码,但是我遇到了一个错误,Angular无法找到Lazy加载模块的代码.

ERROR in ./src/ngfactory async
Module not found: Error: Can't resolve '/Library/WebServer/Documents/envato-teams/src/ngfactory/src/app/components/container/projects.ngfactory.ts' in '/Library/WebServer/Documents/envato-teams/src/ngfactory'
@ ./src/ngfactory async
@ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
@ ./src/ngfactory/src/app/app.module.ngfactory.ts
@ ./src/main.aot.ts
@ multi main

在我的应用程序路由定义中值得一提的是这个项目的模块是懒惰加载的:

{
  path: 'projects', loadChildren: './components/container/projects#ProjectModule'
},

这是我的设置的样子:

tsconfig:

...
"angularCompilerOptions": {
  "genDir": "./src/ngfactory",
  "entryModule": "src/app/app.module#AppModule"
}
...

Webpack:

new ngtools.AotPlugin({
    tsConfigPath: './tsconfig.aot.json',
}),

Main.aot.ts

/*
* Providers provided by Angular
*/
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './ngfactory/src/app/app.module.ngfactory';

import { Servicesconfig } from './app/services/index';

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

在webpack中,我正在使用@ ngtools/Webpack编译ts文件: …

问题类型:错误/问题

描述

我正在使用ng-packagr lib将我的库编译为js.我编译了所有内容没有任何问题,但是当我想要使用ng build --prod(启用AOT)来使用我的库时,我收到错误:

ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'BsDropdownModule' was called.

当我删除.forRoot方法时,我收到错误:

ERROR in : Unexpected value 'BsDropdownModule in /home/sf/Desktop/Developerka/kompilacja/final/sample-repo/node_modules/angular-library-name/free/dropdown/dropdown.module.d.ts' imported by the module 'AppModule in /home/sf/Desktop/Developerka/kompilacja/final/sample-repo/src/app/app.module.ts'. Please add a @NgModule annotation

请注意,这ng --prod --aot=false 不会产生任何错误.

如何重现:

下载repo:https://github.com/Bloodcast69/aot-error,输入 npm install ng build --prod.

预期的行为

想要使用AOT构建没有错误(我需要它与Angular Universal兼容)版本信息

ng-packagr: 2.4.1 @angular/*: 5.2.9 typescript: 2.5.3 rxjs: 5.5.6 node: 8.1.0 npm/yarn: npm: 5.6.0

文件:

app.module.ts: …

Ahead-of-Time Compilation(或AoT)是Angular2中提供的一项功能.但我在官方网站上找不到有关它的好解释.

有人可以明确定义它吗？

我需要动态配置一些Angular服务,具体取决于运行时切换.在AOT之前的几天,我使用以下代码使其工作:

@NgModule({
  imports: [HttpModule],
  providers: []
})
export class MyModule {
  static forRoot(config: MyConfiguration): ModuleWithProviders {
    return {
      ngModule: MyModule,
      providers: [
        SomeService,
        {
          provide: SomeOtherService,
          useFactory: (some: SomeService, http: Http) => {
            switch (config.type) {
              case 'cloud':
                return new SomeOtherService(new SomethingSpecificForCloud());
              case 'server':
                return new SomeOtherService(new SomethingSpecificForServer());
            }
          },
          deps: [SomeService, Http]
        },

      ]
    };
  }
}

然后在我,AppModule我会导入这个MyModule.forRoot(myConfig).

当我更新CLI和Angular时,它不再编译,因为它无法进行静态分析.我理解为什么,但我仍然不确定解决它的正确方法是什么.

我是否forRoot()首先滥用这种方法？如何编写模块以便根据运行时开关生成不同的服务？

我目前的角度项目在角度支持AOT功能之前就开始了.现在我正试图让它发挥作用.我收到以下错误,我不知道这意味着什么,我可以开始调试问题.有谁知道为什么会出现这个错误？

依赖

ERROR in Error: Internal error: unknown identifier undefined
at Object.importExpr$$1 [as importExpr] (...\node_modules\@angular\compiler\bundles\compiler.umd.js:24211:23)
at tokenExpr (...\node_modules\@angular\compiler\bundles\compiler.umd.js:18577:39)
at providerDef (...\node_modules\@angular\compiler\bundles\compiler.umd.js:18480:20)
at ...\node_modules\@angular\compiler\bundles\compiler.umd.js:18697:77
at Array.map (<anonymous>)
at NgModuleCompiler.compile (...\node_modules\@angular\compiler\bundles\compiler.umd.js:18697:44)
at AotCompiler._compileModule (...\node_modules\@angular\compiler\bundles\compiler.umd.js:24144:32)
at ...\node_modules\@angular\compiler\bundles\compiler.umd.js:24056:66
at Array.forEach (<anonymous>)
at AotCompiler._compileImplFile (...\node_modules\@angular\compiler\bundles\compiler.umd.js:24056:19)
at ...\node_modules\@angular\compiler\bundles\compiler.umd.js:23969:87
at Array.map (<anonymous>)
at AotCompiler.emitAllImpls (...\node_modules\@angular\compiler\bundles\compiler.umd.js:23969:52)
at CodeGenerator.emit (...\node_modules\@angular\compiler-cli\src\codegen.js:42:46)
at ...\node_modules\@angular\compiler-cli\src\codegen.js:33:61
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)

错误

"@angular/animations": "^4.4.4",
"@angular/common": "^4.4.4",
"@angular/compiler": "^4.4.4",
"@angular/core": "^4.4.4",
"@angular/forms": "^4.4.4",
"@angular/platform-browser": "^4.4.4",
"@angular/platform-browser-dynamic": "^4.4.4",
"@angular/router": "^4.4.4",
"@ngx-translate/core": "^8.0.0",
"@ngx-translate/http-loader": "^2.0.0",
"core-js": …