使用Angular（4）中的拆分应用程序模块导入（客户端、服务器、共享）

我使用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 4模板的ASP.NET Core SPA将AppModule分为三个文件，以便Webpack能够高效地编译客户端包（适用于在浏览器中运行）和服务器端预渲染包（适用于在节点中运行）

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


特定于浏览器的模块和提供程序将放在
app.module.browser.ts
文件中

特定于服务器的模块和提供程序将放在
app.module.server.ts
文件中

无论执行上下文如何，所需的任何内容都将放在
app.module.shared.ts
文件中


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

也就是说，您应该将所有应用程序引用放入
app.module.shared.ts
文件中，并使用
同构
方法编写角度代码-这意味着无论执行上下文如何，它都会工作：所有其余的都应该由模板附带的默认网页包配置处理，这将为JIT、AoT和服务器端渲染生成适当的客户端和服务器构建

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