issue with deploy Angular 9 SSR app to fire base - node.js

I converted my app and deployed follow the instructions here
Error with angular 9 SSR and fire base cloud functions #2369
now in the last step of deploying I get this error
Built at: 04/01/2020 4:18:16 PM
Asset Size Chunks Chunk Names
main.js 3.93 MiB 0 [emitted] [big] main
Entrypoint main [big] = main.js
chunk {0} main.js (main) 7.37 MiB [entry] [rendered]
⚠️ Your Node.js version (13.12.0) does not match the Firebase Functions runtime (10).
Deploying your Angular Universal application...
success.hosting.split is not a function
PS C:\Users\Khaled\Desktop\coupons>

Related

NestJs server does not start

when I run the start command in NestJs I got no error but a text repeats one after the other and won't let the server start.
This is the text
Debugger listening on ws://localhost:9229/d85c77f4-d1c6-4b88-a91a-1905252c8913
For help, see: https://nodejs.org/en/docs/inspector
chunk (runtime: main) main.js (main) 30.5 KiB [entry]
webpack compiled successfully (bdb03efc0de1a987)
No issues found.

static build on multi language web gives unknown filter ":en" yarn

I am making web on pug, node.js and yarn. I can run site locally, but can't make a static build.
My console log:
yarn build:static
success Already up-to-date.
$ rimraf static/assets
$ cross-env NODE_ENV=production webpack -p --config ./build/prod.webpack.config.js
10% building 1/2 modules 1 active ...s/Yuriys Web source/src/scripts/main.jsBrowserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
Hash: d386d8be808a01f7bf84
Version: webpack 4.27.1
Time: 2295ms
Built at: 03/26/2022 5:51:35 PM
Asset Size Chunks Chunk Names
main.469c995c.css 33.5 KiB 0 [emitted] main
main.469c995c.css.map 40.7 KiB 0 [emitted] main
main.469c995c.js 88.8 KiB 0 [emitted] main
main.469c995c.js.map 438 KiB 0 [emitted] main
manifest.json 218 bytes [emitted]
Entrypoint main = main.469c995c.css main.469c995c.js main.469c995c.css.map main.469c995c.js.map
[2] multi ./src/scripts/main.js 28 bytes {0} [built]
[3] ./src/styles/main.scss 39 bytes {0} [built]
[4] ./src/scripts/main.js + 2 modules 1.42 KiB {0} [built]
| ./src/scripts/main.js 92 bytes [built]
| ./src/scripts/i18n.js 689 bytes [built]
| ./src/scripts/awakeness.js 654 bytes [built]
+ 3 hidden modules
Child mini-css-extract-plugin ../Yuriys Web source/node_modules/css-loader/dist/cjs.js!../Yuriys Web source/node_modules/sass-loader/lib/loader.js!../Yuriys Web source/src/styles/main.scss:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/styles/main.scss 33.8 KiB {0} [built]
+ 1 hidden module
(node:39801) UnhandledPromiseRejectionWarning: Error: /Users/Yuriy/Downloads/Yuriys Web source/src/pages/partials/header.pug:9:5
unknown filter ":en"
at makeError (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-error/index.js:32:13)
at filterWithFallback (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-filters/lib/handle-filters.js:47:17)
at walk.includeDependencies (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-filters/lib/handle-filters.js:20:18)
at walkAST (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-walk/index.js:23:18)
at /Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-walk/index.js:104:20
at Array.reduce (<anonymous>)
at walkAndMergeNodes (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-walk/index.js:103:18)
at walkAST (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-walk/index.js:37:19)
at walkAST (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-walk/index.js:48:21)
at /Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-walk/index.js:104:20
(node:39801) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:39801) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
✨ Done in 12.62s.
Is it an issue with the config? Or can I even build a static web for GitHub pages?

Need to constantly delete node_modules for Angular 9 app to work

