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

Question

我很困惑，在我读到的关于使用 ngc 在 "aot" 文件夹中生成工厂然后在 main.js 中引用它的文档中，例如：

import { AppModuleNgFactory } from './app/app.module.ngfactory';

并且在 angular 4 中有效，但在 angular 5（使用 5.2.0）中它根本不生成 "aot" 文件夹。我还在 angular 5.0.0 blog 中读到，由于与 tsc 编译器集成，ng-build 不会生成 aot 文件夹。但是 ng build --aot 命令似乎非常依赖于 urls 以及由于 webpack 的魔力而部署它的位置。旧的 ngc 解决方案不是，我可以根据需要汇总它。

问题

现在 "aot" 构建的 ngc 已经死了吗？
如果没有，我如何使用 ngc 进行 aot 构建？
我现在应该总是使用 platformBrowserDynamic 而不是 platformBrowser 吗？
为了运行我还缺少什么？经过几天的无所事事后，我感到非常沮丧。请帮忙！ :)

我的文件结构如下：

some/path/
- index.html
- 源/
  - main.ts
  - tsconfig.json
  - 模块/
    - app.module.ts

而且我不知道将使用什么基础 url。

我的 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

基本上它解决了，我的答案是：

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

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

How can I do a Angular 5 --aot build using ngc?

aot

hybrid

angular-cli

angular5