I'm trying to build a webapp using Angular 12. However, when attempting to build, I get the following error:
Error: Module not found: Error: Can't resolve '@angular/animations/browser' in 'directorypath\@angular\platform-browser\fesm2020' Did you mean 'browser.js'? BREAKING CHANGE: The request '@angular/animations/browser' failed to resolve only because it was resolved as fully specified (probably because the origin is a '.mjs' file or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.
I have tried multiple solutions including clearing the node_modules folder and reinstalling but nothing has helped. I have also confirmed that the directory [@angular\animations] does exist.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
//import { JwtHelperService, JwtInterceptor, JWT_OPTIONS } from '@auth0/angular-jwt';
import { CookieService } from 'ngx-cookie-service';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
import { MatTableModule } from '@angular/material/table';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatSelectModule } from '@angular/material/select';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatTableExporterModule } from 'mat-table-exporter';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatDialogModule } from '@angular/material/dialog';
import { AppComponent } from './app.component';
import { NavMenuComponent } from './components/nav-menu/nav-menu.component';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
import { PasswordResetComponent } from './components/password-reset/password-reset.component';
import { AuthGuard } from './routing/auth-guard.routing';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { CalendarComponent } from './components/calendar/calendar.component';
import { SummaryComponent } from './components/summary/summary.component';
import { DispatchComponent } from './components/dispatch/dispatch.component';
import { CurrentTimeComponent } from './components/current-time/current-time.component';
import { AvailabilityComponent } from './components/availability/availability.component';
import { YardComponent } from './components/yard/yard.component';
import { ContainerDetailComponent } from './components/container-detail/container-detail.component';
import { ContainerHistoryComponent } from './components/container-history/container-history.component';
import { OrderEntryComponent } from './components/order-entry/order-entry.component';
import { OrderFormDialog } from './components/order-entry/order-entry.component';
import { ConfirmationDialogComponent } from './components/confirmation-dialog/confirmation-dialog.component';
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
LoginComponent,
PasswordResetComponent,
DashboardComponent,
CalendarComponent,
CurrentTimeComponent,
SummaryComponent,
DispatchComponent,
AvailabilityComponent,
ContainerDetailComponent,
YardComponent,
ContainerHistoryComponent,
OrderEntryComponent,
OrderFormDialog,
ConfirmationDialogComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
ReactiveFormsModule,
MatCardModule,
MatInputModule,
MatButtonModule,
MatProgressSpinnerModule,
MatDatepickerModule,
MatMomentDateModule,
MatCheckboxModule,
MatSelectModule,
MatTableModule,
MatIconModule,
BrowserAnimationsModule,
MatPaginatorModule,
MatSortModule,
MatTableExporterModule,
MatFormFieldModule,
MatDialogModule,
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'password-reset', component: PasswordResetComponent },
{ path: 'dashboard', component: DashboardComponent, pathMatch: 'full', canActivate: [AuthGuard] },
{ path: 'summary', component: SummaryComponent, pathMatch: 'full', canActivate: [AuthGuard] },
{ path: 'dispatch', component: DispatchComponent, pathMatch: 'full', canActivate: [AuthGuard] },
{ path: 'availability', component: AvailabilityComponent, pathMatch: 'full', canActivate: [AuthGuard] },
{ path: 'container/:containerId', component: ContainerDetailComponent, pathMatch: 'full', canActivate: [AuthGuard] },
{ path: 'yard', component: YardComponent, pathMatch: 'full', canActivate: [AuthGuard] },
{ path: 'container-history', component: ContainerHistoryComponent, pathMatch: 'full', canActivate: [AuthGuard] },
{ path: 'order-entry', component: OrderEntryComponent, pathMatch: 'full', canActivate: [AuthGuard] }
],
{ scrollPositionRestoration: 'enabled' }
)
],
providers: [AuthGuard, CookieService],
bootstrap: [AppComponent]
})
export class AppModule { }
package.json
{
"name": "customerportal",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:ssr": "ng run CustomerPortal:server:dev",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-material-components/datetime-picker": "^7.0.1",
"@angular/animations": "^12.2.15",
"@angular/cdk": "^12.2.13",
"@angular/common": "12.0.0",
"@angular/compiler": "^12.0.0",
"@angular/core": "12.0.0",
"@angular/forms": "12.0.0",
"@angular/material": "^12.0.0",
"@angular/material-moment-adapter": "^12.0.0",
"@angular/platform-browser-dynamic": "12.0.0",
"@angular/platform-server": "12.0.0",
"@angular/router": "12.0.0",
"@auth0/angular-jwt": "^5.0.2",
"bootstrap": "^4.6.0",
"core-js": "^3.12.1",
"jquery": "^3.6.0",
"mat-table-exporter": "^10.2.3",
"moment": "^2.29.1",
"ngx-cookie-service": "^12.0.0",
"oidc-client": "^1.11.5",
"popper.js": "^1.16.0",
"rxjs": "^6.6.7",
"tslib": "^1.10.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.0.0",
"@angular/cli": "^12.0.0",
"@angular/compiler-cli": "^12.0.0",
"@angular/language-service": "^12.0.0",
"@angular/platform-browser": "^13.1.1",
"@types/jasmine": "~3.4.4",
"@types/jasminewd2": "^2.0.9",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"ini": "^1.3.7",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.6.0",
"typescript": "4.2.4"
},
"optionalDependencies": {
"protractor": "~5.4.2",
"ts-node": "~8.4.1",
"tslint": "~5.20.0"
}
}
Thanks to Vega, the issue is due to the versioning of "@angular/platform-browser".
Solution:
@angular/platform-browser": "^13.1.1
to
"@angular/platform-server": "12.0.0"