在Angular（4）（客戶端，服務器，共享）中使用具有拆分應用程序模塊的導入

Question

我使用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時它們似乎無能爲力，因此它們必須在服務器文件中重複。

Answer 1

的ASP.NET核心SPA與角4模板拆分的AppModule成三個文件，以便將的WebPack能夠有效編譯客戶端側束（適用於瀏覽器中運行）和服務器側預渲染包（意味着在Node中運行）。

更具體地，這樣的方法預計：

• 特定瀏覽器的模塊和提供商將放於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文件，並使用isomorphic方法寫你的角碼 - 這意味着它會無論工作執行上下文的：所有剩下的應該由默認處理的WebPack配置隨模板一起提供，它將生成適當的客戶端&服務器版本用於JIT，AoT &服務器端呈現。

有關如何開始在Angular中編寫同構代碼和/或識別執行環境並作出相應反應的一些（非常）基本信息，請參閱read this post。