I am a beginner to Angular2.
This is the article I was following:
https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
Tl;dr: ng new app, ng serve, npm install express etc, create server files, ng build and finally node express.js to serve index.html from dist
My problem with the app build in this article is that it serves from dist which means I would have to stop the server, run a new build and restart the server on every change which is quite cumbersome from pov of a developer. I want my changes to the client side to be reflected on each refresh.
Can someone point me in the right direction so as to achieve this? Or let me know how to to get the architecture right even if it means starting from scratch
PS:I have been trying to modify this example to serve from development (src/) however so far am unsuccessful. The browser is unable to find dependencies, shows the "loading.." throws errors like "System is not defined" and "Syntax error '<'.
I understand your pain point. I've seen this tutorial and its fair up to some extent, but as you said there is no auto-refresh script written for changes. However, I have then decided to create my own repository for the MEAN stack project development. Check the following URL where I hosted my MEAN app including
browser-sync
gulp
nodemon
https://github.com/darpanpathak/MEAN2-MarvelApp
This repository will help you a lot for starting MEAN stack application with angular2.
thumbs up if you are looking for the same.
Tl;dr: ng new app, ng serve, npm install express etc, create server
files, ng build and finally node express.js to serve index.html from
dist
To make webpack to watch your changes during development you just have to add --watch when you build your app. So you should type something like this in a console terminal:
ng build --watch
And then run your server:
node server.js
That should work.
I came across this problem as well, so I wrote a little post about it.
You can find the detailed solution here.
In summary, what worked for me is to use different ports for the server and client, and configure my npm start command to run both server & client in parallel.
You will have hot reloading (when you change the client code, it will refresh the web browser instantly), and the web page will call your server API.
BTW, I couldn't make ng build --watch to work, so I had to think about this workaround.
Related
Compilation successfully while running the command npm run watch on compute engine ubuntu terminal but no changing effects. I use the Larave+Vue project hosted on the Ubuntu VM instance on GCP. I search much time for this issue but not able to find any solution. I found a similar problem on StackOverflow but there is no answer to solve my problem. Please check the link below:
I am using Putty to run and compile vue js + laravel app on Godaddy VPS. Changes are not taking effect
Please help...
Thanks in advance.
Maybe try npm run watch-poll instead, on certain systems watch doesn't trigger changes but wacth-poll will periodically checks (polls) for changes.
I'm building an application using Oracle Application Express (APEX) [so no existence of Node].
I have two issues which are somehow related concept-wise.
Issue #1:
I've included the React.js library in all of my pages to use some of its features.
I'm using babel to convert my JSX to simple JS. Everything's working fine.
But I keep on getting this warning in my console :
You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
I know I must precompile my scripts but I have no idea how. I visited the link and it got me all the more confused.
Issue #2:
The other issue I have is that I've got all my react related code in a separate .js file and I have embedded it in my page using this :
<script src="someJSFile.js" type="text/babel"></script>
Setting the type to "text/babel" raises this warning :
Fetching scripts with an invalid type/language attributes is deprecated
and will be removed in M56, around January 2017.
See https://www.chromestatus.com/features/5760718284521472 for more details.
Is there any workaround for this issue?
Issue 1: This is linked to what ever bunlder you choose (see issue 2 below). Which ever you do choose, will allow you to set the node env to production, which will put React in "production" mode - basically scraping out all the unneeded (but helpful) development messages and checks.
Issue 2: You will need some module bundler at the end of the day. Webpack is the goto at the moment. Webpack Site
Alternatives include:
Gulp + Browserify
Rollup
EDIT: I know you said "no node". You won't need node to run anything on the server, only on your local machine where you build the files. Node is easy to install on pretty much any local machine
I am using ASP.Net Core, Angular2 and Typescript and connected all together with webpack using the tutorial from Angular2 team here. That all seems to work but now I need to build each time I change a file.
Original tutorial uses system.js and that loads tons of files of course, but I just use static file middleware and no build is required for development. That is very convinient, but I cannot figure out how to do the same with webpack. It seems that webpack can only bundle everything together without an option to just load everything separately so I need to run the build each time.
Is it possible to do something so that webpack "expands" the bundle in some easy way?
P.S. I would like not to use webpack dev server and some auto-build on save and so on since the complexity is rather high alredy. So ideal solution is that I have bundles for production but direct code loaded for development like in good old days with standard mvc bundling.
Really, the best way would be to use webpack dev server. There's really not much setup involved, it's just a different command you run instead of webpack:
npm install webpack-dev-server
webpack-dev-server webpack.config.js
Then you just point script sources to http://localhost:8080/webpack-dev-server/your-bundle-name.js" in your application` tags.
This is by far the best option as you get instant incremental recompile and live-reload.
While I would strongly encourage you to use webpack-dev-server you can also just use plain webpack in watch mode:
webpack ---watch
There is no way to "expand the bundle" (and really no need to). In all likelyhood you are using webapack for more than just bundling, so you'd still require to re-build if you change a typescript file, for example. Webpack dev server or webpack in watch mode do very quick incremental compiles, and most people will just leave them running while developing.
Currently I have a NodeJS Application that starts an http server with client side code that is written in TypeScript and using Angular 2.
is it possible to do the same in Go ?
I tried googling for TypeScript and Go and didn't find anything relevant.
should I have nodeJS installed, install typescript compiler with npm install -g typescript, compile the typescripts whenever I change them and provide the javascript files on my Go Server ?
any information regarding the issue would be greatly appreciated.
thanks!
You have a couple of options here:
Do the translation client side by including the typescript library in your html and loading <script type='text/typescript' src="/myscript.ts"></script>
Run tsc -w in the background and just serve the compiled javascript. You could launch it when your app starts so it dies with your app as well. I only run tsc in "dev" mode, and check in the js files for production use.
Run tsc on demand when you receive requests, and cache results. Probably pretty tricky to detect changes but there are packages to help with that.
So I am using the Aurelia skeleton-navigation starter as recommended. However, when I run the gulp bundle task the application will no longer load the main UI, it get's stuck on the spinner/loading page. I found this issue but even after installing the jspm beta it still doesn't seem to be resolved. Anyone had any luck? For what it is worth, I do not even see an aurelia.js bundle being created in the /dist directory so the 404 certainly makes sense in that respect.
So I have a fix, I am not thrilled with it though. It seems if you run bundle then run gulp watch to start the webserver, that the bundled files get wiped out from the dist folder. Running gulp watch in one command window and gulp bundle in another results in it working correctly as the bundled js is there at that point. I hope for a better fix from someone, this seems kind of hacky.