标签: angular2-aot

我试图在我的项目中使用AOT编译,我有7个延迟加载的模块.AOT编译似乎工作(我的应用程序更快),但我的应用程序的大小比没有AOT编译大1 Mo.当我使用bundle analyzer插件查看发生了什么时,似乎导入了我的共享模块的所有地方(也就是说,几乎在我所有的延迟加载的模块中),它被重新导入,所以有一个共享模块的副本我的每一块!

有人有任何解决方案吗？

我的共享模块中没有任何提供程序.为了使AOT与延迟加载一起工作,我不得不将此配置用于webpack:

module.exports = function(env) {
  return webpackMerge({
    plugins: [
    new AotPlugin({
      tsConfigPath: 'tsconfig-aot.json',
      entryModule: helpers.root('src/app/app.module#AppModule')
    }),
    ]
  }, commonConfig, {
    devtool: 'source-map',

    output: {
      path: helpers.root('export/dist'),
      publicPath: '/',
      filename: '[name].[hash].js',
      chunkFilename: '[id].[hash].chunk.js'
    },

    module: {
      rules: [
      {
        test: /\.ts$/,
        use: ['@ngtools/webpack']
      }
      ]
    },

    plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
      compress: { warnings: false },
      mangle: {
        keep_fnames: true
      }
    }),
    new webpack.LoaderOptionsPlugin({
      htmlLoader: {
        minimize: false // workaround for ng2
      }
    }), …

我的应用程序有很多 TypeScript 错误，但运行正常（我将一个 javascript 应用程序移至 typescript，现在无法解决所有类型问题......）。我已经设置了我的编辑器 (webstorm) 来忽略这些错误并编译应用程序。

运行应用程序 (JiT) 效果很好，但是当我尝试使用 AoT编译应用程序（我已经按照本教程）时，我收到了所有 TypeScript 错误并且编译失败。我无法粘贴所有错误（错误太多），但这里有一个示例：

Error at C:/app-path/services/app.service.ts:18:23: Property 'saveScroll' does not exist on type 'CanComponentDeactivate'.
Error at C:/app-path/services/app.service.ts:45:20: Parameter 'object' implicitly has an 'any' type.
Error at C:/app-path/services/app.service.ts:48:24: Parameter 'mObject' implicitly has an 'any' type.
Error at C:/app-path/services/app.service.ts:75:30: Property 'value' does not exist on type 'FormBuilder'.

知道我目前无法修复所有错误（但想保留打字稿），我应该怎么做才能编译？

我想获取当前NgModule的元数据，以便获取列表declarations并providers填充我创建的动态模块，以在模式中显示组件。

那怎么办呢？

我有运行角2应用程序编译AOT使用汇总说明从angular.io文档问题（链接在此）

据我所知，编译过程进行得很顺利，尽管我将其作为唯一的输出：

??   'default' is imported from external module 'rollup' but never used

'initializeApp' is not exported by 'node_modules/firebase/firebase-node.js'
'initializeApp' is not exported by 'node_modules/firebase/firebase-node.js'
'app' is not exported by 'node_modules/firebase/firebase-node.js'
'auth' is not exported by 'node_modules/firebase/firebase-node.js'
'database' is not exported by 'node_modules/firebase/firebase-node.js'
'database' is not exported by 'node_modules/firebase/firebase-node.js'

该build.js创建和我有我的index.html指向它和其他所需的文件：

??   'default' is imported from external module 'rollup' but never used

'initializeApp' is not exported by 'node_modules/firebase/firebase-node.js'
'initializeApp' is not exported by 'node_modules/firebase/firebase-node.js'
'app' is not …

据我了解，在 ng build 期间，默认使用 AOT 编译，并且仅在开发（ngserve）中才需要设置 --aot 标志。

但现在我面前有一个项目，它在多个位置使用 @Angular/compiler 中的类和方法。尽管如此，“ng build”与 production: true 的结果在环境中工作没有任何失败，并且似乎知道编译器。如果我使用“ngserve --aot”，但是我会收到预期的“未捕获错误：运行时编译器未加载”。

那么到底是怎么回事呢？是否默认使用AOT。

顺便说一句：该项目使用 Angular 版本 ^4.0.0。

编辑

@Melou 和 @PierreDuc 向我展示了我错在哪里：ng build --prod与ng build -e prod. 环境中的生产设置不会改变编译过程。--prod还设置--target=production将触发 AOT 编译。

我想动态创建一个URL树,并在Angular的路由器中使用它而不是"魔术"字符串.我有这些课程:

export abstract class UrlNode {
    protected parentUrl?: string;
    protected abstract shortUrl: string;

    constructor(parent: UrlNode) {
        this.parentUrl = parent && parent.path;
    }

    public get segmentUrl(): string {
        return this.shortUrl;
    }

    public get path(): string {
        if (!this.parentUrl) {
            return this.shortUrl;
        }

        if (!this.shortUrl) {
            return this.parentUrl;
        }

        return `${this.parentUrl}/${this.shortUrl}`;
    }
}

export class Profile extends UrlNode {
    protected shortUrl = "profile";
}

export class User extends UrlNode {
    public readonly profile: Profile;
    public readonly someSubroute: SomeSubroute;

    protected shortUrl = "user"; …

我有一个用 AOT 编译的 Angular 项目。我希望能够注册ClassProvider根据配置动态解析的内容。我使用的简化代码是这样的：

const isMock = Math.random() > 0.5;

@NgModule({
  // ...
  providers: [
    { provide: MyServiceBase, useClass: (isMock) ? MyServiceMock : MyService },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题是当我用 AOT 编译它时，我总是得到相同的服务。我希望在点击 F5 时获得不同的服务（因为randomness在第一行）。在没有 AOT 的情况下编译时，它的行为符合我的预期。

这是 github 上的整个代码示例：https : //github.com/vdolek/angular-test/tree/aot-regulation-provider-problem。它的行为与ng serve和不同ng serve --aot。

我怎样才能做到这一点？我知道我可以使用FactoryProvider，但是我必须复制服务依赖项（工厂函数的参数和 deps 上的属性FactoryProvider）。

我正在使用带有 aot=true 和 --prod 的 angular cli 构建应用程序，因此应用程序使用 aot 进行编译并且包大小更小，但是我如何以 aot 模式引导应用程序，以便引导程序更快，如本文所述?

当前代码：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (!environment.local) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

文章提出的代码：

import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
//** where is the following file generated by angular-cli? **
import { AppModuleNgFactory } from './app/app.module.ngfactory'; …

我正在使用 Angular cli 开发 Angular 5 项目。我在网站的开发中使用了一些npm模块。当我创建生产版本时，它会生成大小为 MB 的vendor.js，因为当用户第一次打开该网站时，该网站加载速度非常慢。

我尝试在构建时添加一些额外的参数，ng build --prod --aot --buildOptimizer但与其他文件相比，它的大小仍然很大。

在 webpack 中有什么方法可以将vendor.js 拆分为多个文件或减少文件或延迟加载vendor.js 文件吗？

当我当前运行ng build命令时，我会遇到一大堆运行时问题，而这些问题在我以 JIT 模式（Angular 6）编译时不存在。

有没有办法在编译时获得所有 AOT 问题的列表，而无需手动找出它们？

我认为至少有一套tslint规则可以强制开发人员编写符合 AOT 的代码，但我找不到。我错过了什么吗？

任何帮助表示赞赏。

更新：我正在谈论的运行时问题之一是mat-icon来自 Angular Material 的 s 不起作用。它们只是呈现为文本，如“ chevron_left ”。显然，捆绑包不包含MatIconModule. 但是，JIT 一切都按预期工作。

此外，当我阅读 AOT 文档时，我看到 AOT 编译器不支持对本地（未导出）符号的引用。但是，我确实在我的装饰器中引用了本地符号，但是我没有收到任何编译错误通知我这一点。