I have Angular4 integrated with Visual Studio 2017 using this article.
I also use Nodejs 8.6.0 and npm 5.4.2 (the latest versions at this time).
vs2017 generated a folder named node_modules and all the sub folders/files without caching any error.
But node_modules/systemjs folder does not exist in it. It's been called in <header> tag like this: <script src="node_modules/systemjs/dist/system.src.js"></script>. which result to 404 Not Found page.
I also create an angular from the ground up without VS2017 and it works like a charm! It doesn't have node_modules/systemjs folder either, but it works!!!
What is happening? And how should i bring this folder back? Does it related to the Angular2 and is not supported in Angular4?
There are two libraries for loading modules for Angular: systemJS and Webpack. Depending on which technique you use to build your application, you will use one or the other.
For example, if you use the Angular CLI, it uses Webpack and you won't see systemJS in your project.
If you use the latest dotnet new angular for VS 2017, it uses Webpack as well.
If you build your application following the angular.io documentation, it uses systemJS.
Related
I have developed a nodejs project as an umd library, with the purpose to use it in a another nodejs project. The library project builds fine and generates the index.js file and index.min.js file.
But when I tried installing the library project locally using npm install "asolute path". It brings all the things in the library project. And the size of my project I want to use the library project grew. Seems it is because of all the files in library project is getting copied.
Thanks for any help in advance.
Have you added an .npmignore file?
Also, you'll probably want to use npm link for local development.
Why do I have to install Node.js to work with Polymer? Just because of npm? Are there any other uses for Node.js in a typical Polymer project? Or is npm just used to install Bower, and Bower to install project dependencies?
Node.js is just use to create project files. create a polymer project you have to use the console polymer CLI.
once files are generated you don't need the CLI until new project or to modify the current one.
You don't need Node.js. You can download all the components you want (plus all their dependencies and polyfills) from Github yourself, and organize them in your project directory. You also don't need any project files if you're going that route.
If you want, however, to conveniently install the components and all their dependencies, you can use bower, or the more recent yarn, which use Node.js. Also, if you want to host your project on Github or similar, it's useful to just commit bower.json which contains a list of all the dependencies (and can then conveniently be installed after cloning the repo), instead of forking all of Polymer's code into your project repo.
Having this said, if all you need is Polymer itself without any of the web components Polymer provides, it's probably even easier to just download Polymer and the required polyfills yourself.
There are more uses for Node.js. You may want to use some packages in your Polymer project, such as Redux, which you can also just download yourself, or install using NPM/Node.
I always wondered how I can properly add the clientsided javascript in my express project. I use Typescript and I would also like to take advantage of the Typescript typings (for jquery for instance) when writing my clientside javascripts.
My project structure looks like this:
root
dist
src
helpers
models
registration
router.ts
form.pug
profile
router.ts
profile.pug
wwwroot
css
js
images
What I have done until today:
I created all clientsided javascript files in wwwroot/js (e.g. jquery.min.js, registration-form.js) and I loaded them into the header of the appropriate pages.
Disadvantages:
I had to write ES5 javascript which is compatible with the browsers we would like to support
I couldn't put the javascript files where they logically belong to (e. g. I'd rather put my registration-form.js into src/registration/ instead of the wwwroot)
No Typescript possible :(. No typescript typings, no transpiling to ES5 etc.
In some tutorials I saw they would simply run npm install --save jquery and import it in their clientsided files. So I feel like I must have missing some pretty important stuff, but I couldn't find any tutorials about it.
My question:
What is the "right way / best practice" to write clientsided javascript in Typescript / Express applications (which should also elliminate also the mentioned disadvantages)?
Using TypeScript on the client side is not much different from the server side.
Here is what you can do:
Create client folder for client-side typescript sources
Put tsconfig.json into client folder and configure it to produce "es5" code (target: es5)
Install jquery types (npm install --save-dev #types/jquery)
That's it, now you can write your client side code in TypeScript.
You can compile server-side code with tsc -p ./src (having server-side tsconfig.json under src) and compile client-side code with tsc -p ./client.
I made a simple example of such app, check it here. I put the simple script to build everything into package.json, so you can run npm run-script complie to get both server and client code complied into /dist folder. Then run it with npm start.
Further steps:
Automate your flow: you should be able to start your app locally and then just edit source TypeScript files and the app should be reloaded automatically. This can be done with webpack / gulp / grunt or custom shell script that can be triggered once any of your source file has been changed and saved.
If you find yourself writing good amount of client-side code, check also angular (https://angular.io/docs). It uses TypeScript as preferred language for client-side development and you'll be able to build much more powerful client-side app using it. You may choose another library as well (react, vue.js, etc), see the examples on the TypeScript site.
My server-side web project doesn't use npm at all. Now I need to add a new page that needs more SPA feature. I wish to use the newer Angular2, not the old one.
I miss the way that Angular1 can include only a few js files to start working. I know system.js can do this, but all the samples use npm install to get node_modules. I also want to avoid this big and fat folder.
Can I write angular2 app without node_modules?
I started a tutorial on Angular 2.0, the first step in setting up the workspace is installing Node.js and NPM.
Why do we have install Node.js for Angular 2.0?
I don't remember doing this for angular 1.X.
Technically, Node.js and NPM are not needed to do Angular2 work. It does ease things though. Here's the main reasons I speculate are behind this choice:
CLI: Since a while now the de facto way to build and develop new Angular apps is to use the CLI tooling which relies on Node and NPM as well.
TypeScript: Examples are .ts, and you need to run a compiler step to get them into .js, which can be done on-the-fly easily with Node.js and NPM (plus it's a way of easily getting typing files);
Web Server: Serving your Angular SPA from a "real" albeit light web server prevents probably some nasty issues that come with checking your site using file:// links.
The Quickstart guide itself actually continues to mention some more concrete reasons as well:
Here's what these scripts do:
npm start - runs the compiler and a server at the same time, both in "watch mode"
npm run tsc - runs the TypeScript compiler once
npm run tsc:w - runs the TypeScript compiler in watch mode; the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them
npm run lite - runs the lite-server, a light-weight, static file server with excellent support for Angular apps that use routing
npm run typings - runs the typings tool separately
npm run postinstall - called by npm automatically after it successfully completes package installation. This script installs the TypeScript definition files defined in typings.json
You can also have a look at the Quickstart source and further dive into where NPM is needed.
Footnote: there's a similar question about needing Node.js for AngularJS (1.x).
Because Anglar2 is based on Typescript, Web Components and ES6 which need compilation for performance and broader browser support. Typescript is compiled to ES5 JavaScript and the other features require shims for backwards compatibility.
Since Typescript is a superset of JavaScript, and it's compiled to JavaScript anyway, you can write your code in plain JavaScript but it's not recommended.
For a more detailed explanation check out these videos on YouTube
Why Typescript
Instalation steps
NodeJS gives you the tool npm that allows you to download libraries and packages you would use in Angular 2. From the shell you can go to your folder and type npm install to install dependencies you need to have installed to get your angular project going. It will make it easier for you! If you want a complete starter kit go to https://github.com/buckyroberts, you can fork or download the zip with all the starter files to get you going :)
You do not need to use Node anywhere in production to use any front-end JavaScript framework, whether it is jQuery, AngularJS, ReactJS, Angular2, etc.
Angular2 can be used in isolation but to get and feel better development environment, angular2 should be used with nodejs and npm. Some of the nodejs modules helps you in web development.