I am starting up with angular. I have a basic angular template project ready, with some of my changes done in it:
When I do ng serve, it starts correctly in the browser.
When I copy paste it in vscode to create duplicate, it seems that it does not fully copy pastes it:
Now when I do ng serve inside this project folder, it gives me following error message:
PS E:\workspaces\angular-course\5-second-app-proj-template> ng serve
Could not find module "#angular-devkit/build-angular" from "E:\\workspaces\\angular-course\\5-second-app-proj-template".
Error: Could not find module "#angular-devkit/build-angular" from "E:\\workspaces\\angular-course\\5-second-app-proj-template".
at Object.resolve (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\#angular-devkit\core\node\resolve.js:141:11)
at Observable.rxjs_1.Observable [as _subscribe] (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\#angular-devkit\architect\src\architect.js:132:40)
at Observable._trySubscribe (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\Observable.js:43:25)
at Observable.subscribe (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\Observable.js:29:22)
at DoOperator.call (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\operators\tap.js:29:23)
at Observable.subscribe (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\Observable.js:24:22)
at C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\util\subscribeTo.js:22:31
at Object.subscribeToResult (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\util\subscribeToResult.js:7:45)
at MergeMapSubscriber._innerSub (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\operators\mergeMap.js:75:38)
at MergeMapSubscriber._tryNext (C:\Users\anir\AppData\Roaming\npm\node_modules\#angular\cli\node_modules\rxjs\internal\operators\mergeMap.js:72:14)
How should I duplicate my template angular project, to start up with new one. I went to Windows File Explorer and found that the angular project contained 28241 files, 3644 folders and is of 241 MBs. Copying this in Windows File Explorer also takes a lot of time. Am I doing anything wrong?
You forgot to copy the src folder into your duplicated project. And all project config inside a package.json are missing. You also missing all angular-cli necessary dependencies.
First:
go into your second project and make sure all files from your first project are successully copied. i.e following: src folder, package.json, tsconfig.json, tslint.json, etc...
You should go into your windows explorer folder and copy all the files and folder (excluding the node_modules folder) into your second project.
second:
if all files are copied, run npm install inside your new project in order to generate a new node_modules folder. Then ng serve should work fine as expected.
Related
I am trying to migrate my application from create react app to Vite. I followed this tutorial article on how to do it. So far, I have deleted the node_modules folder, made the following changes:
changes to package.json:
then ran npm i, then made these changes to
I actually had to replace "start" with "dev" for this one to get it to work:
I then moved public/index.html to index.html (project root folder).
changes to index.html:
changes to index.html:
I added this vite.config.jsx file:
Lastly I replaced all .js file extensions with .jsx. But now when I enter npm run dev it is telling me it can't find multiple different modules. I get a message like this:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/gtrman97/Documents/code/coding-projects/project/node_modules/esbuild/' imported from /Users/gtrman97/Documents/code/coding-projects/project/node_modules/vite/dist/node/cli.js
Out of curiosity, I commented out the import 'esbuild'; line in the cli.js file but got the same error with a different module:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/gtrman97/Documents/code/coding-projects/project/node_modules/resolve/' imported from /Users/gtrman97/Documents/code/coding-projects/project/node_modules/vite/dist/node/cli.js
The easiest way to migrate from CRA to vite, for me, is to create a vite app and copy all the components I created and install all of the dependencies I have on the CRA app. And boom, it just works. At least for my typescript CRA project. (And by examing git diffs, not surprisingly, only the package.json file changed.)
Whenever I create Vue and React projects using npm, it generates a "tmpnodejsnpm-cache" folder in my project directory.
And after deleting this folder also project runs properly but if I hit the "npm i" command again it will again create same folder, I want to get rid of it.
I'm new in angular and every time I want to create new angular application it downloads approximately 316MB files from internet.
I was wondering if there is any way to skip downloading node_modules folder and just download other angular files neccessary to run my app and then copy&paste my (existing) node_modules folder to root folder of my app.
you can run the command ng new <YourProjectName> --skip-install, It will create a package without node_modules folder.
Yes, it's possible. Copy package.json, package-lock.json and node_modules. node_modules usually doesn't contain any project specific files or configurations.
My Vue project is running fine locally, but when upload it to github repo, download it back from there and npm install, then npm run dev, it throws error Module build failed: Error: No ESLint configuration found.
When I unzip my downloaded repo-files, there's no .eslintrc etc. files that are present when I'm uploading my project, and to my knowledge that is one reason causing this ESLint problem.
Here's the very basic vue init webpack HelloWorld.vue uploaded to my test-repo without any modifications to show how it fails to build after downloading.
Link to my test repo to reproduce the error: https://github.com/tuuchen/vue-movie-app
How can I fix this issue with eslint?
EDIT: I made a fresh project without eslint, and when downloading it from my git repo, It's throwing Failed to compile error, asset optimization[copy-webpack-plugin] WARNING - unable to locate '<path>\myvueapp\static'
EDIT 2: Also .postcssrc is missing when initiating npm install
EDIT 3: Problem solved. I was using webpack for creating my vue project, and it caused all kinds of issues when downloading the project back from git repo. npm install -g #vue/cli did a project that worked without issues.
Sorry for being such a noob.
This issue came up as I created a new project by copying from another project on my Mac. However, the hidden files were not copied!
Solution
The issue got resolved by having these hidden files as well in the new project:
.babelrc,
.editorconfig
.eslintignore
.eslintrc.js
.postcssrc.js
There are other solutions that many have proposed in this Vue Issue that you can refer to if this does not solve your problem.
In my case, I just delete the folder Node.Js and try reinstall node modules using yarn/npm.
if it still did not work, you can try to add file .eslintignore on the root folder and add there the path to the folder we want to omit.
For example, in this scenario, .build/test.js is the desired file to allowlist. Because all dot-folders and their children are ignored by default, .build must first be allowlisted so that eslint becomes aware of its children. Then, .build/test.js must be explicitly allowlisted, while the rest of the content is denylisted. This is done with the following .eslintignore file:
# Allowlist 'test.js' in the '.build' folder
# But do not allow anything else in the '.build' folder to be linted
!.build
.build/*
!.build/test.js
more documentation https://eslint.org/docs/user-guide/configuring/ignoring-code#the-eslintignore-file
I have Angula2 -cli project and set it like the site cli.angular.io guide.
To start with new project I need to run cmd: ng new my-project-name
and the project folder is created with some files and also node_module folder.
How can I avoid the node_module folder creation every time I create a new project ?
Can I just reference to the node.js module that is located in my PC?
The node_modules folder is created to hold dependencies of your project, so you will need that in order to run or test your application.
With that being said, if you'd like to just create the project without installing all of them, you can use the skip-npm argument, but note that you will not be able to run or test your application.
ng new my-project-name --skip-npm