在Angular（4）中使用拆分的应用程序模块处理导入（客户端，服务器，共享） [英] Working with imports with split app modules in Angular(4) (client, server, shared)

问题描述

我使用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文件看起来像这样，表单模块也没有被导入：
import {NgModule} from'@ angular / core';

I created a .net spa application with Angular for the front end using the yeoman generator. It creates an app with three app.module.ts files (app.module.client.ts, app.module.shared.ts, app.module.server.ts). Unfortunately the NgModule imports which are located in client app module file do not seem to be properly injected into the components. So when I try to use ngFor on an input I am given the error "Can't bind to 'ngModel' since it isn't a known property of 'input'." I think this is because the forms module is not being imported even though my app.module.client.ts file looks like this: import { NgModule } from '@angular/core';

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 {
    }

也许我缺少有关这些分开的模块如何工作的信息。在这种不同的模块架构下，如何正确导入模块？

Perhaps I'm missing something on how these divided modules work. How do I properly import modules given this different module architecture?

更新：我能够通过在app.module.server.ts中包含模块导入来解决此问题。也一样我想公开这个问题，希望有人可以解释它是如何工作的。尤为奇怪的是，来自Yeoman的预建模板在app.module.client.ts文件中导入了所有模块，并且当使用 dotnet运行运行网站时，它们似乎无能为力。

Update: I was able to solve the problem by including the module imports in the app.module.server.ts as well. I want to leave this question open and hopefully someone can explain how this works. It's especially strange since the prebuilt template from Yeoman has all the module imports in the app.module.client.ts file and they seem impotent when running the website with dotnet run they had to be duplicated in the server file as well.

推荐答案

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

The ASP.NET Core SPA with Angular 4 template splits the AppModule into three files so that Webpack will be able to efficiently compile the client-side bundle (suitable for running in browsers) and the server-side prerendering bundle (meant for running in Node).

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

More specifically, such approach expects that:

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

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

server-specific modules and providers will be put in the app.module.server.ts file.

无论执行上下文如何，任何需要的内容都会放入 app.module.shared.ts 文件。

anything needed regardless of the executing context will be put in the app.module.shared.ts file.

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

This will allow two different bootstrap cycles: one for the browsers (shared + browser) and one for the server (shared + server). The main difference between the two is that the first one imports the BrowserModule from the @angular/platform-browser package, while the latter imports the ServerModule from the @angular/platform-server package - which is required to render Angular app pages from the server.

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

That said, you should put all your app references into the app.module.shared.ts file and write your Angular code using an isomorphic approach - meaning that it will work regardless of the executing context: all the rest should be handled by the default Webpack configuration shipped with the template, which will generate the appropriate client & server builds for JIT, AoT & server-side rendering.

有关（如何）开始在Angular中编写同构代码和/或识别执行环境并做出相应反应的一些（非常）基本信息，请查看< a href = https://www.ryadel.com/zh-CN/angular-5-use-localstorage-window-document-and-other-browser-types-angular-universal/ rel = nofollow noreferrer>此博客我在该主题上写的帖子。

For some (very) basic info about how to start writing isomorphic code in Angular and/or identify the executing environment and react accordingly, check out this blog post that I wrote on the topic.

这篇关于在Angular（4）中使用拆分的应用程序模块处理导入（客户端，服务器，共享）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！