I'm looking for an example project that's using Angular 6 Universal and is successfully deploying to GCP App Engine. I've searched GitHub but can't find an example--the Universal Starter doesn't include deployment. Also, my old Angular 5 Universal config is not working for this new V6 project.
The current error is coming from nginx: "502 Bad Gateway"
It seems to be the favicon.ico file that's causing the problem--looks like a Node.js issue. I just dealt with this on a pure Node.js project (not Angular) and was able to resolve it, but I can't find the right config in the Angular context.
server.ts
app.use(favicon('src/favicon.ico'));
angular.json (start of it)
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"appname": {
"root": "",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
{
"glob": "favicon.ico",
"input": "src",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
],
"styles": [
{
"input": "node_modules/#angular/material/prebuilt-themes/indigo-pink.css"
},
"src/styles.css"
], ...
dispatch.yaml (because I have multiple services using the same domain)
dispatch:
# Default service serves the typical web resources and all static resources.
- url: "*/favicon.ico"
service: default
The issue was not properly starting Node in package.json. This one line in scripts fixed the problem...
"scripts": {
...
"start": "node dist/server.js",
Related
I have an Angular application that I am trying to debug in VS Code. When I write code in a particular .ts file and put a breakpoint on a method or statement, it is bound. But when I try to debug through Run > Start Debugging, the breakpoint becomes unbound. Once debugging starts, nothing happens afterwards. Neither does it hit the breakpoint, nor do the buttons (Step Over, Step Into, Run, etc.) of the floating debugging toolbar at the top get enabled. I followed this and this videos, and tried almost everything mentioned in this thread. But nothing solved my problem. I even upgraded node.js 17 to 18, yet of no avail. I tried multiple browsers like Edge, Chrome, Firefox and Opera. Debugging happens nowhere. So, what to do now to get VS Code debugging up and running? Because otherwise it is too cumbersome to use console.log(); every time to debug.
Please ask me if you need any more info of my code.
My environment:
OS - Windows 10
VS Code - 1.73.1
Node.js - 18.12.1
Angular CLI - 14.2.6
My launch.json file:
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Edge",
"request": "launch",
"type": "msedge",
"sourceMaps": true,
"trace": true,
"preLaunchTask": "npm: start",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
},
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/"
},
{
"name": "ng test",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: test",
"url": "http://localhost:9876/debug.html"
}
]
}
My task.json file:
{
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
},
{
"type": "npm",
"script": "test",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
}
]
}
I am new to angular. I built and deployed to github pages but none of my REST api callouts are working.
I have a node backend deployed on heroku. These API callouts are performed inside ngAfterViewInit() method.
I have added proxy to the backend node-express server.
here id my angular.json
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"musicsite-test2": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/musicsite-test2",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "musicsite-test2:build",
"proxyConfig": "src/proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "musicsite-test2:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "musicsite-test2:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "musicsite-test2:serve"
},
"configurations": {
"production": {
"devServerTarget": "musicsite-test2:serve:production"
}
}
}
}
}
},
"defaultProject": "musicsite-test2",
"cli": {
"analytics": false
}
}
and here is my proxy configuration file
{
"/api/*": {
"target": "https://village-voice-server.herokuapp.com",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
proxy conf file is inside /src folder.
what am i doing wrong?
One more question, can i upload my angular project to a normal web server like that provided by hostinger(web host).
First thing first!! What option did you choose to produce the build in angular. If is normally done by ng build --prod, then no worry, but using libraries like #angular/universal will not run your application easily. For this option, you need to deploy it to platforms who offer node.js to prerender or server side render your web application.
Now, I assume your have simple angular build (by ng build --prod). You need to check whether your application was running while development along with heroku as node backend.
Next question is what is the need of adding proxy to your node application?. If your node api is working fine and it is even being server from another server, I don't think there is any need.
Lastly, you asked about serving it to host like hostinger. Obviously, it can be deployed even in static hosting platforms. But the con is that is based on javascript rendering. So Search Engine Optimization here is not possible.
That is why angular produced #angular/universal. Here, using node, you can get whatever you want. Of course, Search Engine Optimization too.
I'm trying to deploy a Sapper built application via
#now-node. The task is basically to deploy a Polka server with dependencies and to serve static/ and client/ files statically. I have managed to include the files that Lambda requires via includeFiles but now I see in the logs that the builder ignores dependencies described in package.json. The exact message is
Starting server on port 3000
Cannot find module 'sirv'
Did you forget to add it to "dependencies" in `package.json`?
But I see in the build log that dependencies are not collected. Both package.json and package-lock.json are present in the source files.
I'd appreciate any advice on how to approach this.
The now.json config I arrived at looks like this:
{
"version": 2,
"name": "experimental-sapper",
"builds": [
{
"src": "__sapper__/build/index.js",
"use": "#now/node",
"config": {
"includeFiles": [
"../build/**",
"../../static/**"
]
}
},
{
"src": "static/**",
"use": "#now/static"
},
{
"src": "__sapper__/build/client/**",
"use": "#now/static"
}
],
"routes": [
{ "src": "/(.*(\\.css)|(\\.json)|(\\.png))", "dest": "/static/$1" },
{ "src": "/client/(.*)", "dest": "/__sapper__/build/client/$1" },
{ "src": "/(.*)", "dest": "/__sapper__/build/index.js" }
],
"alias": "..."
}
And the src/server.js looks like this (before Rollup bundling):
import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '#sapper/server';
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
const app = polka() // You can also use Express
.use(compression({ threshold: 0 }));
if (dev) {
app.use(sirv('static', { dev }));
}
app.use(sapper.middleware())
.listen(PORT, err => {
if (err) console.log('error', err);
});
export default app.handler;
Then package.json is pretty standard as well:
"description": "TODO",
"version": "0.0.1",
"scripts": {
"dev": "sapper dev",
"build": "sapper build --legacy",
"export": "sapper export --legacy",
"start": "node __sapper__/build",
"cy:run": "cypress run",
"cy:open": "cypress open",
"test": "run-p --race dev cy:run"
},
"dependencies": {
"compression": "^1.7.1",
"express": "^4.17.1",
"polka": "^0.5.0",
"postcss-define-property": "^0.5.0",
"sirv": "^0.4.0"
},
"devDependencies": {
...
},
"browserslist": "last 2 versions"
}
Thanks in advance!
For anybody coming across this question, the solution is to use the now-sapper builder at https://www.npmjs.com/package/now-sapper
There are instructions on the site, but essentially you need to export your handler as mentioned above, then let the builder do the rest. There are a few intricacies to now which mean that the node builder alone won't work.
Your now configuration should look like:
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "now-sapper"
}
]
}
There is a demo project linked from the README which is a basic Sapper template with the required now configuration.
Note for exported applications, #now/static will suffice.
I am getting "Connection refused" page while running Angular 4 app locally.
URL is http://localhost:4200/
Running the app with ng serve --open command.
UPDATE 1: angular.json
With some sources I have found that the angular cli file is now changed as
angular.json.
bellow are the details from agnular.json
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-forms": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angular-forms:build"
},
"configurations": {
"production": {
"browserTarget": "angular-forms:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular-forms:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.css"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"angular-forms-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "angular-forms:serve"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "angular-forms",
"schematics": {
"#schematics/angular:component": {
"prefix": "app",
"styleext": "css"
},
"#schematics/angular:directive": {
"prefix": "app"
}
}
}
Please let me know if more details required
Screenshot is attached for more details.
Go to command line and run ng serve --port 4200.
Hope this helps.
Instead of localhost try accessing your app using your IP like this,
(Assuming that you're using Windows) In your command line, Type => ipconfig and copy the ip address it returns,
For, Eg if the IP address is, 192.168.0.10 then, you can access your application (after issuing ng server) as,
http://192.168.0.10:4200
Hope this helps!
I have found a solution for this and it is quite simple. As #Devid ask mi about corporate proxy the I have started searching solution in this direction. Finally i have found that there was minor mistake in my LAN proxy settings.
While configuring proxy server I forget to enable the option "Bypass proxy server for local addresses" and which is causing mi above error.
Below is the screenshot for more details.
Simply opening the same URL in Chrome incognito/private mode worked for me. This is just a workaround.
I'm having an issue when building my web application using Brunch. My application depends on a module I've created and uploaded to NPM, and whenever I build it, I get:
DEPS_RESOLVE_FAILED of node_modules/rd-vue-bootstrap/dist/rd-vue-bootstrap.js failed.
Could not load module './bs-button-group.vue' from '/Users/rjuliani/dev/production-manager-ui/node_modules/rd-vue-bootstrap/dist'.
Make sure the file actually exists
The module itself builds just fine, however when I use it from my test web application and build it (the web application) it throw me the above error.
The relevant parts of my package.json file for the module are:
"main": "dist/rd-vue-bootstrap.js",
"files": [
"dist/rd-vue-bootstrap.js",
"dist/rd-vue-bootstrap.js.map",
"dist/rd-vue-bootstrap.min.js",
"src"
],
brunch-config.js
module.exports = {
files: {
javascripts: {
joinTo: 'app.js'
},
templates: {
joinTo: 'app.js'
}
},
plugins: {
babel: {
},
assetsmanager: {
copyTo: {
'vendor': ['node_modules/bootstrap', 'node_modules/jquery', 'node_modules/rd-vue-bootstrap']
},
minTimeSpanSeconds: 10 // assets won't be copied more frequent than once per X seconds.npm
}
}
};
initialize.js (main file for my web application)
import Vue from 'vue';
import RdVueBootstrap from 'rd-vue-bootstrap';
Vue.use(RdVueBootstrap);
Finally, package.json for my test web application
{
"name": "production-manager-ui",
"description": "Simple UI for the production-manager API project",
"version": "0.0.1",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/radical-dreamers/production-manager-ui.git"
},
"scripts": {
"watch": "brunch watch --server",
"build": "brunch build --production"
},
"author": {
"url": "http://www.codelightsoftware.com",
"name": "Rodrigo Juliani",
"email": "srodriki#gmail.com"
},
"keywords": [
"vue",
"brunch"
],
"dependencies": {
"bootstrap": "^3.3.7",
"jquery": "^3.1.0",
"rd-vue-bootstrap": "0.0.6",
"vue": "^1.0.26",
"vue-router": "^0.7.13"
},
"devDependencies": {
"assetsmanager-brunch": "^1.8.1",
"auto-reload-brunch": "^2.7.1",
"babel-brunch": "^6.0.6",
"brunch": "^2.8.2",
"css-brunch": "^2.6.1",
"javascript-brunch": "^2.0.0",
"vue-brunch": "^1.1.2",
"vue-devtools": "^2.0.4"
}
}
Any ideas how to fix this? I've tried many things and nothing seems to be working as of right now :(
Thanks!