http-server | a simple zero-configuration command-line http server | HTTP library

by http-party JavaScript Version: 0.11.1 License: MIT

kandi X-RAY | http-server Summary

http-server is a JavaScript library typically used in Networking, HTTP applications. http-server has no bugs, it has a Permissive License and it has medium support. However http-server has 1 vulnerabilities. You can install using 'npm i yiti-server' or download it from GitHub, GitLab, npm.

http-server is a simple, zero-configuration command-line static HTTP server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development and learning.

Support

Quality

Security

License

Reuse

kandi-support Support

http-server has a medium active ecosystem.
It has 12443 star(s) with 1409 fork(s). There are 194 watchers for this library.
It had no major release in the last 12 months.
There are 87 open issues and 419 have been closed. On average issues are closed in 266 days. There are 43 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of http-server is 0.11.1

http-server Support

Best in #HTTP

Average in #HTTP

http-server Support

Best in #HTTP

Average in #HTTP

quality kandi Quality

http-server has 0 bugs and 0 code smells.

http-server Quality

Best in #HTTP

Average in #HTTP

http-server Quality

Best in #HTTP

Average in #HTTP

security Security

http-server has 1 vulnerability issues reported (0 critical, 1 high, 0 medium, 0 low).
http-server code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

http-server Security

Best in #HTTP

Average in #HTTP

http-server Security

Best in #HTTP

Average in #HTTP

license License

http-server is licensed under the MIT License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

http-server License

Best in #HTTP

Average in #HTTP

http-server License

Best in #HTTP

Average in #HTTP

build Reuse

http-server releases are available to install and integrate.
Deployable package is available in npm.
Installation instructions are not available. Examples and code snippets are available.

http-server Reuse

Best in #HTTP

Average in #HTTP

http-server Reuse

Best in #HTTP

Average in #HTTP

Top functions reviewed by kandi - BETA

kandi has reviewed http-server and discovered the below as its top functions. This is intended to give you an instant insight into http-server implemented functionality, and help decide if they suit your requirements.

Initialize a new HTTP server .

Serve a file .

Stat every file extension .

Render files

Determines whether the client has been modified .

Check if gzip is a file .

Create routing handler

serve gzip file

serve brotli file

Convert the pathname to a forward - slash

Get all kandi verified functions for this library.

http-server Key Features

a simple zero-configuration command-line http server

http-server Examples and Code Snippets

See all related Code Snippets

Community Discussions

Trending Discussions on http-server

Docker with node.js - Error: .ngxrc not found
Angular build - Unmatched selector: %
Keycloak Wildfly auth method
Angular build - Expected identifier but found "*"
Angular TSLint - Cannot find builder "@angular-devkit/build-angular:tslint"
Using http-server to activate server got TypeError: Readable.from is not a function
Blank white screen after updating Angular from 7.3 to 13
How to make an Angular PWA installable?
problem connecting to docker container from gitlab-runner container
react-router + nginx ingress refresh causes white screen when path is not "/"

Trending Discussions on http-server

QUESTION

Docker with node.js - Error: .ngxrc not found

Asked 2022-Jan-22 at 11:17

I have created a docker image with the following docker file:

FROM node:current-alpine3.14

#install the http-server
RUN npm install -g ngx

# define working directory in docker linux environment
WORKDIR /app

# copy the builded app
COPY /dist/app /app

# start the http-server in the working directory
CMD ngx start

If i run the docker image with the following command:

docker run -p 3000:3000 myapp

i got the following error:

