I have an Angular application which is build with the Angular-CLI. I want to deploy this project to a Spring-Microservice. When i deploy the build, which generated with the cli-command ng build --prod the application works fine.
But: I want to deploy the Original files including my typescript files to the Microservice so i can see where my console-logs come from (which line in which file, just the same as when i run the application locally with "ng serve").
A few months ago, i had a Angular-project which i started with the Angular Quickstart. I ran this project with NPM (commands: npm install and npm start). This project transpiled the typescript-files to javascript, and for this reason, this project is deployable and works fine.
But my CLI-project dont do that, so it is not deployable.
How can I deploy my application as described?
In this presentation, I generated an Angular project with CLI, generated a REST server using Spring Boot, and showed how to deploy this Angular app under the Spring server https://youtu.be/k8r76d8QzXs?t=870.
To be able to debug your Typescript code with prod bundles, use add the --sourcemaps option:
ng build -prod --sourcemaps true
When you build an Angular project with the production flag the Angular CLI creates and the sourcemaps (you can identify them from their extension .map.js) of the minified Javascript files.
The easiest way to go is to deploy all the generated files.
When you open the developer tools of the browser to debug them the browser recognize them, and generates the unminified Javascript files. You can find them on Sources Panel. (e.g. Chrome)
So you don't need the original Typescript files
I am not sure, if you can see on your console when you log something, the exact file and line where the original code is, from a minified Javascript file.
Related
I am new to webpack and angular-cli. My problem is that when I create an Angular 4 project using angular-cli, everything works fine with ng-serve but everything get bundled by default. Web pack bundling info:
I am not able to see the component.ts files in browser to debug. Is there any way to disable the bundling? angular-cli version details:
When you do ng serve with the CLI, it will create sourcemap files by default. That means, that although the source files are bundled together, you can view the original source files in the debugger and step through them.
You find them in the DevTools under the tab Sources, the folder webpack://
If you want to view your prod build like this, you can add the flag -sm for sourcemaps. In the prod build, there won't be sourcemaps by default.
ng serve --prod -sm
Yes also you can enable and disable this from the developer tool option
Go to setting (press F12 then F1 ). Under the source you can enable and disable to source mapping. In deploy time you not going to put the map file so this will not get downloaded.
Developer tool settings
Use following build command to hide your source code under Sources Tab
ng build --no-sourcemap ( Development environment )
ng build --env=prod --no-sourcemap (Production environment)
I am working on a web application using angular 2 with typescript and angular-cli. I wanted to make a test on the server but I didn't want to upload the source code then I tried using the command "ng build --prod". I see that the .map files was on the folder yet and I deleted all .map files and I uploaded the folder on the server, When I opened the dev tool on chrome I saw the source code with TypeScript. The files that I didn't delete were the .gz files. My question is What is the correct way to build a production project without the typescript code with webpack?.
Sorry but I don't speak english well. And I don't know if I am describing in the corret way my dude.
What I want is not to show my TypeScript code for anyone that activate developer mode.
I'm not sure what you mean by, "build a production project without the typescript code".
When you build a project with ng build it compiles all the typescript into js and minifies it. For example, here is the output of ng build for me (note there are no typescript files here):
As you noted you can also use the -prod which sets the environment production value to true and gives you a slightly smaller, more optimized build. If you just want to test you app in the browser you can use ng serve or ng serve -prod.
I've searched all over google and checked out the official docs for Webpack but have not had any luck finding a tutorial/guide/plugin to even do this. Has anyone done this before or should I just drop webpack altogether and go for a grunt-maven-war file generator instead?
Well, there is nothing special in building spring-boot with webpack. You can install node globally, you can install it during build...
You just add plugin to pom.xml to run node command i.e. (https://github.com/eirslett/frontend-maven-plugin)
And that actually it. It runs webpack and you get your js, css, fonts, ... files in some folder. Now you proceed like it is usual static assets, pack them into war and enjoy.
I've got two projects which I've created:
A web UI built using webpack
A Vert.x webserver written in java built using Gradle
I want to find a way to bring the resulting build dir contents of the first project into the second as the webroot which will be server up using the StaticHandler.
Is anyone aware of a clean way to do this? I want to preserve the two git projects as they are because I like using the webpack dev server for development of the UI and it generally feels cleaner to have them separated.
I was looking at potentially using the bitbucket pipelines build on my repo, however bringing the assets generated by the first project into the build of the second is where I'm facing issues.
You could create a gradle task that before that depends on the jar task (so it runs before it) executes webpack compile into the resources directory. So when your jar task runs it bundles the compiled webpack code.
I would like you to share your way of deploying complicated JS projects, where Grunt or Gulp are used.
For example, grunt build command concats css, js files, puts minified bower dependencies into dist folder. As far as i know, we should not store build results in version control repo, shouldn't we? Also, development environment is not needed on production server.
That is why flow like: git push production, and then grunt build on production server, then restarting it is not a good practice, isn't it?
The purpose o question is to find out, how should I deploy complicated JS projects when:
Building is necessary.
Building should not be done on production server.(Or it is a normal practice?)
Build results should not be indexed by version control system.
Deployment should not be done manually.