在 Angular(4)（客户端、服务器、共享）中使用拆分应用程序模块处理导入答案

【问题标题】：Working with imports with split app modules in Angular(4) (client, server, shared)在 Angular(4)（客户端、服务器、共享）中使用拆分应用程序模块处理导入
【发布时间】：2018-01-29 00:28:12
【问题描述】：

我使用 yeoman 生成器为前端创建了一个带有 Angular 的 .net spa 应用程序。它创建一个包含三个 app.module.ts 文件（app.module.client.ts、app.module.shared.ts、app.module.server.ts）的应用程序。不幸的是，位于客户端应用程序模块文件中的 NgModule 导入似乎没有正确注入到组件中。因此，当我尝试在输入上使用 ngFor 时，我收到错误“无法绑定到 'ngModel'，因为它不是 'input' 的已知属性。”我认为这是因为即使我的 app.module.client.ts 文件看起来像这样，也没有导入表单模块：从'@angular/core'导入{ NgModule }；

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { sharedConfig } from './app.module.shared';
import {SelectModule} from 'ng2-select';

    @NgModule({
        bootstrap: sharedConfig.bootstrap,
        declarations: sharedConfig.declarations,
        imports: [
            BrowserModule,
            FormsModule,
            HttpModule,
            SelectModule,
            ...sharedConfig.imports
        ],
        providers: [
            { provide: 'ORIGIN_URL', useValue: location.origin }
        ]
    })
    export class AppModule {
    }

也许我错过了关于这些划分模块如何工作的一些信息。鉴于这种不同的模块架构，如何正确导入模块？

更新：我也可以通过在 app.module.server.ts 中包含模块导入来解决问题。我想保留这个问题，希望有人可以解释这是如何工作的。这特别奇怪，因为来自 Yeoman 的预构建模板在 app.module.client.ts 文件中包含所有模块导入，并且在使用 dotnet run 运行网站时它们似乎无能为力，它们也必须在服务器文件中复制。

【问题讨论】：

标签： angular .net-core

【解决方案1】：

ASP.NET Core SPA with Angular 4 模板将 AppModule 拆分为三个文件，以便 Webpack 能够高效地编译客户端包（适用于在浏览器中运行）和服务器端预渲染包（用于在 Node 中运行）。

更具体地说，这种方法期望：

特定于浏览器的模块和提供程序将放在app.module.browser.ts 文件中。
特定于服务器的模块和提供程序将放在app.module.server.ts 文件中。
无论执行上下文如何，所需的任何内容都将放在app.module.shared.ts 文件中。

这将允许两种不同的引导周期：一种用于浏览器（shared + browser），另一种用于服务器（shared + 服务器）。两者的主要区别在于第一个从@angular/platform-browser 包中导入BrowserModule，而后者从@angular/platform-server 包中导入ServerModule——这是从服务器渲染Angular 应用程序页面所必需的。

也就是说，您应该将所有应用引用放入 app.module.shared.ts 文件并使用 isomorphic 方法编写 Angular 代码 - 这意味着无论执行上下文如何，它都可以工作：所有其余部分都应由模板附带的默认 Webpack 配置，它将为 JIT、AoT 和服务器端渲染生成适当的客户端和服务器构建。

有关如何开始在 Angular 中编写同构代码和/或识别执行环境并做出相应反应的一些（非常）基本信息，请查看我在该主题上写的 this blog post。

【讨论】：