This does now exist!

[Fix #3555][1]

To use it, update your .angular-cli.json file like so...

Angular version 2-5:

    &quot;assets&quot;: [
      &quot;assets&quot;,
      { &quot;glob&quot;: &quot;**/*&quot;, &quot;input&quot;: &quot;../node_modules/&lt;external library&gt;/assets/&quot;, &quot;output&quot;: &quot;./assets/&quot; }
    ]

Angular version &gt;= 6:

    &quot;assets&quot;: [
      &quot;src/favicon.ico&quot;,
      &quot;src/assets&quot;,
      {
        &quot;glob&quot;: &quot;**/*&quot;,
        &quot;input&quot;: &quot;./node_modules/&lt;your-node-module&gt;/&lt;possibly-subfolders&gt;/&quot;,
        &quot;output&quot;: &quot;./assets/&quot;
      },

  [1]: https://github.com/angular/angular-cli/commit/9e91d8646bb3681a9563258036528ac37b62141e

Since angular 6 the config has changed slightly. To achieve this now, change the `assets` property of the respective builder in `angular.json` (beware, there are at least **two relevant** builders in the architects `build` and `test`!)

    &quot;assets&quot;: [
      &quot;src/favicon.ico&quot;,
      &quot;src/assets&quot;,
      {
        &quot;glob&quot;: &quot;**/*&quot;,
        &quot;input&quot;: &quot;./node_modules/&lt;your-node-module&gt;/&lt;possibly-subfolders&gt;&quot;,
        &quot;output&quot;: &quot;./assets/&lt;possibly-subfolders&gt;&quot;
      },

Unfortunately, this doesn&#39;t exist yet :(. I&#39;m desperately awaiting this feature also. Feel free to track this feature request here for Angular-Cli. [Copying assets from node_modules][1]


  [1]: https://github.com/angular/angular-cli/issues/3555

**Updated**

See @luvaas response as of Angular 6!

I am new here but I have this issue with npm package like in my case I have to call another application UI through npm package in current application and image from package itself.

2 changes we need this case :

- Angular 6 above, in respective ng-package json add : `assets:[&#39;./assets&#39;]` in child application as this will create assets/image folder in dist folder on build.

- In angular.json add (in both architect and test) in parent application: 
```
assets: [
   {
      &quot;glob&quot;: &quot;**/*&quot;,
      &quot;input&quot;:&quot;node_modules/&quot;path of assets folder&quot;/images&quot;
   },
   &quot;output&quot;:&quot;./assets/images/&quot;
]
```


I have a file `example.csv` with the contents

    1,&quot;A towel,&quot;,1.0
    42,&quot; it says, &quot;,2.0
    1337,is about the most ,-1
    0,massively useful thing ,123
    -2,an interstellar hitchhiker can have.,3

How do I read this `example.csv` with Python?

Similarly, if I have

    data = [(1, &quot;A towel,&quot;, 1.0),
            (42, &quot; it says, &quot;, 2.0),
            (1337, &quot;is about the most &quot;, -1),
            (0, &quot;massively useful thing &quot;, 123),
            (-2, &quot;an interstellar hitchhiker can have.&quot;, 3)]

How do I write `data` to a CSV file with Python?

How do I read and write CSV files with Python?

I&#39;m using the latest Angular CLI, and I&#39;ve created a custom components folder which is a collection of all components.
 
For example, `TextInputComponent` has a `TextInputConfiguration` class which is placed inside `src/components/configurations.ts`, and in `src/app/home/addnewuser/add.user.component.ts` where I use it there is:

    import {TextInputConfiguration} from &quot;../../../components/configurations&quot;;

This is fine but as my app gets larger and deeper the `../` increases, how do I handle this?

Previously, for SystemJS, I would configure the path through `system.config.js` as below:

    System.config({
    ..
     map : {&#39;ng_custom_widgets&#39;:&#39;components&#39; },
     packages : {&#39;ng_custom_widgets&#39;:{main:&#39;configurations.ts&#39;, defaultExtension: &#39;ts&#39;},
    )};

How do I produce the same for webpack using Angular CLI?

Avoiding relative paths in Angular CLI

How to include assets from external library into Angular CLI project

I am trying below but this does not work,

      &quot;assets&quot;: [
        &quot;../node_modules/&lt;external library&gt;/assets/&quot;
      ]

Scripts are working fine though,

     &quot;scripts&quot;: [  
        &quot;../node_modules/&lt;external library&gt;/some.js&quot;,     
        &quot;startup.js&quot;
     ]

Angular Version : 2.4.1

Angular CLI : 1.0.0-beta.24

Any suggestion?

How to include assets from node_modules in angular cli project

How to include assets from external library into Angular CLI project
I am trying below but this does not work,
<pre><code class="hljs language-json"> "assets": [
 "../node_modules/&#x3C;external library>/assets/"
 ]
</code></pre>
Scripts are working fine though,
<pre><code class="hljs language-json"> "scripts": [ 
 "../node_modules/&#x3C;external library>/some.js", 
 "startup.js"
 ]
</code></pre>
Angular Version : 2.4.1
Angular CLI : 1.0.0-beta.24
Any suggestion?

What is wrong here? I&#39;m trying to make it work but I get that error in the header. I have included the `&lt;router-outlet&gt;&lt;/router-outlet&gt;` in the `app.component.html` that is being `templateUrl` called by the `app.component.ts`, still no luck.

**app.module.ts**: 

    import { NgModule }             from &#39;@angular/core&#39;;
    import { BrowserModule }        from &#39;@angular/platform-browser&#39;;
    import { FormsModule }          from &#39;@angular/forms&#39;;
    import { RouterModule, Routes } from &#39;@angular/router&#39;;
    
    
    import { AppComponent }  from &#39;./app.component&#39;;
    import { AppRoutingModule } from &#39;./app-routing.module&#39;;
    import { TopnavComponent } from &#39;./components/navbars/topnav/topnav.component&#39;;
    import { LeftnavComponent } from &#39;./components/navbars/leftnav/leftnav.component&#39;;
    import { LeftnavsecondaryComponent } from &#39;./components/navbars/leftnav-secondary/leftnav-secondary.component&#39;;
    import { WorldofwarcraftComponent } from &#39;./components/games/worldofwarcraft/worldofwarcraft.component&#39;;
    
    @NgModule({
    	imports:	[ BrowserModule, FormsModule, AppRoutingModule ],
    	declarations: 	[ AppComponent, TopnavComponent, LeftnavComponent, LeftnavsecondaryComponent, WorldofwarcraftComponent ],
    	bootstrap:	[ AppComponent ]
    })
    
    export class AppModule { }


**app-routing.module.ts**:

    import { NgModule }              from &#39;@angular/core&#39;;
    import { RouterModule, Routes }  from &#39;@angular/router&#39;;
    
    import { WorldofwarcraftComponent } from &#39;./components/games/worldofwarcraft/worldofwarcraft.component&#39;;
    
    const appRoutes: Routes = [
      { path: &#39;worldofwacraft&#39;, component: WorldofwarcraftComponent }
    ];
    
    @NgModule({
      imports: [ RouterModule.forRoot(appRoutes) ],
      exports: [ RouterModule ]
    })
    
    export class AppRoutingModule {}

Unexpected value &#39;undefined&#39; declared by the module &#39;AppModule&#39;

How can I bind an event listener in rendered elements in Angular 2?

I am using Dragula drag and drop library. It creates dynamic HTML but my event is not bound to dynamic HTML elements.


How to bind event listener for rendered elements in Angular 2?

We would like to call a rest api when angular 2 app being bootstrapped, i mean first thing it should do about the application is call this api and get some data which is required for application.

Is there anyway to achieve this? I saw following article but it was meant for beta version of Angular 2

[Sample Code based on Angular 2 beta or rc][1]


[Reading data before app start up][2]


  [1]: https://blog.sstorie.com/providing-external-data-when-bootstrapping-angular-2/
  [2]: https://gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9 &quot;Reading Data before app start up&quot;

How to call an rest api while bootstrapping angular 2 app

I am calling `router.navigate` on same page with some query string parameters. In this case, `ngOnInit()` does not call. Is it by default or do I need to add anything else ?

Router Navigate does not call ngOnInit when same page

Is there any not-so-complicated way to make a confirm dialog in angular 2, the idea is to click on an item and then show a popup or modal to confirm its deletion, I tried angular 2 modals from here [angular2-modal][1], but I don&#39;t know how to make that if you confirm or cancel it does something.
the click function works fine, the only problem is that I don&#39;t know too well how to use it. I also have another modal with the same plugin with the difference that I use.

```typescript
this.modal.open(MyComponent);
```
 
And I don&#39;t want to create another component just for show a confirmation box that&#39;s why I&#39;m asking.



  [1]: https://github.com/shlomiassaf/angular2-modal

Easy way to make a confirmation dialog in Angular?

I want to have a timestamp or build number somewhere on my Angular2 App so I can tell if a user is using an old cached version or not.

How to do this with AngularCLI in Angular2 at AOT compile/build time?

How to insert a Build Number or Timestamp at build time in AngularCLI

I used to be able to use a lodash method in Angular by an import statement that looked like the following:

    import {debounce as _debounce} from &#39;lodash&#39;;

I now get the following error when using that statement:

    &#39;&quot;{...}/node_modules/@types/lodash/index&quot;&#39; has no exported member &#39;debounce&#39;.

The only thing that will compile without errors is this statement:

    import * as _ from &#39;lodash&#39;; 

In my code, I change `_debounce()` to `_.debounce()`. Is that the only (and/or correct) way to do it? Is there a way to only import debounce, or does it not matter due to &quot;treeshaking&quot;? I realize I can write my own debounce function, but I&#39;m mainly interested in the &quot;right&quot; way to do this.

p.s. Other variations that I&#39;ve tried (each has some sort of error associated with it): 

    import {debounce as _debounce } from &#39;lodash/debounce&#39;;
    import * as _debounce from &#39;lodash/debounce&#39;;
    import debounce = require(&#39;lodash/debounce&#39;);

FYI...I&#39;m using the following versions:

&gt; Angular: 2.4.5
&gt;
&gt; Typescript: 2.1.5 
&gt;
&gt; Angular-cli: 1.0.0-beta.26

Correct way of importing and using lodash in Angular

**I know it&#39;s kind of a bad practice**, but bear with me:

I&#39;m using Angular-CLI, particularly `ng g` to generate all of my classes. However, I&#39;m not interested in any `*.spec.ts` test files. I know that there are two flags (`--inline-template`, ` --inline-style`) to handle inline CSS and HTML instead of separated files, and for spec the `--spec` flag is set to true by default.

So for each run, yes, I could do `ng g c foo --it --is --spec=false`.

But how do I disable the creation of test files globally? Is there any default setting for it?

Rashly, I did some stuff **(that didn&#39;t work)**, like:

    ng set spec=false --global

I also tried configuring my `src/tsconfig.json` by filling the exclude array:

    &quot;exclude&quot;: [
        &quot;**/*.spec.ts&quot;
    ]

 

Angular 9 + CLI (TypeScript) - How to stop generating .spec.ts test files

I am working with `angular2-google-maps` and latest version of Angular2. I am trying to convert some of the local map component functions into services in their own file `maps.service.ts`. For example:

map.component.ts

    getGeoLocation(lat: number, lng: number) {
    if (navigator.geolocation) {
        let geocoder = new google.maps.Geocoder();
        let latlng = new google.maps.LatLng(lat, lng);
        let request = { latLng: latlng };
        geocoder.geocode(request, (results, status) =&gt; {
          if (status == google.maps.GeocoderStatus.OK) {
            let result = results[0];
            if (result != null) {
              this.fillInputs(result.formatted_address);
            } else {
              alert(&quot;No address available!&quot;);
            }
          }
        });
    }
    }

Into something like: `maps.service.ts`

    getGeoLocation(lat: number, lng: number): Observable&lt;google.maps.GeocoderResult[]&gt; {
        let geocoder = new google.maps.Geocoder();
        let latlng = new google.maps.LatLng(lat, lng);
        let request = { latLng: latlng };
        return new Observable((observer: Observer&lt;google.maps.GeocoderResult[]&gt;) =&gt; {
            geocoder.geocode({ request }, (
                (results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) =&gt; {
                    if (status == google.maps.GeocoderStatus.OK) {
                        observer.next(results);
                        observer.complete();
                    } else {
                        console.log(&#39;Geocoding service failed due to: &#39; +status);
                        observer.error(status);
                    }
                }
            ));
        });
    }

The issue I&#39;m getting is that `google` variable is not being recognized when I try to use `Observer&lt;google.maps.GeocoderResult[]&gt;`. I have `declare var google: any;` outside of the service class as well.

The `google` variable works in my `map.componenet.ts` but doesn&#39;t get recognized in the `maps.service.ts`.

Angular2 Cannot find namespace &#39;google&#39;

I recently started implementing lazy loading in my application. I was wondering whether there is any way to create a routing.module.ts while generating a new module in angular-cli application other than creating it manually?

Content Type	Original Author	Original Content on Stackoverflow
Question	Madhu Ranjan	View Question on Stackoverflow
Solution 1 - Angular	luvaas	View Answer on Stackoverflow
Solution 2 - Angular	t.animal	View Answer on Stackoverflow
Solution 3 - Angular	Derek Daley	View Answer on Stackoverflow
Solution 4 - Angular	user17983356	View Answer on Stackoverflow

How to include assets from node_modules in angular cli project

Angular Problem Overview

Angular Solutions

Solution 1 - Angular

Solution 2 - Angular

Solution 3 - Angular

Solution 4 - Angular

Avoiding relative paths in Angular CLI

How do I read and write CSV files with Python?

Attributions