Problems running Angular Tour of Heroes app - node.js

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.

Related

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';

issue with deploy Angular 9 SSR app to fire base

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>

Angular CLI UnhandledPromiseRejectionWarning on fresh install

I am currently trying to start a new Angular CLI (v7.1.1) project up though ng new ProjectName and it seems to work as usually. Then when i run the ng serve --open command it seems to end sucessfully, but outputs the following Warning/error:
$ ng serve --open
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-12-06T20:40:39.900Z
Hash: b89537a5317a31d5ae15
Time: 4712ms
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.67 MB [initial] [rendered]
ℹ 「wdm」: Compiled successfully.
(node:3844) UnhandledPromiseRejectionWarning: Error: Exited with code 3
at ChildProcess.cp.once.code (/~path/to/project/node_modules/opn/index.js:84:13)
at Object.onceWrapper (events.js:273:13)
at ChildProcess.emit (events.js:182:13)
at maybeClose (internal/child_process.js:978:16)
at Socket.stream.socket.on (internal/child_process.js:395:11)
at Socket.emit (events.js:182:13)
at Pipe._handle.close (net.js:616:12)
(node:3844) 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:3844) [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.
I dont know why this happens since i am using a completly fresh install without touching the code angular cli creates.
Currently running ubuntu 18.04, node v11.3.0, npm v6.4.1 and angular-cli 7.1.1 (as stated)
I have also tried to remove and install the node_modules folder but without no luck. It looks like its the OPN file that causes the problem, but i am not sure why.
Anyone else having this problem?
Based on the comment from GCSDC, i figured out the problem, or at least how not to get the error/warning. it was because i was using --open which tries to open a browser on the webpage.. but since the server the app is running on is one i connect to though ssh (and tunnels the ports) it don't make sense to use --open and then we dont have the error/warning anymore.
Apperently this warning don't show up in angular-cli 6.1.5 which the prev. project i was working on was running.
Thanks again GCSDC! :)

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

Errors while installing node package manager

NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-09-26T04:39:22.671Z
Hash: 916808702f64c1919061
Time: 8652ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 1.06 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 12.3 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 338 kB [initial] [rendered]
ERROR in C:/Users/PC/src/app/app.component.ts (1,27): Cannot find module '#angular/core'.
ERROR in C:/Users/PC/src/app/app.component.ts (8,14): Experimental support for decorators is a feature that is subject to change in a future release.
Set the 'experimentalDecorators' option to remove this warning.
ERROR in C:/Users/PC/src/app/app.module.ts (1,31): Cannot find module '#angular/platform-browser'.
ERROR in C:/Users/PC/src/app/app.module.ts (2,26): Cannot find module '#angular/core'.
ERROR in C:/Users/PC/src/app/app.module.ts (16,14): Experimental support for decorators is a feature that is subject to change in a future release. Se
t the 'experimentalDecorators' option to remove this warning.
ERROR in C:/Users/PC/src/main.ts (1,32): Cannot find module '#angular/core'.
ERROR in C:/Users/PC/src/main.ts (2,40): Cannot find module '#angular/platform-browser-dynamic'.
ERROR in Error: Could not resolve module #angular/core
at StaticSymbolResolver.getSymbolByModule (C:\Users\PC\node_modules\#angular\compiler\bundles\compiler.umd.js:25601:30)
at StaticReflector.findDeclaration (C:\Users\PC\node_modules\#angular\compiler\bundles\compiler.umd.js:24350:63)
at StaticReflector.initializeConversionMap (C:\Users\PC\node_modules\#angular\compiler\bundles\compiler.umd.js:24568:36)
at new StaticReflector (C:\Users\PC\node_modules\#angular\compiler\bundles\compiler.umd.js:24310:14)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Users\PC\node_modules\#angular\compiler-cli\src\ngtools_api.js:90:31)
at AotPlugin._getLazyRoutesFromNgtools (C:\Users\PC\node_modules\#ngtools\webpack\src\plugin.js:207:44)
at _donePromise.Promise.resolve.then.then.then.then.then (C:\Users\PC\node_modules\#ngtools\webpack\src\plugin.js:443:24)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
ERROR in C:/Users/PC/src/main.ts (1,32): Cannot find module '#angular/core'.
ERROR in C:/Users/PC/src/main.ts (2,40): Cannot find module '#angular/platform-browser-dynamic'.
I am using windows-7 os.When i install and start npm.It is showing the following errors.All the packages have been installed

Resources