标签: angular2-aot

当我使用JIT运行我的Angular 2应用程序时,一切正常.但是在我切换到AOT后,我的应用程序开始拉动带有附加前缀的链接("/ src/linker/ng_module_factory"),例如:

JIT拉: http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js

AOT拉:http://localhost:8080/node_modules/@angular/core/bundles/core.umd.js/src/linker/ng_module_factory 后缀/src/linker/ng_module_factory来自哪里？

关于app.我正在使用Java 8 + Spring 4.3.2.RELEASE + Angular 2 + Tomcat 9.0.0.M6.

src
--main
----webapp
------resources
--------app
----------app.component.css
----------app.component.ts
----------app.module.ts
----------main.ts
--------index.html
--------package.json
--------systemjs.config.js
--------tsconfig.json
--------typings.json
------WEB-INF
--------dispatcher-servlet.xml
--------web.xml

的package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "typings install"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common":  "2.0.0",
    "@angular/compiler":  "2.0.0",
    "@angular/core":  "2.0.0",
    "@angular/platform-browser":  "2.0.0",
    "@angular/platform-browser-dynamic":  "2.0.0",

    "systemjs": "0.19.27",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23",

    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "typescript": …

我正在使用一个非常简单的Angular 2应用程序,我没有使用Angular CLI(为了这个特定的问题,请不要建议我使用CLI).使用JIT编译器时,站点运行时没有任何问题.急切加载的模块以及延迟加载的模块都完全没问题.

我可以成功运行AOT编译器,然后使用Rollup执行树抖动,如Angular 2文档中所述.执行此操作时,站点运行时没有任何问题,因为急切加载的模块,但在尝试转到急切加载的模块时出现错误.这是错误消息:( GET http://atticus.local/app/contacts/contacts.module.ngfactory 404 (Not Found)这是我试图延迟加载的模块)

一个非常基本的问题:

• 当你做AOT和树摇动时,使用延迟加载是否有意义？你还能获得福利吗？

假设上面问题的答案是肯定的,我想知道如何能够将AOT编译和延迟加载一起工作？我已经看到Angular CLI的GitHub问题已经提出了这个问题,看起来已经有了一些解决方案.这假设您使用的是CLI,我不是.我在输出AOT时注意到我的延迟加载模块没有*.ngfactory.ts也没有*.ngsummary.json创建,但仅适用于我急需加载的模块.这可能有意义吗？

作为参考,我为AOT运行的命令ngc -p tsconfig-aot.json具有以下内容tsconfig-aot.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
            "es2015",
            "dom"
        ],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "typeRoots": [
            "node_modules/@types/"
        ]
    },
    "files": [
        "app/app.module.ts",
        "app/main-aot.ts"
    ],
    "angularCompilerOptions": {
        "genDir": "aot",
        "skipMetadataEmit": true
    }
}

然后我跑去rollup -c rollup-config.js累积以执行树摇动.这是 …

我的一个功能模块有以下内容:

declare function require(name: string);

