我正在尝试创建一个Angular Universal应用程序，该应用程序会在构建时构建一条特定的路线，以将AppShell注入Index.html页面，以此作为一种手段（尽快在Angular应用程序下载时）在用户面前获得有意义的内容。我正在按照Angular大学的说明进行操作，并且按照说明进行操作。但是，当我系统地将现有应用程序的功能添加到该测试应用程序中时，我遇到了“意外令牌导入”错误，该错误源于浏览器应用程序所需的第三方插件，但对于非常简单的服务器应用程序则不需要正在尝试以我的App Shell的身份构建并注入Index.html。
我花了几个小时研究这个问题，发现那里有很多推荐Webpack的文章，但是，我正在使用Angular CLI。我不确定如何将webpack与Angular CLI构建过程合并。
我发现这篇文章似乎表明您可以使用tsconfig.server.json的exclude部分从Angular Universal构建中排除模块。我尝试列出要排除在tsconfig.server.json中的模块，但是，我仍然收到“意外的令牌导入”错误。
我只有一条路线需要构建并注入到“索引”页面中。我希望/认为我应该能够排除我的绝大多数应用程序，因为它与创建AppShell无关。我认为Angular应该只为服务器应用程序注册的路由构建所需的必要位。
我正在使用Angular CLI 1.7.3版和Angular 5.2.4版。
是否有人对如何从Angular Universal应用程序中排除不必要的模块有见识？
谢谢你的时间。
您可以尝试专门为浏览器创建第三个模块。该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问题中也讨论了这种方法：在Angular中需要BrowserAnimationsModule，但在Universal中却给出了错误
。在服务器上要排除的模块是BrowserAnimationsModule，但是对于在模块上不需要的任何其他模块，它应该几乎相同。服务器。
如果需要在浏览器中包含脚本，则可以将其导入main.ts中，并且它们应可用于整个应用程序。
如果需要检查您是否在浏览器上，则可以从以下角度使用isPlatformBrowser：https
://angular.io/api/common/isPlatformBrowser @Optional装饰器也可以非常方便使用（https://angular.io/api / core /可选），如果您只想通过依赖注入在某些组件或服务之一的浏览器中包含某些内容。
您可能需要这些来防止由于服务器渲染的应用程序上的文件丢失而导致的错误。
您描述的导入错误是由第三方库未正确构造其库引起的。解决此问题的一种简单方法是在抛出这些错误的文件上使用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完全功劳。
或者，您可以尝试以下解决方案：Angular4 + Universal + ng-bootstrap出现“意外的令牌导入”错误
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句