I am using angular-cli with built-in webpack and encounter the following problem: if I use ng serve --host 0.0.0.0 --port 3000 everything works fine, but when I try to build the app (no matter developer mode or production) with ng build and then put it into my nginx, not a single route works and every attempt of browser to download image, which is used on start page, ends with 404 error. What am I doing wrong? Googled a ton of stuff and nothing seems to be a solution.
Some additional info:
angular-cli: 1.0.0-beta.21
node: 6.9.4
os: win32 x64
So for everyone who encounters this problem, after some research I found this:
1) To solve problem with styles not loading properly, add encapsulation: ViewEncapsulation.None to each of your components #Component() decorator, this way it's going to bundle styles properly. More info here: https://angular.io/docs/ts/latest/guide/component-styles.html#!#loading-styles
2) Make sure all your images are stored inside assets folder. If you store them in some other folder like images, just put that images folder inside assets
3) And for information about paths not working on page reload, have a look at this question and read some information about strategies: Angular 2 : 404 error occur when i refresh through Browser
Also this link has config examples https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
Related
I am fairly new to using webpack in webapps. I am trying to build the vue js and asp.net core SPA using nodejs and webpack. I am facing this error in the screenshot. I have installed the all the dependencies using npm then I tried to run .net core vue app it opens the cshtml web page but dependencies part of the web page are not loaded. Refer another screenshot.
webpack command error
cshtml web page without any css and vue code loaded and is not compiled.
Devdependencies from Package.json
This Build command gives error in screenshot 1
Please let me know if more details are required. I will appreciate any help or suggestions. Thanks
'm posting this here, it might help, i searched my issue on google, and found this thread.
in my case, i have a custom " optin " arg, that i'm using to optin features that are not included in the base build by default. I'm doing that because i have multiple entries and multiple outputs in the same project, and some entries are not always necessary, so i let the user optin for it.
Everything worked fine, but one day i misspelled it and wrote : npm run build.prod -- -optin=myfeature and i got this error, because it was missing one " - " before the optin argument.
So it was the -o argument that was enabled instead, and it was messing up with webpack outputs
I'm developing Vuejs project with Vuetify UI framework.
After I run npm run build on the server (AWS), I got Uncaught SyntaxError: Unexpected token and the project show white screen.
Then I try to do npm run build on my laptop, but everything work fine.
I would like to know this error cause of the server environment? or any issue. And how to fix it?
Regards.
It looks like your server is serving some HTML page in place of your JavaScript files. Open one of the .js files that the errors are coming from and look at its contents. It's probably a 404 page being incorrectly served with a 200 status, or something equivalent to that.
This seems related to BABEL: Unknown option: base.Children, but the fixes provided there don't help my situation. Two days ago I had an Electron application that ran in development mode (via 'electron-forge start') and as a packaged application (starting the executable in the folder produced by 'electron-forge package'). The app continues to run in development, and it will execute in production, but Babel produces an error in the Web console:
Unknown option: base.Children. Check out http://...
This occurs on the first require statement calling for one of my JSX files (there's another thing: react-forge doesn't transpile the JSX, and I suspect I'm about to be told to RTFM over that matter). I can get the same error to pop up whenever I want; all I have to do is enter "require('somefile.jsx')" in the console, and it'll do the same thing. Investigation of the error reveals that the options manager's mergeOptions function is passed a copy of React at one point during the loop that's supposed to incorporate the presets and plugins. Again, this did not start happening after a change to the application code; I tried to update some packages in NPM, and the next build I did produced this error.
I've wiped the node_modules directory completely and run a fresh 'npm install' followed by 'electron-rebuild' and a repackaging of the app produces the same results. I've tried incorporating the .babelrc contents in package.json according to the docs at the Babel website. Again, dev works fine and production fails. Creating a compliant .compilerc produced similarly disparate results. How is my production app getting a React component where it should have the Babel options?
I just found the solution. It's a combination problem. React itself and the React preset for Babel both answer to 'react' as a preset name. If the plugin is missing but React is present, Babel will pull React and pass it to mergeOptions, producing the error described.
On the other side, if you've made the mistake of requiring a module (like the React preset) in your package.json under both dev dependencies and general dependencies, the packaging subprocess run by electron-forge will ignore the entry under general dependencies. Result: no preset, and instead of spitting out a "missing a preset" error, Babel just sucks up React itself and pretends it's found the preset it was told to look for.
I am getting error while i use the angular2 from node_modules.
How do I fix? What I missed in my html file?
Please give me a git repo for angular2 for offline development.
Edit: I missed that the console was throwing other errors, too. I use Karma to run unit tests for an angular2 app and borrowed much of my test setup from the angular2 project itself.
Karma loads the files and since I'm using them for test, I load out of node_modules. The first four must be loaded first and in this order before bringing in angular2 and other libs:
'node_modules/angular2/node_modules/traceur/bin/traceur-runtime.js',
'node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/angular2/**/*.js
Then a test helper configures System:
System.config({
...
paths: {
'angular2/*': 'node_modules/angular2/*.js',
'rx': 'node_modules/angular2/node_modules/rx/dist/rx.js'
}
...
});
Hope that helps. You may want to pull the files you need into a lib directory if you're serving them with your code.
Im trying to build a electron app using electron builder and I am getting the following error: Error: image /home/runner/work/granio/granio/build/icon.ico must be at least 256x256. This error is suprising because I tripled checked that the icon is in fact, 256x256. Is this a bug with electron? Icon Size
Thanks,
Evan
I had the same problem with docker.
Because I put my electron project in a directory not isolated.
I used an Apache's HTTP server (https://hub.docker.com/_/httpd) and I put the project in the directory usr/local/apache/ with others files.
I suspect that to build an electron project you must have a directory with only project's files. Otherwise, electron-builder throws that error.
I hope this help someone!