node.js - Lägga till nguniversal/express-engine till Angular-projekt: "Kan inte hitta BrowserModule-import i /src/app/app.module.ts"

Första frågan

Mål

Jag försöker lägga till SSR till mitt Angular-projekt med ng add @nguniversal/express-engine --clientProject [name] (så att jag kan dynamiskt förrendera meta-taggar)

Förväntat resultat

Jag förväntade mig att kommandot skulle köras framgångsrikt med all ställning och nödvändiga uppdateringar till mina befintliga filer, som demonstrerats i denna YouTube-handledning.

Faktiskt resultat

Istället säger konsolen detta:

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

Men BrowserModule är importerat i app.module.ts.

Vad jag har försökt

  1. Installerar om paketet

Jag har försökt avinstallera paketet med npm uninstall @nguniversal/express-engine och köra ng add ovan igen, samma problem.

Andra publicerade frågor om ng att lägga till @nguniversal/express-server verkar inte gälla här, eftersom de personerna faktiskt kom så långt att de skapade en del av stommen och genererade de nya filerna - inga filer skapas för mig alls, men modulen läggs till i min node-modules-mapp.

Kan det vara ett problem med att helt enkelt läsa TypeScript i app.module.ts? BrowserModule-importen finns där, och i imports-arrayen. Detta är utdata för npm ls typescript:

+-- @angular-devkit/[email 
| `-- @angular-devkit/[email 
|   `-- [email 
+-- @ng-toolkit/[email 
| +-- @ng-toolkit/[email 
| | `-- @schematics/[email 
| |   `-- [email 
| `-- @schematics/[email 
|   `-- [email 
`-- [email 

Ytterligare information (för 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));

Svar #1

Detta fel orsakas av flera NgModules i app.module, eftersom den första NgModule-importen inte innehåller BrowserModule.

appen skulle fortfarande fungera bra om du tar bort första NgModule eftersom modulerna i imports redan är importerade i den andra

Relaterade artiklar