SyntaxError: Unexpected token '<' SystemJs ( 0.21.5v ) - node.js

Question

I have Angular 9.0v and NodeJS 12.16v, systemjs 0.21.5v, core-js 2.6.9v in my package.json file.
I am getting this error -
(index):153 SyntaxError: Unexpected token '<'
at eval (<anonymous>)
at evaluate (http://localhost:8080/node_modules/systemjs/dist/system.src.js?1582797940325:2860:18)
at http://localhost:8080/node_modules/systemjs/dist/system.src.js?1582797940325:3665:23
at doEvaluateDynamic (http://localhost:8080/node_modules/systemjs/dist/system.src.js?1582797940325:1166:33)
at http://localhost:8080/node_modules/systemjs/dist/system.src.js?1582797940325:1026:17
at doEvaluateDynamic (http://localhost:8080/node_modules/systemjs/dist/system.src.js?1582797940325:1163:9)
at http://localhost:8080/node_modules/systemjs/dist/system.src.js?1582797940325:1026:17
at Object.eval (http://localhost:8080/app/main.js:3:14)
at eval (http://localhost:8080/app/main.js:13:4)
at eval (http://localhost:8080/app/main.js:14:3) Not expecting this error? Report it at https://github.com/mgechev/angular2- seed/issues
I have server and client. This is src/client file which has the main issue. Server is running.
App.module.ts
import { ErrorHandler, NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { BrowserModule, Title } from '#angular/platform-browser';
import { APP_BASE_HREF } from '#angular/common';
import { RouterModule } from '#angular/router';
import { routes } from './app.routes';
import { Http, HttpModule, RequestOptions, XHRBackend } from '#angular/http';
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
import { AppRequestOptions, LoaderService, MessageService, SessionStorageService, ThemeChangeService,
BaseService, CommonService } from './shared/index';
import { ContactService } from './framework/dashboard/contact/contact.service';
import { ContactService1 } from './framework/home-page/home-page.service';
import { ActivateUserComponent } from './framework/registration/activate-user/activate-user.component';
import { ActiveUserService } from './framework/registration/activate-user/activate-user.service';
import { RedirectRecruiterDashboardService } from './user/services/redirect-dashboard.service';
import { LoggerService, MyErrorHandler } from './build-info/framework/my-error-handler.service';
import { UserModule } from './user/user.module';
import { SharedModule } from './shared/shared.module';
import { CustomHttp } from './shared/services/http/custom.http';
import { SharedService } from './shared/services/shared-service';
import { PageNotFoundComponent } from './shared/page-not-found/page-not-found.component';
import { AuthGuardService } from './shared/services/auth-guard.service';
import { HttpDelegateService } from './shared/services/http-delegate.service';
//Application IMPORTS
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import {ValidationService} from './shared/customvalidations/validation.service';
import {ErrorService} from './shared/services/error.service';
import {UsageTrackingService} from './build-info/framework/usage-tracking.service';
import {CreateProjectModule} from './build-info/framework/create-project/create-project.module';
import {DashboardModule} from './framework/dashboard/dashboard.module';
import {BuildingModule} from './build-info/framework/project/building/building.module';
import {ResetPasswordModule} from './framework/login/forgot-password/reset-password/reset-password.module';
import {CreateBuildingModule} from './build-info/framework/project/building/create-building/create-building.module';
import {LoginModule} from './framework/login/login.module';
import {CandidateSignUpModule} from './framework/registration/candidate-sign-up/candidate-sign-up.module';
import {ForgotPasswordModule} from "./framework/login/forgot-password/forgot-password.module";
import { AdminComponent } from './build-info/framework/admin/admin.component';
import { AdminService } from './build-info/framework/admin/admin.service';
import {ProjectHeaderVisibilityService} from "./shared/services/project-header-visibility.service";
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes),
HttpModule,
ReactiveFormsModule,
SharedModule,
UserModule,
CreateProjectModule,
CreateBuildingModule,
BuildingModule,
DashboardModule,
ResetPasswordModule,
ForgotPasswordModule,
LoginModule,
CandidateSignUpModule,
BrowserAnimationsModule
],
declarations: [
AppComponent,
ActivateUserComponent,
PageNotFoundComponent,
AdminComponent
],
providers: [
{
provide: Http,
useFactory: httpFactory,
deps: [XHRBackend, RequestOptions, MessageService, LoaderService]
},
{provide: RequestOptions, useClass: AppRequestOptions},
LoggerService, {provide: ErrorHandler, useClass: MyErrorHandler},
{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
},
ContactService,
ContactService1,
ActiveUserService,
RedirectRecruiterDashboardService,
SharedService,
Title,
AuthGuardService,
HttpDelegateService,
LoaderService,
UsageTrackingService,
ValidationService,
SessionStorageService,
MessageService,
SharedService,
ThemeChangeService, CommonService, BaseService, CustomHttp, ErrorService, SessionStorageService,
AdminService,
ProjectHeaderVisibilityService
],
bootstrap: [AppComponent]
})
export class AppModule {
}
export function httpFactory(backend: XHRBackend, defaultOptions: RequestOptions, messageService: MessageService,
loaderService: LoaderService) {
return new CustomHttp(backend, defaultOptions, messageService, loaderService);
}
Here above code is app.module.ts

Answer 1

Check in the network tab whether all the packages have been loaded properly or not or if you see html in that package then it means file is not found yet.
This is because node modules were not loaded properly. I fixed this issue by importing all the modules in a single system.config.ts.
Also add these lines in index.html
<script src="<%= APP_BASE %>app/system-config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err) })
</script>
system.config.ts
SystemJS.config({
paths: {
['app/main'] : `app/main`,
'#angular/animations':
'node_modules/#angular/animations/bundles/animations.umd.js',
'#angular/platform-browser/animations':
'node_modules/#angular/platform-browser/bundles/platform-browser-animations.umd.js',
'#angular/common': 'node_modules/#angular/common/bundles/common.umd.js',
'#angular/compiler':
'node_modules/#angular/compiler/bundles/compiler.umd.js',
'#angular/core': 'node_modules/#angular/core/bundles/core.umd.js',
'#angular/forms': 'node_modules/#angular/forms/bundles/forms.umd.js',
'#angular/common/http': 'node_modules/#angular/common/bundles/common-http.umd.js',
'#angular/platform-browser':
'node_modules/#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic':
'node_modules/#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/router': 'node_modules/#angular/router/bundles/router.umd.js',
'#angular/animations/browser':
'node_modules/#angular/animations/bundles/animations-browser.umd.js',
'#angular/common/testing':
'node_modules/#angular/common/bundles/common-testing.umd.js',
'#angular/compiler/testing':
'node_modules/#angular/compiler/bundles/compiler-testing.umd.js',
'#angular/core/testing':
'node_modules/#angular/core/bundles/core-testing.umd.js',
'#angular/common/http/testing':
'node_modules/#angular/common/bundles/common-http-testing.umd.js',
'#angular/platform-browser/testing':
'node_modules/#angular/platform-browser/bundles/platform-browser-testing.umd.js',
'#angular/platform-browser-dynamic/testing':
'node_modules/#angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'#angular/router/testing':
'node_modules/#angular/router/bundles/router-testing.umd.js',
'html2canvas': 'node_modules/html2canvas/dist/html2canvas.min.js',
'lodash': 'node_modules/lodash/lodash.js',
'device_uuid': 'node_modules/device-uuid/lib/device-uuid.min.js',
'highcharts': 'node_modules/highcharts/highcharts.js',
'jspdf': 'node_modules/jspdf/dist/jspdf.min.js',
'app/': `/app/`,
// For test config
'dist/dev/': '/base/dist/dev/',
'': 'node_modules/',
},
packages: {
'app': {
main: 'main.js',
defaultExtension: 'js'
},
'rxjs': {
main: 'index.js',
defaultExtension: 'js'
},
'rxjs/operators': {
main: 'index.js',
defaultExtension: 'js'
},
'rxjs/internal/operators': {
main: 'index.js',
defaultExtension: 'js'
},
}
});