One of the initial questions
Purpose
The main aim is to integrate SSR into my Angular project using
ng add @nguniversal/express-engine --clientProject [name]Expected Outcome
I anticipated the command to run smoothly, setting up all the necessary structures and updating existing files as detailed in this YouTube tutorial.
Actual Outcome
Instead, the console output displays:
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Cannot find BrowserModule import in /src/app/app.module.ts
Even though BrowserModule is imported in app.module.ts.
Attempted Solutions
- Reinstalling the package
I attempted uninstalling the package using
npm uninstall @nguniversal/express-engineng add, but the issue persisted.
Similar concerns raised by others regarding ng adding @nguniversal/express-server do not seem relevant in this case. While they were able to generate some scaffolding and new files, I am unable to create any files at all; although the module did get added to my node_modules directory.
Could the problem lie in a possible misinterpretation of typescript within app.module.ts? The BrowserModule import statement is present within the file and included in the imports array. Here is the output for npm ls typescript:
+-- @angular-devkit/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa8bfa3a6aee7aba4adbfa6abb88afae4f3fafbe4f2">[email protected]</a>
| `-- @angular-devkit/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3351465a5f571e5c43475a5e5a49564173031d0a03021d0b">[email protected]</a>
| `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13676a63766070617a636753203d253d26">[email protected]</a>
+-- @ng-toolkit/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2a7bcbba4b7a0a1b3be92e3fce3fce0e3">[email protected]</a>
| +-- @ng-toolkit/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="da85afaeb3b6a99aebf4ebf4efeb">[email protected]</a>
| | `-- @schematics/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1808f86948d8093a1d6cfd2cfd0d1">[email protected]</a>
| | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a3e333a2f392938233a3e0a796478647e">[email protected]</a>
| `-- @schematics/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7918171e0c15180b3949574f5741">[email protected]</a>
| `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02767b72677161706b727642302c352c30">[email protected]</a>
`-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bacec3cadfc9d9c8d3cacefa8994829489">[email protected]</a>
Additional Information (for David)
- 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));