How to use webpack plugin with Angular Cli? - angular

I create new project with angular cli. Angular version is 5.
How can I use some webpack plugins in the cli build process without moving out of the cli?

If you want to change the webpack configuration of a CLI project, you will have to eject the project.
Ejecting a CLI project doesn't mean you are moving out of the CLI. In fact, you can continue to use many CLI commands in your project. Commands to create new components, or any other code scaffolding commands are still available. Commands to build and serve the application are replaced by npm scripts. You will see the new commands to use when you run ng eject.

Related

How to build angular 2 app without cli

I am new in angular 2, I want to know how to build my angular 2 app without using CLI for production.
Thanks in Advance.
If you have used CLI for your existing application You can migrate from Angular CLI to Webpack and tweak it accordingly for
(local, development, production).
Since Angular CLI v1.0 there’s the “eject” feature, that allows you to extract thewebpack config file and manipulate it as you wish.
Run ng eject so Angular CLI generates the webpack.config.js file.
Run npm install so the new dependencies generated by CLI are satisfied
Refer this Angular CLI to webpack
if you don't want to use CLI at all Refer This An Angular 2 Webpack setup for development and production and Webpack: An Introduction
If you want to go without Angular CLI
Do create all the required thing by yourself, and that is very difficult task
you should go here : https://github.com/angular/quickstart , download quickstart project and start work
But I strongly suggest go with CLI as there it support end to end activity i.e. project start till deployment project

Bundling for Existing Angular 2 project (Using CLI or Web Pack)

I have one Angular 2 Legacy project in which js is not bundled.I have tried using webpack but I am facing multiple issue. Every where on net I've found the steps to bundle for new project but nowhere mentioned actual steps for old Legacy angular project. If anyone know the exact steps Please let me know. Thanks in ad
Install Angular CLI, create a new project using CLI, and try moving your files/components/modules to this CLI project in related directories and run the project.
Use these commands:
1. Install Angular CLI
npm install -g #angular/cli
2. Create CLI project
ng new <project_name>
3. Go to project directory
cd <project_name>
4. Run CLI project
ng serve -o

How to build angular cli based project after switching to webpack using ng eject command

Recently I switched to webpack from angular cli because I was facing issue with some libraries. I manually included few scripts within webpack.config.js file. So, now how can I compile the angular project without switching back to cli?
Previously I used this command to compile the angular project:
ng build -prod --aot=false
Is there any equivalent options within webpack?
Why not use yarn
yarn build
Yarn is an alternative package manager for NPM packages with a focus on reliability and speed.
To enable Yarn for Angular CLI you have to run the following command:
ng set --global packageManager=yarn
More info can be find over here

Typescript required for taking build in production with angular cli?

I have developed Angular 4 based application and providing the source file to build team and they have NodeJS and Angular CLI, could TypeScript required to build the source code in production with their machine?
for ng build--prod
This is rather unclear but I will try my best to answer (from what I have understood on my own).
When you create an Angular project with the CLI, it installs all the required dependencies, such as Typescript, or SASS, for instance.
When you build your application, you again type in the command ng build : this means you are actually using the CLI to build your application. The same CLI that has already installed all the required dependencies.
So, if you want to know if you need to install typescript as a global package, the answer is no. If you mean you need to install typescript as an application dependency, then the answer is yes.
In the end, all you need to do to deploy your app (or for your coworkers to deploy it), is the source code, and a global installation of the CLI.
I hope this helps !
Let me give you example of our usage of angular in production environment.
In our local machines, we have npm and angular-cli (global) installed, and once we are done with development, we merge our code into the repository and use jenkins build jobs to build our code. However, there may be other teams who use the same jenkins machine to build their own code and we may have different angular-cli version dependecies. Let's say our project uses angular-cli v1.5.4, and theirs use angular-cli v1.4. It would be a bad idea to install global angular-cli in the build machine. However, to run ng build --prod command, you need to have a globally installed angular-cli.
Instead of this, you should always build your code with npm run build command which will trigger the build script written in your package.json. This way, you don't need to have an globally installed angular-cli, npm will use local angular-cli within your project so that every team can build their code with different versions of angular-cli.
Hope this clarifies your question.

Why doesn't Angular CLI project start?

I have an Angular 4 project that I created a couple of months ago. When I go into the Angular project folder and type in ng serve, I get this error:
You have to be inside an angular-cli project in order to use the serve
command.
Any idea what is wrong?
Is there some specific file that I can verify is there?
As a side note, I create a ng new Folder2 and was able to successfully run ng serve in that folder.
For me it is seems like as you didn't touch the project for so long you might have an older version of the angular cli in you project than your global version or way around.
if you run ng -v outside your project it show you global cli version
if you run ng -v inside your project it will show you local cli version, also you can check the cli version in package.json in devDependencies
So you have two options.
1 update angular cli
2 run npm run ng serve this way npm will run the local angular cli, the one form package.json file

Resources