将 nguniversal/express-engine 添加到 Angular 项目：“在 /src/app/app.module.ts 中找不到 BrowserModule 导入”

Posted 2023-03-07

【中文标题】将 nguniversal/express-engine 添加到 Angular 项目：“在 /src/app/app.module.ts 中找不到 BrowserModule 导入”

【英文标题】：Adding nguniversal/express-engine to Angular proj: "Cannot find BrowserModule import in /src/app/app.module.ts"

【发布时间】：2020-10-12 23:56:12

【问题描述】：

第一个问题

目标

我正在尝试使用 ng add @nguniversal/express-engine --clientProject [name] 将 s-s-r 添加到我的 Angular 项目中（这样我就可以动态预呈现元标记）

预期结果

我希望该命令能够成功执行，并对我的现有文件进行所有必要的更新，如 YouTube tutorial 所示。

实际结果

相反，控制台会这样说：

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 中导入的。

我的尝试

重新安装包

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

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

简单地阅读 app.module.ts 中的打字稿会不会有问题？ BrowserModule 导入在那里，并且在导入数组中。这是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

附加信息（大卫）

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  

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));

【问题讨论】：

你能显示你的app.module.ts和main.ts文件吗？

@David - 为表现出兴趣而欢呼，我已经用这些文件更新了问题。

【参考方案1】：

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

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

【讨论】：

传奇人物，谢谢！就是这样。我永远不会自己发现这一点，但现在看起来很明显。英雄！

很高兴它有帮助！ :)