Ok, So I have this Spring Boot - Angular2 app bundled together in a single pom file (with maven frontend plugin) which I want to upgrade to Angular 8.
I did all the necessary changes required and when I deploy the app to tomcat, the application doesn't load and all I get is a white blank screen.
I checked the console the this is the error:
Uncaught ReferenceError: webpackJsonp is not defined
at polyfills.0af4ac47d2b4b3f23f57.bundle.js:1
I checked for this error on StackOverflowbut couldn't find the solution. Am sure there might be some configuration issues which am not able to identify.
Here is the configuration changes I did:
Added tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
tsconfig.spec.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
index.html
<meta charset="utf-8">
<title>My Portal</title>
<base href="/MyPortal/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/pb_logo_final.png">
</head>
<body>
<app-root></app-root>
</body>
</html>
Here is how my pom plugins look like:
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.0</version>
<configuration>
<workingDirectory>${angular.project.location}</workingDirectory>
<installDirectory>${angular.project.nodeinstallation}</installDirectory>
</configuration>
<executions>
<!-- It will install nodejs and npm -->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v10.15.3</nodeVersion>
<npmVersion>6.4.1</npmVersion>
</configuration>
</execution>
<!-- It will execute command "npm install" inside "/e2e-angular2" directory -->
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<!-- It will execute command "npm build" inside "/e2e-angular2" directory
to clean and create "/dist" directory -->
<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
<!-- Plugin to copy the content of /angular/dist/ directory to output
directory (ie/ /target/transactionManager-1.0/) -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>default-copy-resources</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<overwrite>true</overwrite>
<outputDirectory>${project.basedir}/src/main/webapp/</outputDirectory>
<resources>
<resource>
<directory>${project.basedir}/${angular.project.location}/dist</directory>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
I looked into the page source on the browser and it loads up following scripts:
<meta charset="utf-8">
<title>My Portal</title>
<base href="/MyPortal/">
<meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="assets/pb_logo_final.png">
<link href="styles.51a2f0b5202a971140a2.bundle.css" rel="stylesheet"/></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.f3fde1d9c5d2605e9d90.bundle.js"></script>
<script type="text/javascript" src="polyfills.0af4ac47d2b4b3f23f57.bundle.js"></script>
<script type="text/javascript" src="main.ac406425285365c681b3.bundle.js"></script>
</body>
</html>
I do mvn clean install , copy the war file in tomcat webapp and start the server. I hit localhost:8080/MyPortal/ which ideally should open the main page of the app but shows up blank screen.
Not sure why? Have already looked into few answers so this is not a duplicate.
Any help would be appreciated.
