angular-cli - 如何使用 ngc 进行 Angular 5 --aot 构建？

Question

我变得非常困惑，在我读到的有关使用 ngc 在“aot”文件夹中生成工厂然后在 main.js 中引用它的文档中，如下所示:

从'./app/app.module.ngfactory'导入{AppModuleNgFactory};

在 Angular 4 中它可以工作，但在 Angular 5(使用 5.2.0)中它根本不生成“aot”文件夹。 我还阅读了 Angular 5.0.0 blog由于与 tsc 编译器集成，ng-build 不会生成 aot 文件夹。但是由于 webpack 的魔力， ng build --aot 命令似乎非常依赖于 url 和部署位置。旧的 ngc 解决方案不是这样，我可以根据需要汇总它。

问题

1. ngc 现在对于“aot”构建来说已经死了吗？
2. 如果没有，我如何使用 ngc 进行 aot 构建？
3. 我现在应该始终使用 platformBrowserDynamic 而不是 platformBrowser 吗？
4. 为了让它运行，我还缺少什么？经过几天的无所事事后，我变得非常沮丧。请帮忙! :)

我的文件结构如下:

• 一些/路径/
  • index.html
  • src/
    • main.ts
    • tsconfig.json
    • 模块/
      • app.module.ts

而且我不知道将使用什么基本网址。

我的 tsconfig 看起来像这样:

{
    "compileOnSave": false,
    "compilerOptions": {
        "module": "es2015",
        "outDir": "../out-ngc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "../node_modules/@types",
            "./typings"
        ],
        "lib": [
            "es2017",
            "dom"
        ]
    },
    "include": [
        "./modules/**/*.module.ts",
        "./main.ts"
    ],
    "exclude": [
        "test.ts",
        "**/*.spec.ts",
        "_NOT_USED_"
    ],
    "angularCompilerOptions": {
        "entryModule": "./modules/app.module#AppModule",
        "genDir": "aot"
    }

}

我的 main.ts 看起来像:

import { NgModule, StaticProvider } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { downgradeModule, downgradeComponent, downgradeInjectable } from "@angular/upgrade/static";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { enableProdMode } from "@angular/core";
import { AppModule } from "./modules/app.module";

import "zone.js/dist/zone";
import { environment } from "./environments/environment.prod";

import { FormsModule } from "@angular/forms";
import { BsDatepickerModule, ModalModule, PopoverModule } from "ngx-bootstrap";
import { NgSelectModule } from "@ng-select/ng-select";

import * as d3 from "d3";
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker/bs-datepicker.config';
if (environment.production) {
    enableProdMode();
}

declare var angular: any;
const bootstrapFn = (extraProviders: StaticProvider[]) => {
    let module = platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
    return module;
};
const downgradedModule = downgradeModule(bootstrapFn);

angular.module(AppModule.name, [
    "oneClientApp",
    downgradedModule, BrowserModule, downgradeComponent, downgradeInjectable, FormsModule, BsDatepickerConfig, ModalModule, PopoverModule, NgSelectModule
]);

angular.bootstrap(document.body, [AppModule.name]);

我的 app.module.ts 看起来像:

import { NgModule, StaticProvider } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { downgradeModule, downgradeComponent, downgradeInjectable } from "@angular/upgrade/static";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { FormsModule } from "@angular/forms";
import { BsDatepickerModule, ModalModule, PopoverModule } from "ngx-bootstrap";
import { NgSelectModule } from "@ng-select/ng-select";

import { BroadcastService } from "./app_components/shared/services/broadcast.service";

import { Foo } from "./app_components/foo/foo.component";

const moduleName = "myAppModule";

@NgModule({
    declarations: [
        Foo
    ],
    entryComponents: [
        Foo
    ],
    imports: [
        BrowserModule,
        FormsModule,
        NgSelectModule,
        ModalModule.forRoot(),
        PopoverModule.forRoot(),
        BsDatepickerModule.forRoot()
    ],
    providers: [
        BroadcastService,
    ],
    bootstrap: [
    ]
})
export class AppModule {
    name: string = moduleName;
    constructor() { }
    ngDoBootstrap() {

    }
}

declare var angular: ng.IAngularStatic;
angular.module(moduleName).directive("foo", downgradeComponent({ component: Foo }));

angular.module(moduleName).factory("broadcastService", downgradeInjectable(BroadcastService) as any);

Answer 1

我刚刚找到了这个仓库: angular 5 aot example repo

基本上它解决了这个问题，我的答案是:

1. 不，ngc 工作正常，但它不会生成 aot 文件夹，并且您将看到一个红色波浪线，因为您在尚不存在的文件中引用了工厂。
2. 查看存储库。
3. 用于 aot 构建的平台浏览器