将nguniversal/express-engine添加到Angular proj："Cannot find BrowserModule import in /src/app/app.module.

Question

第一个问题

目标

我正在尝试使用ng add @nguniversal/express-engine --clientProject [name]将 SSR 添加到我的 Angular 项目中(这样我就可以动态预渲染元标记(

预期成果

我希望该命令能够成功执行所有基架和对现有文件的必要更新，如本 YouTube 教程所示。

实际结果

相反，控制台是这样说的：

Installing packages for tooling via npm.
Installed packages for tooling via npm.
Cannot find BrowserModule import in /src/app/app.module.ts

但是 BrowserModule是在app.module.ts 中导入的。

我尝试过什么

1. 重新安装软件包

我尝试使用npm uninstall @nguniversal/express-engine卸载软件包并重新运行上面的ng add，同样的问题。

其他关于 ng 添加 @nguniversal/express-server 的问题似乎不适用于这里，因为这些家伙实际上已经创建了一些脚手架并生成新文件 - 根本没有为我创建任何文件，但模块确实被添加到我的节点模块文件夹中。

这可能是简单地阅读app.module.ts中的打字稿的问题吗？浏览器模块导入在那里，并且在导入数组中。这是npm ls typescript的输出：

+-- @angular-devkit/build-angular@0.901.8
| `-- @angular-devkit/build-optimizer@0.901.8
|   `-- typescript@3.6.5
+-- @ng-toolkit/universal@1.1.21
| +-- @ng-toolkit/_utils@1.1.51
| | `-- @schematics/angular@7.3.10
| |   `-- typescript@3.2.4
| `-- @schematics/angular@0.6.8
|   `-- typescript@2.7.2
`-- typescript@3.8.3

附加信息(大卫(

1. app.module.ts

import { BrowserModule, Meta, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { SoftwareComponent } from './software/software.component';
import { MediaComponent } from './media/media.component';
import { ShopComponent } from './shop/shop.component';
import { FilmDetailsComponent } from './film-details/film-details.component';
import { ShareModalComponent } from './share-modal/share-modal.component';
import { ShareModule } from 'ngx-sharebuttons';
import { ShareButtonModule } from 'ngx-sharebuttons/button';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';


@NgModule({
imports: [
ShareButtonModule,
ShareIconsModule // Optional if you want the default share icons
]
})
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
HomeComponent,
SoftwareComponent,
MediaComponent,
ShopComponent,
FilmDetailsComponent,
ShareModalComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FontAwesomeModule,
ShareModule,
ShareButtonModule,
ShareIconsModule
],
providers: [Meta, Title],
bootstrap: [AppComponent]
})
export class AppModule { }

2. main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

Answer 1

此错误是由 app.module 中的多个 NgModule 引起的，因为第一个 NgModule 导入不包含 BrowserModule。

如果您删除第一个 NgModule，应用程序仍然可以正常工作，因为导入中的模块已经在第二个中导入