Error generating sub components inside components with Angular CLI - node.js

Details: running OS 10.11, using Angular version 1.2.6, npm 5.3.0, node 8.2.0.
So I'm learning Angular for the first time, and I keep running into the same problem where if I create a new project using 'ng new [PROJECT]' and then use 'ng serve' it compiles and displays properly, but then if I try to use 'ng g c [NEW_COMPONENT]' then it breaks the project. Specifically, it says that 'Module Not Found: Error: Can't resolve [PATH]' and it gives a valid path for the component, the path that ng itself generated. What's going on here? I've tried uninstalling #angular/cli and node and npm several times and I can't seem to get Angular to reliably generate new components on its own. What am I doing wrong here?
ERROR in /Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app/app.module.ts (5,36): Cannot find module './src/app/inventory/inventory.component'.
ERROR in Error encountered resolving symbol values statically. Could not resolve ./src/app/inventory/inventory.component relative to /Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app/app.module.ts., resolving symbol AppModule in /Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app/app.module.ts, resolving symbol AppModule in /Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app/app.module.ts
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve './src/app/inventory/inventory.component' in '/Users/{USER}/Dropbox/angularprojects/shadowrun-inventory/src/app'
# ./src/app/app.module.ts 10:0-77
# ./src/main.ts
# multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.
This is the error I receive. What am I doing wrong here?

Related

Not able to use opencv4nodejs in Next.js

The opencv4nodejs module is working fine but when I integrate it with next.js, it is showing the following error --
Error in ./utils
Module not found: Error: Can't resolve 'child_process' in '/Users/yathartharora/Certificate/node_modules/opencv-build/build
When I run my OpenCV part separately it is working fine but as soon as I import it in my index.js it shows an error. Can someone please help me in resolving this

Failing to start node application with error

I am seeing an error when I start to run my node application.
Error says "ERROR in Metadata version mismatch for module ../node_modules/#ng-bootstrap/ng-bootstrap/index.d.ts, found version 4, expected 3"
Full error trace is:
ERROR in Metadata version mismatch for module
D:/MyProj/Client/node_modules/#ng-bootstrap/ng-bootstrap/index.d.ts,
found version 4, expected 3, resolving symbol AppModule in
D:/MyProj/Client/src/app/app.module.ts, resolving symbol AppModule in
D:/MyProj/Client/src/app/app.module.ts, resolving symbol AppModule in
D:/MyProj/Client/src/app/app.module.ts webpack: Failed to compile.
I got the same error
Probably in your package.json you have the following:
"#ng-bootstrap/ng-bootstrap": "^<VERSION_HERE>"
The problem is with the dependecies versions, so you can just update everthing to the last version, there is a topic in stackoverflow already: Metadata version mismatch with Angular 4
Or in my case that I couldn't just update all packages,I did the following:
I removed the package, also removed the ^ signal before the version number and then ran npm i again.
After this the app worked properly.

react-hot-typescript-webpack setup issue

I'm using this template to get my project setup: https://github.com/wmaurer/react-hot-boilerplate-ts
When doing npm start i get the error (eventually):
ERROR in ./src/index.tsx
Module build failed: TypeError: compiler.parseConfigFile is not a function
at ensureTypeScriptInstance (C:\Users\mslavsky\Desktop\react-hot-boilerplate-ts-master\node_modules\ts-loader\index.js:147:38)
at Object.loader (C:\Users\mslavsky\Desktop\react-hot-boilerplate-ts-
master\node_modules\ts-loader\index.js:365:14)
# multi main
webpack: Failed to compile.
Can anyone help please? I did npm install as well
I suggest you take a look this project: https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS
There you can see configuration for WebPack 2, React Hot Loader, TypeScript and React

react-router cannot resolve module history, missing lib folder

I'm creating a new React project and I have a dependency issue between react-router and history :
ERROR in ./~/react-router/lib/match.js
Module not found: Error: Cannot resolve module 'history/lib/Actions' in /app/node_modules/react-router/lib
# ./~/react-router/lib/match.js 15:15-45
ERROR in ./~/react-router/lib/useRouterHistory.js
Module not found: Error: Cannot resolve module 'history/lib/useQueries' in /app/node_modules/react-router/lib
# ./~/react-router/lib/useRouterHistory.js 6:18-51
ERROR in ./~/react-router/lib/createMemoryHistory.js
Module not found: Error: Cannot resolve module 'history/lib/useQueries' in /app/node_modules/react-router/lib
# ./~/react-router/lib/createMemoryHistory.js 6:18-51
ERROR in ./~/react-router/lib/useRouterHistory.js
Module not found: Error: Cannot resolve module 'history/lib/useBasename' in /app/node_modules/react-router/lib
# ./~/react-router/lib/useRouterHistory.js 10:19-53
ERROR in ./~/react-router/lib/createMemoryHistory.js
Module not found: Error: Cannot resolve module 'history/lib/useBasename' in /app/node_modules/react-router/lib
# ./~/react-router/lib/createMemoryHistory.js 10:19-53
ERROR in ./~/react-router/lib/browserHistory.js
Module not found: Error: Cannot resolve module 'history/lib/createBrowserHistory' in /app/node_modules/react-router/lib
# ./~/react-router/lib/browserHistory.js 5:28-71
ERROR in ./~/react-router/lib/hashHistory.js
Module not found: Error: Cannot resolve module 'history/lib/createHashHistory' in /app/node_modules/react-router/lib
# ./~/react-router/lib/hashHistory.js 5:25-65
ERROR in ./~/react-router/lib/createMemoryHistory.js
Module not found: Error: Cannot resolve module 'history/lib/createMemoryHistory' in /app/node_modules/react-router/lib
# ./~/react-router/lib/createMemoryHistory.js 14:27-69
I'm using react-router last release 3.0.0 which has history 3.0.0 as a dependency in its package.json.
I'm using npm version 3.10.8 and even if history module is installed by react-router dependency, I added it in my package.json too, as stated in react-router docs.
Thing is react-router is searching its requires in history/lib/ while history module has its files in history/ (no lib folder).
Since it doesn't depend on my configuration/installation but on third parties modules, I don't see what to do and I'm surprised to not find any issue regarding this.
The problem is actually to follow react-router installation instructions, adding history module in our own package.json.
Installing the last version of history on your own instead of the one required by react-router is creating this conflict.
With react-router >= 3.0, history is a dependency with a fixed version requirement, installed along with react-router itself :
└─┬ react-router#3.0.0
└── history#3.2.1
no need to install it manually in your package.json, it will create conflicts if you don't specify the right required version.
Thanks to #ShubhamKhatri for having pointing me in this direction.
If you are using npm version greater than 3.0.0 .
Note that you need to also install the history package since it is a peer dependency of React Router and won't automatically be installed for you in npm version freater than 3.0.0.
Run npm install history and you should be good.
The path needs to be updated it is no longer
history/lib/createHashHistory
It's just
history/createHashHistory
React Training Link
Also probably import HashRouter from react-route-dom. HashRouter replaces Router and no need to pass history as a prop anymore.

Webpack CSS Loader - Module not found: Error: Cannot resolve module 'file'

I am getting this error when trying to use CSS-Loader...
Module not found: Error: Cannot resolve module 'file'
What's going on?
Poorly named error. To fix,
npm install --save file-loader
Module "file" is actually file-loader but the syntax removes the word loader for some reason.

Resources