node.jsangulartypescriptnpmangular-universal

Adding nguniversal/express-engine to Angular proj: "Cannot find BrowserModule import in /src/app/app.module.ts"


First question

Goal

I'm trying to add SSR to my Angular project with ng add @nguniversal/express-engine --clientProject [name] (so I can dynamically prerender meta tags)

Expected Result

I expected the command to execute successfully with all the scaffolding and necessary updates to my existing files, as demonstrated in this YouTube tutorial.

Actual Result

Instead, the console says this:

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

But BrowserModule is imported in app.module.ts.

What I've Tried

  1. Reinstalling package

I've tried uninstalling the package with npm uninstall @nguniversal/express-engineand re-running the ng add above, same issue.

Other posted questions about ng adding @nguniversal/express-server don't seem to apply here, as those guys actually got as far as creating some of the scaffolding and generating the new files - no files are created for me at all, but the module does get added to my node-modules folder.

Could it be an issue with simply reading the typescript in app.module.ts? The BrowserModule import is there, and in the imports array. This is the output for 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

Additional Info (for David)

  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 { }
  1. 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));

Solution

  • This error is caused by multiple NgModules in the app.module, as the first NgModule imports doesn't contain BrowserModule.

    app would still work fine if you remove first NgModule since the modules in the imports are already imported in the second one