@NgModule({
imports: [
// other modules here
ChartModule.forRoot(
  require('highcharts'),
  require('highcharts/highcharts-more'),
  require('highcharts/modules/funnel'),
  require('highcharts/modules/heatmap')
)

它在本地运行良好,但是当我使用prod标志构建它时它会失败.我得到的错误是:

ERROR in Error遇到静态解析符号值.引用非导出函数(原始.ts文件中的位置26:18),解析符号....

./src/main.ts中的错误找不到模块:错误:无法在...中解析'./$$_gendir/app/app.module.ngfactory'

有关如何解决此问题的任何想法？

提前编译Angular 4.0.2应用程序并将提供程序定义为 useValue

import { OpaqueToken, Provider } from '@angular/core';

export const windowToken = new OpaqueToken('window');
export const windowProvider = { provide: windowToken, useValue: window };

并像

@NgModule({ providers: [windowProvider], ... })
export class AppModule {}

它可以编译，但是当window被undefined注入时

constructor(@Inject(windowToken) window) {
   window.navigator...
}

在引导时抛出错误：

TypeError：无法读取未定义的属性“ navigator”

仔细查看自动生成的app.module.ngfactory.js，看起来确实是这样undefined：

...
import * as import39 from './window';
var AppModuleInjector = (function (_super) {
    ...
    AppModuleInjector.prototype.createInternal = function () {
        ...
        this._windowToken_26 = undefined;
        this._SomeService_27 = new import16.SomeService(this._windowToken_26);
    } …

我正在使用我的Angular 4项目的默认i18n进程,所以我ng-i18n用来生成.xlf没有问题.

但是根据我的打字稿代码,我还有一些文本需要翻译并通过id检索当前语言.

在Angular 4中我找不到任何方法.我错过了什么吗？如果那件事,我正在使用AOT.

如果服务器从Web服务发回一些消息/错误代码,如何使用Angular转换它们,也会出现此问题

我有一个使用webpack的angular4应用程序,并且与JiT一起工作很好,但现在我正试图让它与AoT合作,我遇到了问题.具体来说,我收到以下错误:

ERROR in window is not defined

ERROR in ./src/app/main/main.ts
Module not found: Error: Can't resolve './../../../aot-main/src/app/main/app.module.ngfactory' in 'W:\<Full Path to App>\src\app\main'
resolve './../../../aot-main/src/app/main/app.module.ngfactory' in 'W:\<Full Path to App>\src\app\main'
  using description file: W:\<Full Path to App>\package.json (relative path: ./src/app/main)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: W:\<Full Path to App>\package.json (relative path: ./src/app/main)
    using description file: W:\<Full Path to App>\package.json (relative path: ./aot-main/src/app/main/app.module.ngfactory)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        W:\<Full Path …

我有这样的事情:

ng build --prod --no-aot

但我无法理解它们之间的区别

ng build --prod  

和

ng build --prod --no-aot

我一直在试图让AOT使用我的Webpack应用程序.(@ ngtools /的WebPack)

任何人都可以帮助我吗？

它似乎工作,但compiler.js仍然包含在捆绑包中.此外,它仍然在寻找我所有的.html文件,并在所有组件模板上获得404.

所以据我所知,它并没有真正做到AOT最好的部分？

在这里任何光线都可以闪耀,我被卡住!

谢谢!!

在Angle 5应用程序中需要Babel吗？内部使用什么AOT或JIT进行编译？

我有一个Angular 5库,我公开它作为一个包,供其他应用程序使用node_modules.

目前,该应用程序是刚刚在时间使用编译(JIT)rollup和gulp并导出为一个包.因此,开发人员应用程序在其JIT编译形式中使用我的包.

关于AOT的研究让我相信任何在AOT编译时的Angular应用程序比浏览器上的JIT对应程序更高效.但是,作为一个库开发人员,我想知道如果我公开我的库AOT编译,应用程序开发人员是否会获得任何性能优势？

我使用ng-bootstrap和许多其他开源库一起在我的模块中创建组件,并在它们之上添加自定义样式或功能.我在模块中使用的所有库是否也需要在他们的AOT表单中,或者我可以使用他们的JIT对应物？

另外,我认为这将是有独立的包我的图书馆是个好主意- packageName和packageName-aot,使用户有一个选项可以选择他们要使用的任何库.

除了整个代码重构(将模板中使用的私有变量更改为public,删除箭头函数,lambda表达式等)之外,在以AOT形式公开我的库模块之前还需要记住什么吗？

由于某些约束,我无法使用Angular CLI,因此必须依赖于@ngtools/webpack获取AOT编译(如果有的话).

目前,我tsconfig.json有以下选择:

"angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMedtadataEmit": true,
    "fullTemplateTypeCheck": true
}

我在互联网上搜索了很多,但是Angular AOT文档非常模糊,对于我在这里尝试做的事情并不是很清楚.任何方向都会非常有用.
谢谢!