Error Error: .ngxrc not found
    at OptionManager._callee2$ (/usr/local/lib/node_modules/ngx/lib/option-manager.js:184:23)
    at tryCatch (/usr/local/lib/node_modules/ngx/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/usr/local/lib/node_modules/ngx/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.<computed> [as throw] (/usr/local/lib/node_modules/ngx/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/usr/local/lib/node_modules/ngx/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /usr/local/lib/node_modules/ngx/node_modules/babel-runtime/helpers/asyncToGenerator.js:30:13

I have not found infos about the error in the web.

Have somebody an idea what i do wrong?

ANSWER

Answered 2022-Jan-22 at 11:17

Its because you have no .ngxrc config copied over to your image.

Copy this file in your root project folder and modify your Dockerfile:

FROM node:current-alpine3.14

#install the http-server
RUN npm install -g ngx


# define working directory in docker linux environment
WORKDIR /app

COPY .ngxrc .

# copy the builded app
COPY /dist/app /app

# start the http-server in the working directory
CMD ngx start

Rebuild your image and run the container, and the error should be gone. of course you should modify the .ngxrc to fit your requirements.

Source https://stackoverflow.com/questions/70811391

QUESTION

Angular build - Unmatched selector: %

Asked 2022-Jan-22 at 10:11

When I run npm run build which executes ng build -c production build will be completed as expected. But command prompt will be filled with this warning:

Warning: 303 rules skipped due to selector errors:
  0% -> Unmatched selector: %
  20% -> Unmatched selector: %
  53% -> Unmatched selector: %
  40% -> Unmatched selector: %
  43% -> Unmatched selector: %
  70% -> Unmatched selector: %
  80% -> Unmatched selector: %
  90% -> Unmatched selector: %
...

How to solve this warning?

package.json:

{
  "name": "wepod-clients",
  "version": "3.2.3",
  "scripts": {
    "ng": "ng",
    "start": "node patch.js && ng serve",
    "serve-auth": "ng run wepod-app:serve-auth-standalone:production",
    "build": "node patch.js && node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng run wepod-app:app-shell:production && ng run wepod-app:auth-standalone:production",
    "server": "npm run build && http-server -p 9090 -c-1 dist",
    "test": "ng test",
    "lint": "ng lint --fix",
    "e2e": "ng e2e",
    "postinstall": "node patch.js && ngcc",
    "postbuild": "node post-build.js",
    "prepare": "husky install",
    "build-latest": "git pull origin production && npm run build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.0.0",
    "@angular/cdk": "^13.0.0",
    "@angular/cli": "^13.0.1",
    "@angular/common": "^13.0.0",
    "@angular/compiler": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/forms": "^13.0.0",
    "@angular/localize": "^13.0.0",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/platform-server": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@angular/service-worker": "^13.0.0",
    "@types/video.js": "^7.3.27",
    "animate.css": "^4.1.1",
    "assert": "^2.0.0",
    "bowser": "^2.11.0",
    "buffer": "^6.0.3",
    "bundle-loader": "^0.5.6",
    "compare-version": "^0.1.2",
    "constants-browserify": "^1.0.0",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^4.1.1",
    "d3": "^6.5.0",
    "hammerjs": "^2.0.8",
    "https-browserify": "^1.0.0",
    "jalali-moment": "^3.3.10",
    "lottie-web": "^5.7.13",
    "lzutf8": "^0.6.0",
    "net": "^1.0.2",
    "ng-gallery": "^5.1.1",
    "ng2-jalali-date-picker": "^2.4.2",
    "ngx-device-detector": "^1.5.2",
    "ngx-doughnut-chart": "0.0.4",
    "ngx-infinite-scroll": "^8.0.2",
    "ngx-lottie": "^7.0.4",
    "ngx-owl-carousel-o": "^3.1.1",
    "ngx-skeleton-loader": "^2.10.1",
    "ngx-toastr": "^12.1.0",
    "os-browserify": "^0.3.0",
    "podchat-browser": "^10.14.13",
    "rxjs": "^6.6.7",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "tls": "0.0.1",
    "ts-ebml": "^2.0.2",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "video.js": "^7.15.4",
    "videojs-record": "^4.5.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.0.1",
    "@angular-devkit/core": "^13.0.1",
    "@angular/compiler-cli": "^13.0.0",
    "@angular/language-service": "^13.0.0",
    "@egjs/hammerjs": "^2.0.17",
    "@types/hammerjs": "^2.0.40",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.36",
    "codelyzer": "^6.0.0",
    "colors": "^1.4.0",
    "git-tag-version": "^1.3.1",
    "gulp": "^4.0.2",
    "gulp-gzip": "^1.4.2",
    "http-server": "^14.0.0",
    "husky": "^7.0.4",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.7",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "^7.0.0",
    "ts-node": "^8.10.2",
    "tslint": "^6.1.3",
    "typescript": "4.4.4",
    "zip-dir": "^2.0.0"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  }
}

ANSWER

Answered 2021-Dec-01 at 14:18

can you try to put the following into your ".browserlistrc" file. The file is located in the root directory of your project.

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
IE 11

This once helped me to fix the error.

Source https://stackoverflow.com/questions/70185738

QUESTION

Keycloak Wildfly auth method

Asked 2022-Jan-21 at 14:29

I have created a wildfly container (wildfly 25.0.1 and keycloak 15.0.2) with the keycloak as subsystem. I have also a running keycloak container. Trying to deploy a simple jakarta app (build as war via maven and upload it into the wildfly) with a web.xml as follow leads to the following error:

{"WFLYCTL0080: Failed services" => {"jboss.deployment.unit.\"demo1-1.0- 
SNAPSHOT.war\".undertow-deployment" => "java.lang.RuntimeException: 
java.lang.IllegalStateException: The required mechanism 'KEYCLOAK' is not available 
in mechanisms [BASIC, CLIENT_CERT, DIGEST, FORM] from the HttpAuthenticationFactory.
    Caused by: java.lang.RuntimeException: java.lang.IllegalStateException: The 
required mechanism 'KEYCLOAK' is not available in mechanisms [BASIC, CLIENT_CERT, 
DIGEST, FORM] from the HttpAuthenticationFactory.
    Caused by: java.lang.IllegalStateException: The required mechanism 'KEYCLOAK' is 
not available in mechanisms [BASIC, CLIENT_CERT, DIGEST, FORM] from the 
HttpAuthenticationFactory."}}

My web.xml under WEB-INF:

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
     version="3.0">

<module-name>demo</module-name>

<security-constraint>
    <web-resource-collection>
        <web-resource-name>Application</web-resource-name>
        <url-pattern>/*</url-pattern>
    </web-resource-collection>
    <auth-constraint>
        <role-name>user</role-name>
    </auth-constraint>
</security-constraint>

<login-config>
    <auth-method>KEYCLOAK</auth-method>
    <realm-name>my-auth</realm-name>
</login-config>

<security-role>
    <role-name>user</role-name>
</security-role>

</web-app>

My wildfly docker file:

FROM jboss/wildfly:25.0.0.Final

ENV KEYCLOAK_VERSION 15.0.2
ENV WILDFLY_HOME /opt/jboss/wildfly

RUN cd $WILDFLY_HOME && curl -LO  https://github.com/keycloak/keycloak/releases/download/${KEYCLOAK_VERSION}/keycloak-oidc-wildfly-adapter-${KEYCLOAK_VERSION}.tar.gz \
&& tar -xzvf keycloak-oidc-wildfly-adapter-${KEYCLOAK_VERSION}.tar.gz \
&& rm keycloak-oidc-wildfly-adapter-${KEYCLOAK_VERSION}.tar.gz \
&& bin/jboss-cli.sh --file=bin/adapter-elytron-install-offline.cli \
# Admin-User anlegen
&& bin/add-user.sh admin admin1234 --silent \
# Zu Vermeidung von Fehlermeldungen beim Start
&& rm -r standalone/configuration/standalone_xml_history/current/

CMD ["/opt/jboss/wildfly/bin/standalone.sh", "-b", "0.0.0.0", "-bmanagement", "0.0.0.0"]
EXPOSE 8285
EXPOSE 9992

Openning the wildfly in browser -> confguration ->subsystem shows me that the keycloak is there. I can see in thestandalone.xml file of wildfly container the following has been set:

 <http-authentication-factory name="keycloak-http-authentication" security-domain="KeycloakDomain" http-server-mechanism-factory="keycloak-http-server-mechanism-factory">
                <mechanism-configuration>
                    <mechanism mechanism-name="KEYCLOAK">
                        <mechanism-realm realm-name="KeycloakOIDCRealm" realm-mapper="keycloak-oidc-realm-mapper"/>
                    </mechanism>
                </mechanism-configuration>
            </http-authentication-factory>

The app has keyclaock.json in WEB-INF as well. Any Idea how to fix this?

ANSWER

Answered 2022-Jan-10 at 16:50

Keycloak has deprecated the Wildfly-Adapter in Favour of the built in Elytron OIDC-Authenticator. https://www.keycloak.org/2021/12/keycloak-1510-released

You can check whether that meets your requirements, or stick with Wildfly 24 for now.

See https://wildfly-security.github.io/wildfly-elytron/blog/securing-wildfly-apps-openid-connect/ for more infos about using the built in authentication with Elytron.

Source https://stackoverflow.com/questions/70001644

QUESTION

Angular build - Expected identifier but found "*"

Asked 2022-Jan-04 at 16:12

After upgrading to angular 13.0.0 this warning occur when building:

Warning:  > styles.a81eb7805197853d.css:10615:2: warning: Expected identifier but found "*"
    10615 │   *vertical-align: middle;
          ╵   ^

Why this happens?

package.json:

{
  "name": "wepod-clients",
  "version": "3.2.3",
  "scripts": {
    "ng": "ng",
    "start": "node patch.js && ng serve",
    "serve-auth": "ng run wepod-app:serve-auth-standalone:production",
    "build": "node patch.js && node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng run wepod-app:app-shell:production && ng run wepod-app:auth-standalone:production",
    "server": "npm run build && http-server -p 9090 -c-1 dist",
    "test": "ng test",
    "lint": "ng lint --fix",
    "e2e": "ng e2e",
    "postinstall": "node patch.js && ngcc",
    "postbuild": "node post-build.js",
    "prepare": "husky install",
    "build-latest": "git pull origin production && npm run build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.0.0",
    "@angular/cdk": "^13.0.0",
    "@angular/cli": "^13.0.1",
    "@angular/common": "^13.0.0",
    "@angular/compiler": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/forms": "^13.0.0",
    "@angular/localize": "^13.0.0",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/platform-server": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@angular/service-worker": "^13.0.0",
    "@types/video.js": "^7.3.27",
    "animate.css": "^4.1.1",
    "assert": "^2.0.0",
    "bowser": "^2.11.0",
    "buffer": "^6.0.3",
    "bundle-loader": "^0.5.6",
    "compare-version": "^0.1.2",
    "constants-browserify": "^1.0.0",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^4.1.1",
    "d3": "^6.5.0",
    "hammerjs": "^2.0.8",
    "https-browserify": "^1.0.0",
    "jalali-moment": "^3.3.10",
    "lottie-web": "^5.7.13",
    "lzutf8": "^0.6.0",
    "net": "^1.0.2",
    "ng-gallery": "^5.1.1",
    "ng2-jalali-date-picker": "^2.4.2",
    "ngx-device-detector": "^1.5.2",
    "ngx-doughnut-chart": "0.0.4",
    "ngx-infinite-scroll": "^8.0.2",
    "ngx-lottie": "^7.0.4",
    "ngx-owl-carousel-o": "^3.1.1",
    "ngx-skeleton-loader": "^2.10.1",
    "ngx-toastr": "^12.1.0",
    "os-browserify": "^0.3.0",
    "podchat-browser": "^10.14.13",
    "rxjs": "^6.6.7",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "tls": "0.0.1",
    "ts-ebml": "^2.0.2",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "video.js": "^7.15.4",
    "videojs-record": "^4.5.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.0.1",
    "@angular-devkit/core": "^13.0.1",
    "@angular/compiler-cli": "^13.0.0",
    "@angular/language-service": "^13.0.0",
    "@egjs/hammerjs": "^2.0.17",
    "@types/hammerjs": "^2.0.40",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.36",
    "codelyzer": "^6.0.0",
    "colors": "^1.4.0",
    "git-tag-version": "^1.3.1",
    "gulp": "^4.0.2",
    "gulp-gzip": "^1.4.2",
    "http-server": "^14.0.0",
    "husky": "^7.0.4",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.7",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "^7.0.0",
    "ts-node": "^8.10.2",
    "tslint": "^6.1.3",
    "typescript": "4.4.4",
    "zip-dir": "^2.0.0"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  }
}

For Instance, I provided a part of my css code below:

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

I searched a lot. No outcome.

ANSWER

Answered 2022-Jan-04 at 16:12

Angular is removing support for IE 11.

There is 2 ways to confront that matter:

Remove support for IE 11 from .browserslistrc or browserslist:

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

not is essential.

Add support by compiling your project to lower ECMAScript by polyfills. You can follow the steps mentioned in this article.

Source https://stackoverflow.com/questions/70185820

QUESTION

Angular TSLint - Cannot find builder "@angular-devkit/build-angular:tslint"

Asked 2022-Jan-04 at 13:18

When I try to run command ng lint --fix cli throws this error:

An unhandled exception occurred: Cannot find builder "@angular-devkit/build-angular:tslint".
See "C:\Users\MOE89A~1.ZAR\AppData\Local\Temp\ng-Ijc3an\angular-errors.log" for further details.

My lint confing in angular.json:

"lint": {
  "builder": "@angular-devkit/build-angular:tslint",
  "options": {
    "tsConfig": [
      "projects/wepod-app/tsconfig.app.json",
      "projects/wepod-app/tsconfig.spec.json",
      "projects/wepod-app/e2e/tsconfig.json"
    ],
    "exclude": [
      "**/node_modules/**"
    ]
  }
},

My package.json:

{
  "name": "wepod-clients",
  "version": "3.2.3",
  "scripts": {
    "ng": "ng",
    "start": "node patch.js && ng serve",
    "build": "node patch.js && node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng run wepod-app:app-shell:production && ng run wepod-app:auth-standalone:production",
    "server": "npm run build && http-server -p 9090 -c-1 dist",
    "test": "ng test",
    "lint": "ng lint --fix",
    "e2e": "ng e2e",
    "postinstall": "node patch.js && ngcc",
    "postbuild": "node post-build.js",
    "prepare": "husky install",
    "build-latest": "git pull origin production && npm run build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.0.0",
    "@angular/cdk": "^13.0.0",
    "@angular/cli": "^13.0.1",
    "@angular/common": "^13.0.0",
    "@angular/compiler": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/forms": "^13.0.0",
    "@angular/localize": "^13.0.0",
    "@angular/platform-browser": "^13.0.0",
    "@angular/platform-browser-dynamic": "^13.0.0",
    "@angular/platform-server": "^13.0.0",
    "@angular/router": "^13.0.0",
    "@angular/service-worker": "^13.0.0",
    "@types/video.js": "^7.3.27",
    "animate.css": "^4.1.1",
    "assert": "^2.0.0",
    "bowser": "^2.11.0",
    "buffer": "^6.0.3",
    "bundle-loader": "^0.5.6",
    "compare-version": "^0.1.2",
    "constants-browserify": "^1.0.0",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^4.1.1",
    "d3": "^6.5.0",
    "hammerjs": "^2.0.8",
    "https-browserify": "^1.0.0",
    "jalali-moment": "^3.3.10",
    "lottie-web": "^5.7.13",
    "lzutf8": "^0.6.0",
    "net": "^1.0.2",
    "ng-gallery": "^5.1.1",
    "ng2-jalali-date-picker": "^2.4.2",
    "ngx-device-detector": "^1.5.2",
    "ngx-doughnut-chart": "0.0.4",
    "ngx-infinite-scroll": "^8.0.2",
    "ngx-lottie": "^7.0.4",
    "ngx-owl-carousel-o": "^3.1.1",
    "ngx-skeleton-loader": "^2.10.1",
    "ngx-toastr": "^12.1.0",
    "os-browserify": "^0.3.0",
    "podchat-browser": "^10.14.13",
    "rxjs": "^6.6.7",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "tls": "0.0.1",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "video.js": "^7.15.4",
    "videojs-record": "^4.5.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.0.1",
    "@angular-devkit/core": "^13.0.1",
    "@angular/compiler-cli": "^13.0.0",
    "@angular/language-service": "^13.0.0",
    "@egjs/hammerjs": "^2.0.17",
    "@types/hammerjs": "^2.0.40",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.36",
    "codelyzer": "^6.0.0",
    "colors": "^1.4.0",
    "git-tag-version": "^1.3.1",
    "gulp": "^4.0.2",
    "gulp-gzip": "^1.4.2",
    "http-server": "^14.0.0",
    "husky": "^7.0.4",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.3.7",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "^7.0.0",
    "ts-node": "^8.10.2",
    "tslint": "^6.1.3",
    "typescript": "4.4.4",
    "zip-dir": "^2.0.0"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  }
}

ANSWER

Answered 2021-Nov-28 at 10:34

From v13 angular doesn't use tslint anymore due to deprecation.

Run ng add @angular-eslint/schematics to add eslint to your application.

It will use tslint-to-eslint-config to migrate you to eslint automatically.

It will generate a .eslintrc.json file and migrate tslint.json to it.

Nothing else is needed to be done.

Source https://stackoverflow.com/questions/70141707

QUESTION

Blank white screen after updating Angular from 7.3 to 13

Asked 2021-Dec-06 at 13:57

I really hope someone can help us.
I am new to Angular and got a project inherited.
I have an Angular project with version 7.3, which causes us troubles when we really try to work with it or to update it.
With version 7.3 the project is running so long as you dont add any packages or delete the node-modules file and run "npm i" for installing all dependencies/packages again. The results in these cases are a blank white screen when running the application.
So now we considered it a better idea to update the project to the newer version 13 of anuglar, so everything is up to date and that the handling will maybe be better. The node version is 16.3.0, npm is version 8.1.3.

So I followed the instructions of the angular update guide: https://update.angular.io/
I deleted node_modules and package-lock.json serveral times an did "npm i --legacy-peer-deps" after that
I deleted "es5BrowserSupport": true in angular.json
I added "enableIvy": true, "fullTemplateTypeCheck": false under "angularCompilerOptions" in the tsconfig.json
I added types/jest
In angular.modules I added "CUSTOM_ELEMENTS_SCHEMA" under Ng-Modules.schema

My current package.json file:

  "name": "webapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0",
    "build": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "type": "commonjs",
  "dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/cdk": "~13.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/flex-layout": "^12.0.0-beta.35",
    "@angular/forms": "~13.0.0",
    "@angular/material": "^13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "^13.0.0",
    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
    "angular-plotly.js": "^1.1.0",
    "angular-resizable-element": "^4.0.0",
    "angular-resize-element": "^1.2.0",
    "bootstrap": "^5.1.3",
    "core-js": "^3.19.1",
    "express": "^4.16.4",
    "http-server": "^14.0.0",
    "lodash": "^4.17.21",
    "material-design-icons": "^3.0.1",
    "mongoose": "^5.4.11",
    "ng-sidebar": "^8.0.0",
    "ngx-bootstrap": "^3.2.0",
    "plotly.js": "^1.45.2",
    "raphael": "^2.2.8",
    "rxjs": "~6.6.7",
    "tslib": "^1.14.1",
    "util": "^0.12.4",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "13.0.0",
    "@angular-devkit/build-angular": "^13.0.1",
    "@angular/cli": "^13.0.1",
    "@angular/compiler-cli": "^13.0.0",
    "@angular/language-service": "~13.0.0",
    "@types/hammerjs": "^2.0.40",
    "@types/jasmine": "~3.10.2",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "^27.0.3",
    "@types/node": "^8.9.5",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^6.3.7",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "process": "^0.11.10",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "^5.11.0",
    "typescript": ">=4.4.0 <4.5.0",
    "webpack": "~5.64.4",
    "webpack-cli": "~4.9.1",
    "webpack-dev-server": "~4.5.0"
  },
  "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.0.",
  "main": "index.js",
  "author": "",
  "license": "ISC"
}

My current tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "types" : ["node", "jest"],
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]


  },
  "angularCompilerOptions": {
    "enableIvy": true,
    "fullTemplateTypeCheck": false
  }
}

My tsconfig.app.json :

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [
      "node"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

My tsconfig.spec.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

My terminal after "ng serve" :

 Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
main.js               | main          | 943.59 kB
styles.css, styles.js | styles        | 370.39 kB
polyfills.js          | polyfills     | 164.77 kB
runtime.js            | runtime       |   1.32 kB

                      | Initial Total |   1.45 MB

Build at: 2021-12-02T10:14:14.625Z - Hash: d4934bcc2eb62a37 - Time: 27493ms

Warning: C:/Users/<...>/Documents/test/Software-Analytics/WebAngular/webapp/src/app/pre-analysis.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

Warning: C:/Users/<...>/Documents/test/Software-Analytics/WebAngular/webapp/src/app/resizable.directive.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

Warning: C:/Users/<...>/Documents/test/Software-Analytics/WebAngular/webapp/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.

The output on the browser console:

[webpack-dev-server] Disconnected! polyfills.js:1:15309
[webpack-dev-server] Trying to reconnect... polyfills.js:1:15309
[webpack-dev-server] Live Reloading enabled. polyfills.js:1:15309
[webpack-dev-server] Warnings while compiling. polyfills.js:1:15374
[webpack-dev-server] WARNING
C:/Users/Leonie.Tischer/Documents/test/Software-Analytics/WebAngular/webapp/src/app/pre-analysis.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig. polyfills.js:1:15374
[webpack-dev-server] WARNING
C:/Users/Leonie.Tischer/Documents/test/Software-Analytics/WebAngular/webapp/src/app/resizable.directive.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig. polyfills.js:1:15374
[webpack-dev-server] WARNING
C:/Users/Leonie.Tischer/Documents/test/Software-Analytics/WebAngular/webapp/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig. polyfills.js:1:15374
Uncaught ReferenceError: process is not defined
    607 http://localhost:4200/main.js:1
    a http://localhost:4200/runtime.js:1
    185 http://localhost:4200/main.js:1
    a http://localhost:4200/runtime.js:1
    J http://localhost:4200/main.js:1
    <anonymous> http://localhost:4200/main.js:1
    n http://localhost:4200/runtime.js:1
    <anonymous> http://localhost:4200/main.js:1

I already tried to "Add only entry points to the 'files' or 'include' properties in your tsconfig." , but I just got errors. Also tried to add a webpack.config.json file , but this didnt work either.

What do I miss?

Thank you for your help, it is really appreciated. Thank you.

ANSWER

Answered 2021-Dec-06 at 13:57

I recently had to upgrade a large application from version 7 to 12 with many lazy loaded modules implemented in seperate angular libaries (in separate GIT-repos). I had so much troubles using ng update (many weird compiler errors) so that I had to update this way:

installed angular cli version 12 globally
updated nodejs
For the application and each library I created a new angular project from scratch using the new version of the angular cli.
then I copied the original source code to the new generated project, added missing dependencies and npm-scripts to package.json
If I remember correctly, in version 7 angular created a file public_api.ts (in libararies only) and angular 12 now creates a public-api.ts (so rename your original public_api.ts to public-api.ts!)
Since strictMode is now default, you might get a lot of compile-errors. Either try to fix those errors (if you have enough time) or deactivate strictMode in tsconfig.json (change compilerOptions/strict and angularCompilerOptions/strictTemplates to false). For strictMode see more at https://indepth.dev/posts/1402/bulletproof-angular or https://javascript.plainenglish.io/why-angular-strict-mode-is-a-game-changer-11a0ce62f3aa.

This was the easiest and most reliable way for me to update skipping so many versions.

Source https://stackoverflow.com/questions/70197765

QUESTION

How to make an Angular PWA installable?

Asked 2021-Nov-25 at 21:55

I'm trying to make an installable PWA with Angular.

Following the docs, I ran ng add @angular/pwa to make my app a PWA. It worked fine. Then I built it with ng build and served the build using http-server.

The service worker seems to be working fine, it caches assets, keeps working when I disable the internet, etc.

However, at this point I expected it to ask if the user wants to install the app, but it doesn't. I checked the MDN guide and the app seems to meet all the requirements. On the other hand, this web.dev page says one of the install criteria to be met is to meet a given user engagement heuristic.

So I have no idea for which reason the install hint is not showing, it can be anything between:

Messed up installation
I'm testing it from a desktop browser, on http://localhost
I have to meet the engagement criteria

In case it helps, here are some of the related files:

manifest.webmanifest

{
  "name": "SiAQ",
  "short_name": "siaq",
  "description": "Aplicativo móvel do Sistema de Atendimento aos Queimados (SiAQ)",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

ngsw-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
        ]
      }
    }
  ]
}

ANSWER

Answered 2021-Nov-23 at 22:01

Looks like you did everything just fine. And the @angular/pwa should do all the work from the box. The only guess I have it's that you're building your app, not in the prod mode.

Try to follow the next steps:

ng build --prod
cd dist/<proj_name>
http-server

Source https://stackoverflow.com/questions/70087849

QUESTION

react-router + nginx ingress refresh causes white screen when path is not "/"

Asked 2021-Sep-15 at 15:23

So I've been trying to fix this for days now and I'm beyond stuck.

My app is running, and I can access the site when I go to the default url (example.com). I can refresh on this url without issues, and I can navigate through the pages being rendered through react router as long as I don't refresh on any other page. (e.g.) refreshing on example.com/path1 doesn't work, I get a 404 error.

My current ingress file looks like:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: myApp-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: letsencrypt-prod
    nginx.ingress.kubernetes.io/use-regex: "true"
spec:
  tls:
    - hosts:
        - my.app.com
      secretName: myApp-tls
  rules:
    - host: "my.app.com"
      http:
        paths:
          - pathType: Prefix
            path: /.*
            backend:
              service:
                name: myApp
                port:
                  number: 80

I've added many of the most common replies to issues such as this, but it only makes matters worse, such as white screen with "Unexpected token '<'" errors for all javascript files it tries to load, and none of the pages loading at all.

For example, I've tried:

    nginx.ingress.kubernetes.io/rewrite-target: /
    nginx.ingress.kubernetes.io/rewrite-target: /$1
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    nginx.ingress.kubernetes.io/configuration-snippet: |
      try_files $uri $uri/ /index.html;

I've tried adding additional paths to the controller for each route available in the app, I've tried setting the path to just "/" or "/(.*)", nothing is working.

Any help would be greatly appreciated! thank you!

EDIT:

# latest active node image
FROM node:14-alpine

# Create app directory
RUN mkdir /app
RUN mkdir -p /app/node_modules && chown -R node:node /app

WORKDIR /app

COPY package.json /app
COPY tsconfig.json /app
COPY webpack.config.js /app
COPY .env.prod .env
ADD src /app/src
ADD dist /app/dist
RUN mkdir -p /app/dist/js && chown -R node:node /app/dist/js

ADD server /app/server
ADD assets /app/assets
ADD config /app/config

ARG NPM_TOKEN
COPY .npmrc_docker .npmrc
RUN npm cache verify
RUN npm install
RUN npm run build:prod
RUN rm -f .npmrc

# Expose necessary port
EXPOSE 3000

# Compile typescript and start app
CMD ["cross-env", "NODE_ENV=production", "PORT=3000", "ts-node", "server/server"]

I've also tried doing it with CMD ["npx", "http-server", "./dist", "-p", "3000"] since the server part is only doing the following:

      this.app.use(express.static(path.resolve(__dirname, "../dist")));
      this.app.get("*", (request: express.Request, response: express.Response) => {
        response.sendFile(path.resolve(__dirname, "../dist/index.html"));
      });

ANSWER

Answered 2021-Sep-12 at 07:58

Your path: /.* has no capture groups, so /$1 and /$2 are undefined.

Try the following:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: myApp-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: letsencrypt-prod
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  tls:
    - hosts:
        - my.app.com
      secretName: myApp-tls
  rules:
    - host: "my.app.com"
      http:
        paths:
          - pathType: Prefix
            path: /(.*)
            backend:
              service:
                name: myApp
                port:
                  number: 80

Source https://stackoverflow.com/questions/69148955

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install http-server

You can install using 'npm i yiti-server' or download it from GitHub, GitLab, npm.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: