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

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

更具体地说，这种方法需要：

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

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

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

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

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

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

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

1 个答案: