angular - 如何在Angular 5 Universal应用程序中排除浏览器模块

Question

我正在尝试创建一个 Angular Universal 应用程序，该应用程序在构建时构建一个特定的路线，以将 AppShell 注入(inject) Index.html 页面，作为尽快在用户面前获得有意义的内容的一种手段(当 Angular 应用程序正在下载时)。我按照 Angular University 中的说明进行操作我让它按照指示工作。但是，当我将现有应用程序的功能系统地添加到此测试应用程序中时，我遇到了“意外 token 导入”错误，该错误源于浏览器应用程序所需的第 3 方插件，但对于我非常简单的服务器应用程序不需要'正在尝试构建并注入(inject) Index.html 作为我的 App Shell。

我花了几个小时研究这个，发现很多推荐 webpack 的帖子，但是，我使用的是 Angular CLI。我不确定如何将 webpack 与 Angular CLI 构建过程结合起来。

我找到了 post这似乎表明您可以使用 tsconfig.server.json 的排除部分从 Angular Universal 构建中排除模块。我已经尝试在 tsconfig.server.json 中列出要排除的模块，但是，我仍然收到“意外的 token 导入”错误。

我有一条路线需要构建并注入(inject)到我的索引页面中。我希望/认为我应该能够排除我的绝大多数应用程序，因为它与创建 AppShell 无关。我认为 Angular 应该简单地构建为服务器应用程序注册的路由所需的必要位。

我正在使用 Angular CLI 1.7.3 版和 Angular 5.2.4 版。

有没有人知道如何将不必要的模块排除在 Angular Universal 应用程序中？

谢谢你的时间。

Answer 1

您可以尝试专门为浏览器创建第三个模块。
这个 BrowserModule 将包含您在浏览器中所需的一切。

import { NgModule } from '@angular/core';    
import { AppModule} from './app.module';
import { AppComponent } from './app.component';
// other browser exlusive imports

@NgModule({
  imports: [
    // browser exlusive imports
    AppModule
  ],
  bootstrap: [AppComponent]
})
export class AppBrowserModule { }

然后你在 main.ts 文件中引导这个新模块而不是你的 AppModule。这个 StackOverflow 问题也讨论了这种方法: Need BrowserAnimationsModule in Angular but gives error in Universal这里要在服务器上排除的模块是 BrowserAnimationsModule，但对于服务器上不需要的任何其他模块，它应该几乎相同。
如果您需要在浏览器中包含脚本，您可以将它们导入您的 main.ts 中，并且它们应该可用于您的整个应用程序。

如果您需要检查您是否在浏览器上，您可以从 Angular 使用 isPlatformBrowser: https://angular.io/api/common/isPlatformBrowser
@Optional 装饰器也非常方便( https://angular.io/api/core/Optional)，如果您只想通过依赖注入(inject)在您的组件或服务之一的浏览器中包含某些内容。
您可能需要这些来防止由于服务器呈现的应用程序上缺少文件而导致的错误。

您描述的导入错误是由第三方库未正确构建其库引起的。解决此问题的一种简单方法是在引发这些错误的文件上使用 babel。
例如，如果您有一个名为“failingPackage”的包:

babel ./node_modules/failingPackage -d ./node_modules/failingPackage --presets es2015

您基本上是在编译损坏包的所有文件，并用新文件覆盖旧文件。我正在告诉您这种方法，因为您可能会在您希望在服务器呈现的应用程序上使用的包上遇到此错误。

您可以在此处阅读有关此问题的更多信息: https://github.com/angular/angular-cli/issues/7200

这里讨论了使用 babel 的解决方案: https://github.com/SebastianM/angular-google-maps/issues/1052
全部功劳归于 Anthony Nahas。

或者，您可以尝试以下解决方案: "Unexpected token import" error with Angular4 + Universal + ng-bootstrap

使用 ng 弹出创建 webpack.config.js

安装 webpack-node-externals

将 webpack.config.js 的外部部分中的失败包列入白名单