The Problem
On an existing Angular 5x application, I want to upgrade to Angular v8x and take advantage of all the sexy things, including ng generate component. I successfully modified the code to satisfy v8, and changed the npm packages correctly; the app runs (whoo-hoo!). Now, I can't get the Angular cli to work because of missing files like angular.json.
Things I've tried
Using ng new
ng new will create the project files I need, but I didn't want to overwrite my existing code, e.g. app.module.ts, so I ran
ng new my-app --directory [existing source directory of my app]
That overwrote many files, package.json, app.module.ts,etc, so I ran int again as:
ng new revenue --directory=./ --create-application=false --force
A lot of files were preserved, but package.json was not.
The Goal
Have my now upgraded app, running Angular v8, able to run fun things like ng serve
Not have to re-write package.json
Thanks for your help!
Upgrading to Angular 8 should modify package.json.
People typically use ng update to do this (link).
Updating Configuration Files
There are many differences between Angular 4|5 and Angular 6 such as
Angular 6 uses angular.json instead of angular-cli.json.
Different versions of dependencies in package.json etc.
You can update different configuration files automatically by running the following command from the project's root folder:
ng update #angular/cli
What is the ng update Command?
Ng update is a command available in Angular CLI which is used to update your application and its dependencies. You can use it to update all packages in the package.json file via the --all option that could take true or false or specific versions via the --packages option. You can see all the available commands from the official docs.
I ended up creating a brand-new application with ng new my-app, then copying over the files from the existing app. After modifying the code to work with Angular 8, using HttpClient, for example, the app successfully ran. I think I had to do it this way because of the fundamental changes to the project meta files. Hopefully, future upgrades won't be so challenging.
Related
I inherited a monorepo with a packages folder that has every existing package. I want to add a main package that is required by my panel package. panel already exists at version 0.34.0. Seeing as I merge to my repo without publishing a new version all the time, I want to create main at 0.34.0.
I tried going into packages/main but doing npx lerna publish only wants me to do 0.34.1 so I am worried if I try to do custom 0.34.0 I will break something. I tried npx lerna boostrap but it even says it goes to root doesn't ask for me to do anything in regards to brand new package in existing project.
Do I need to create the package and bump my whole monorepo to 0.34.1 via publish to then let any existing package use it?
I use symlinks locally, but when I go to make a PR, my CI will run yarn install which (I don't think) would find the packages when reviewing the package.jsons. Therefore, I don't think Using Lerna with unpublished packages applies here? I think I need to actually publish a version that can be referenced?
Going into the new main folder and typing npm publish - and just skipping lerna, is what worked. Found that out here: https://github.com/lerna/lerna/issues/1691.
Everything went where I expected and then I could just manually update package.json files as needed that are using the new package.
I am currently looking at deploying a personal project to Netlify. This project uses an npm package called NES.css which is found here: https://nostalgic-css.github.io/NES.css/.
I have a gulp file that has a build process that minifies, bundles, transpiles all the scss, js, images, etc. This is done by running npm build.
Netlify is setup to run this build command on deploy. Everything works as far as deploying goes, however, there are two images that the NES.css's stylesheet references that are no longer found because Netlify deletes the node modules before deploying your code. Any suggestions?
Since nes.css just gives you a css to play with, you can easily fetch the css elements into your HTML via CDN by including following in the
Bonus: With the above method, you don't need to worry about updating your nes.css npm module every time the original nes GitHub project gets an update.
I have just started learning Vue.js. The author is using npm install -g vue-cli but it did not work with me because I got stuck with technical issues and I tried many solutions to fix it but I couldn't.
So I want to follow up with the author but using npm install -g #vue/cli. So Do you think I it will be easy to follow up with him? I mean are these different versions use different syntax?
The vue-cli package seems to be the old cli. The main difference between this version and Vue CLI 3 is that the webpack configuration used to be visible in the project as a build directory. To make changes to the build process you used to have to modify files within this folder. In Vue CLI 3 this has been moved to a helper that consumes a configuration file vue.config.js in the project. The structure of files has been slightly altered in this version of the CLI. Both work with Vue 2.x, so the way you write .vue files has not changed in any way.
Overall you should have little trouble following the tutorial, unless you are going to make changes to the build process. In that case, simply consult the official documentation or find a tutorial that is specifically for Vue CLI 3.
I downloaded the free template for a single-page application with ASP.Net Core 2.x and EntityFramework Core 2.x. version 3.9.0.
After unpacking the archive, I did not found the project ProjectName.Web.MVC in the solution. If I understand correctly, I need to somehow generate it. But neither on the official documentation site, nor here I found a single word about how to do it. There is a file 3.9.0/aspnet-core/build/build-mvc.ps1 in the archive, maybe I need to use it somehow?
How to compile/generate/create an ProjectName.Web.MVC project for using Vue.js?
I solved this problem as follows.
First, need to understand that when you debug/start a project in VisualStudio, only WebAPI starts. To start vue, you need installed Node.js, Yarn and following npm packages like so:
npm install -g webpack, vue-cli, babel-cli, babel-preset-env
If any packages are redundant, then tell me in comments.
After that, I started the project from VisualStudio and called following NPM commands in the console in vue folder npm install --save-dev. After this dependencies loaded to node_modules folder. At last run npm command npm run serve. Now vue available at URL http://localhost:8080.
I have developed an Angular 2 application using npm, As a fresher,I don't know some ways like below.
When I publish I used npm publish so that it publish the application in npm account in the web.
So here, is there any way to publish our app in the localhost,because I don't want to use npm account and I just need to avoid node_modules folder on publishing ?
If any other way,that can be used to publish the Angular2 Application in local other than npm, let me know.I try that.
If it is not possible to publish the application without npm web account, Kindly let me know please .
Excuse mistakes,If any.Thanks in adv :)
npm publish is to make a library package available to other for free use.
That's not what you use for making a web application available. This is called deployment.
For deployment you usually execute a build step that transpiles TS to JS, and combines them into a single file to reduce the number of requests the browser needs to make in order to get all source files of your application. It may also inline component HTML and CSS. This build step can also minify and mangle to JS code to reduce the resulting file size even more.
The resulting output can just be copied to any directory that any web server is able to serve to a browser either on your local machine or at some machine of a web hosting provider.
There are different ways to build your application depending on your setup.
See for example How to deploy Angular 2 application developed in Typescript to production?
You need browserify, that's all
browsers need references to all js files to be put in the html, they don't understand node's require() method that forms modules dependencies
what browserify does is traversing the entire dependency graph of your project, recursively bundling up all the required modules starting at the given root into a single js file
install it by node package manager
npm install -g browserify
use it to bundle all needed modules staring at main.js
browserify main.js -o bundle.js
now put a single script tag into your html
<script src="bundle.js"></script>
as far as i know, node_modules contains dependencies for typescript transpilers and few others. so it will not be possible to publish an app without using node_modules.
perhaps you can try using Plnkr or jsFiddle
where you can make imports online using cdn links for node_modules and publish your app.
it will be easy compared to other alternatives.
hope this helps.