EzDev.org

angular-cli

angular-cli - CLI tool for Angular


how to change the dist-folder path in angular-cli after 'ng build'

I would like to use angular-cli with asp.net core and I need to know how I can change the path of the dist folder


Source: (StackOverflow)

What is the best way to delete a component with CLI

I tried using "ng destroy component foo" and it tells me "The destroy command is not supported by Angular-CLI"

How do we properly delete components with Angular CLI?


Source: (StackOverflow)

how to end ng serve or firebase serve

I've been doing web development with angular2 and have been using both angular2 and firebase to generate local servers. I haven't been able to find a command similar to typing quit when using ionic to create a server, so i have to close the terminal tab each time. Is there a way to end the server and get my terminal tab back?

Thanks


Source: (StackOverflow)

ng is not recognized as an internal or external command

Running windows 7 Professional 32bit.

I tried running npm install -g angular-cli both under normal or admin. 2016-06-23_14h46_40

I also tried adding it to the Enviorment Variables under PATH: (C:\Users\Administrator\AppData\Roaming\npm\node_modules\angular-cli\bin\ng) , with no success also.
2016-06-23_14h56_48

What am i doing wrong?


Source: (StackOverflow)

Angular CLI SASS options

I'm new to Angular and I'm coming from the Ember community. Trying to use the new Angular-CLI based off of Ember-CLI.

I need to know the best way to handle SASS in a new Angular 2 project. I tried using the ember-cli-sass repo to see if it would play along since a number of core components of the Angular-CLI are run off of Ember-CLI modules.

It didnt work but than again not sure if I just misconfigured something.

Also, what is the best way to organize styles in a new Angular 2 project? I'd be nice to have the sass file in the same folder as the component.


Source: (StackOverflow)

How to bundle an Angular app for production

I would like to track and update in this thread the latest best (and hopefully the simplest) method to bundle Angular (version 2, 4, ...) for production on a live web server.

Please include the Angular version within answers so we can track better when it moves to later releases.


Source: (StackOverflow)

How to add bootstrap to an angular-cli project

We want to use bootstrap 4 (4.0.0-alpha.2) in our app generated with angular-cli 1.0.0-beta.5 (w/ node v6.1.0).

After getting bootstrap and its dependencies with npm, our first approach consisted in adding them in angular-cli-build.js:

  'bootstrap/dist/**/*.min.+(js|css)',  
  'jquery/dist/jquery.min.+(js|map)',  
  'tether/dist/**/*.min.+(js|css)',

and import them in our index.html

  <script src="vendor/jquery/dist/jquery.min.js"></script>
  <script src="vendor/tether/dist/js/tether.min.js"></script>
  <link rel="stylesheet" type="text/css" rel='nofollow' href="vendor/bootstrap/dist/css/bootstrap.min.css">
  <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

This worked fine with ng serve but as soon as we produced a build with -prod flag all these dependencies disappeared from dist/vendor (surprise !).

How we are intended to handle such scenario (i.e. loading bootstrap scripts) in a project generated with angular-cli ?

We had the following thoughts but we don't really know which way to go...

  • use a CDN ? but we would rather serve these files to guarantee that they will be available

  • copy dependencies to dist/vendor after our ng build -prod ? But that seems like something angular-cli should provide since it 'takes care' of the build part ?

  • adding jquery, bootstrap and tether in src/system-config.ts and somehow pull them into our bundle in main.ts ? But that seemed wrong considering that we are not going to explicitly use them in our application's code (unlike moment.js or something like lodash, for example)


Source: (StackOverflow)

How to add font-awesome to Angular 2 + CLI project

I'm using Angular 2+ and Angular CLI.

How do I add font-awesome to my project?


Source: (StackOverflow)

When to use 'npm start' and when to use 'ng serve'?

ng serve serves an Angular project via a development server

 

npm start runs an arbitrary command specified in the package's "start" property of its "scripts" object. If no "start" property is specified on the "scripts" object, it will run node server.js.

It seems like ng serve starts the embedded server whereas npm start starts the Node servers.

Can someone throw some light on it?


Source: (StackOverflow)

angular-cli where is webpack.config.js file - new 2017-Feb: ng eject

UPDATE: February 2017: use ng eject

UPDATE: November 2016: angular-cli now only use webpack. You only need install normally with npm install -g angular-cli. "We changed the build system between beta.10 and beta.14, from SystemJS to Webpack.", but actually i use angular-cli just to firs structure and folders and then anymore, i use webpack config manually

I've installed angular cli with this:

npm install -g angular-cli@webpack

When I worked with angular1 and web pack , i used to modify "webpack.config.js" file to execute all the task and plugins, but i don't see on this project created with angular-cli who does it work. it's magic?

I see Webpack is working when i do:

ng serve 

"Version: webpack 2.1.0-beta.18"

but i don't understand the way that angular-cli config works...


Source: (StackOverflow)

What does the angular compiler "compile"?

I was asked that today and was not able to give a proper answer.

Typescript transpiles to JS. Then there is tree shaking, "less" (optional) and what else in the process of making a deployment. But nothing like that (afaik) has anything to do with "compiling". Everything gets bundled and heavily optimized, but it's not actually compiled, right?

There is even an ahead of time compiler, which really does a noticeable job. What do I miss?

Javascript itself is still intepreted, right?


Source: (StackOverflow)

Angular Cli Webpack, How to add or bundle external js files?

I am not sure how to include JS files (vendors) after switching Angular Cli from SystemJs to Webpack.

For example

Option A

I have some js files that were installed via npm. Adding script tags to the head tag like this does not work. Nor does it seem like the best way.

<head>
   <script src="node_modules/some_package/somejs.js">
</head>

//With systemJs I could do this

<head>
   <script src="vendor/some_package/somejs.js">
</head>

Option B

Include these js files as part of the webpack bundle. This seems like the way it probably should be done. However I am not sure how to do this as all of the webpack conig seems to be hidden behind the angular-cli-webpack package. I was thinking maybe there is another webpack config that we might have access to. But I am not sure as I didn't see one when creating a new angular-cli-webpack project.

More Info:

The js files I am trying to include need to be included before the Angular project. For example jQuery and a third party js lib that isn't really setup for module loading or typescript.

References https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack


Source: (StackOverflow)

Angular2 CLI error "@angular/compiler-cli" package was not properly installed

I'm working an Angular 2 project. Now trying to install Angular CLI within the current project with the following

npm install --save-dev @angular/cli@latest
npm install

Problem is when running ng serve I receive error

The "@angular/compiler-cli" package was not properly installed.
Error: The "@angular/compiler-cli" package was not properly installed.
    at Object.<anonymous> (/myng2project/node_modules/@ngtools/webpack/src/index.js:14:11)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/myng2project/node_modules/@angular/cli/tasks/eject.js:10:19)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)

Source: (StackOverflow)

How to include custom files with angular-cli build?

RE: Angular2 2.0.0, angular-cli v1.0.0-beta.11-webpack.8

How do I tell angular-cli to include a file from "src/assets" in the root of "dist" when it builds?

We deploy to a Windows host and need to include a "web.config" file to tell IIS to route everything to index. We were doing this pre RC4, but with all of the updating it fell through the cracks (I don't remember how we did it).

I've been scouring the GitHub repo docs and haven't found anything of use in regards to this topic. Maybe I'm in the wrong place?

In the ToC, there is a bullet point "Adding extra files to the build", but it appears that section doesn't exist.


Source: (StackOverflow)

angular-cli server - how to specify default port

Using angular-cli with the ng serve command, how can I specify a default port so I do not need to manually pass the --port flag every time?


Source: (StackOverflow)