在 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 文件看起来像这样，也没有导入表单模块:从 '@angular/core' 导入 { NgModule };

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 run 运行网站时它们似乎无能为力，它们必须在服务器中复制文件也是如此.

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.

推荐答案

ASP.NET Core SPA with Angular 4 模板将 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.

这将允许两种不同的引导循环:一种用于浏览器(shared + browser)，一种用于服务器(shared + 服务器).两者的主要区别在于，第一个从@angular/platform-b​​rowser 包中导入了BrowserModule，而后者从ServerModule 包中导入> 来自 @angular/platform-server 包 - 这是从服务器呈现 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 中编写同构代码和/或识别执行环境并做出相应反应的一些(非常)基本信息，请查看 这篇博文，我写的关于这个话题.

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屋！