Question

我感到非常困惑，在我读到的文件中，使用ngc在“aot”文件夹中生成工厂，然后在main.js中引用它，如：

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

并且在角度4中它起作用但是在角度5（使用5.2.0）它根本不生成“aot”文件夹。我还在角度5.0.0 blog中读到ng-build由于与tsc编译器的集成而不生成aot文件夹。但是ng build --aot命令似乎非常依赖于url以及由于webpack魔法的原因而部署它的位置。旧的ngc解决方案不是，我可以像它需要的那样汇总它。

问题

现在“aot”构建的ngc已经死了吗？
如果没有，我该如何使用ngc进行构建？
我现在应该始终使用platformBrowserDynamic代替platformBrowser吗？
我还缺少什么才能让它运行？经过几天无所事事，我变得非常沮丧。请帮忙！：）

我的文件结构如下：

一些/路径/
- 的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"
    }

}

我的主要内容如下：

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文件夹，因为你在一个尚不存在的文件中引用工厂，你会有一个红色的波浪形。
看看回购。
platformBrowser for aot builds

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

1 个答案: