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! :)
Related
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?
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';
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
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
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.