I'm very new to web development and I'm trying to get familiar with building Angular forms. I'm running in to a problem where every time I start up an Angular project using npm start or ng serve and go to the localhost, it gives me an error "Cannot GET /".
If I close everything down, delete node_modules within the project folder, run npm install then npm start again, it will work. If I close the terminal and try to run the project again, I get back to the same error. Basically I can only run the project exactly one time before I have to go and repeat the process of deleting node_modules etc (which is even a pain in itself as I haven't found a quick way to delete node_modules.)
I'm using Windows and the April 2020 release of VS Code and Angular 9. Please let me know if I can provide any information re: code, files etc., as I said I'm pretty new to this and not really sure where I could look to try to fix this. Thank you!
Update: Here is what I have in the terminal. The error is at the bottom and it has to do with MatDialogRef, but to be honest I've just ignored this because I get this same error regardless, even if my project opens properly. I believe this error is caused by some changes they made to Angular 9, but I'm not sure how to fix it.
Update 2: I edited the path of MatDialogRef to #angular/materials/dialog, which fixed that error, but now I'm getting a whole bunch of errors of the same type which were not occurring before. Please see below.
ERROR in src/app/app-layer/app-layer.component.html:2:35 - error TS2339: Property 'isLinear' does not exist on type 'AppLayerComponent'.
2 <mat-vertical-stepper [linear] = "isLinear" #stepper>
~~~~~~~~
src/app/app-layer/app-layer.component.ts:6:16
6 templateUrl: './app-layer.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppLayerComponent.
Below here is the original error which I fixed by adding /dialog
> app-frontend#0.0.0 start C:\Users\u123\Documents\Angular\app-frontend
> ng serve
chunk {main} main.js, main.js.map (main) 2.04 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 700 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.28 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 339 kB [initial] [rendered]
Date: 2020-05-20T18:57:35.818Z - Time: 16760ms
ERROR in node_modules/gcui/lib/delete-confirmation-dialog/delete-confirmation-dialog.component.d.ts:1:30 - error TS2306: File 'C:/Users/u123/Documents/Angular/app-frontend/node_modules/#angular/material/index.d.ts' is not a module.
1 import { MatDialogRef } from '#angular/material';
~~~~~~~~~~~~~~~~~~~
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
That seems to be a breaking change with Angular 9.
Check this issue: https://github.com/angular/components/issues/17503
Try changing your import to use the specific components.
Example, if you are using material button then:
import { MatButtonModule } from '#angular/material/button';

Cannot build this Angular project

I downloaded one Angular project from the Internet with an Angular select component.
Here is the original example:
https://material.angular.io/components/select/overview#resetting-the-select-value
They have a demo on the following link:
https://stackblitz.com/angular/qodvbqymxae
I downloaded that demo to my computer, but when doing:
$ ng serve
I get the error:
ERROR in Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
at Object.resolveEntryModuleFromMain (D:\_System\Hatuey\Desktop\angular-material-select\node_modules\#ngtools\webpack\src\entry_resolver.js:131:11)
at Promise.resolve.then.then (D:\_System\Hatuey\Desktop\angular-material-select\node_modules\#ngtools\webpack\src\angular_compiler_plugin.js:239:54)
at process._tickCallback (internal/process/next_tick.js:109:7)
as you can see on the following full output:
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-01-07T09:15:56.348Z
Hash: 93425b9cdaae6fb908b2
Time: 10331ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.93 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 154 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 854 kB [initial] [rendered]
ERROR in Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
at Object.resolveEntryModuleFromMain (D:\_System\Hatuey\Desktop\angular-material-select\node_modules\#ngtools\webpack\src\entry_resolver.js:131:11)
at Promise.resolve.then.then (D:\_System\Hatuey\Desktop\angular-material-select\node_modules\#ngtools\webpack\src\angular_compiler_plugin.js:239:54)
at process._tickCallback (internal/process/next_tick.js:109:7)
webpack: Failed to compile.
webpack: Compiling...
Date: 2018-01-07T09:15:58.101Z
Hash: c2a123371dfcb5513a4e
Time: 884ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry]
chunk {main} main.bundle.js (main) 2.93 kB [initial]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial]
chunk {styles} styles.bundle.js (styles) 154 kB [initial]
chunk {vendor} vendor.bundle.js (vendor) 854 kB [initial]
ERROR in Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
at Object.resolveEntryModuleFromMain (D:\_System\Hatuey\Desktop\angular-material-select\node_modules\#ngtools\webpack\src\entry_resolver.js:131:11)
at Promise.resolve.then.then (D:\_System\Hatuey\Desktop\angular-material-select\node_modules\#ngtools\webpack\src\angular_compiler_plugin.js:239:54)
at process._tickCallback (internal/process/next_tick.js:109:7)
webpack: Failed to compile.
On the README.md file provided by: stackblitz.com (when export) they say:
This project was generated with Angular CLI version 1.2.1.
On my local computer I get the following:
$ ng version
...
Angular CLI: 1.5.4
Node: 6.11.2
OS: win32 x64
Angular: 5.1.3
...
If you want to try by yourself, you can do:
$ mkdir angular-material-select
$ cd angular-material-select
$ git clone git#github.com:napolev/angular-material-select.git .
$ npm install
$ ng serve
How do I make this demo project work?
Extract AppModule from main.ts into it's own file app.module.ts
Extract DemoMaterialModule from main.ts into it's own file
Add DemoMaterialModule to AppModule's imports list

Problems running Angular Tour of Heroes app

I am currently building the Angular Tour of Heroes app and have completed all steps in the guide. I am using a remote server to host the app and connecting to it using Chrome.
However, sometimes after recompiling, Chrome throws an error when trying to reload the app:
GET http://url.domain.com/vendor.bundle.js net::ERR_CONTENT_LENGTH_MISMATCH
It seems it's failing to load the whole bundled app. What I can't figure out is why. Before I've re-saved a file which forces webpack to recompile and the problem goes away temporarily. I've tried reinstalling my node_modules, that hasn't helped.
The vendor.bundle.js file is quite large (2.79 MB) but it was previously loading with no problems with file sizes just as big. It's also a relatively small app.
Webpack's output:
Time: 12225ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 178 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 29 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 11.5 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.79 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
Obviously running the dev server.
I have also tried creating a brand new app with ng new ... and have the same problem with the new app.

Resources