I am trying to update my Angular app from v5 to v6 following [this guide][1].

I have ran all these commands successfully:

    npm install -g @angular/cli
    npm install @angular/cli
    ng update @angular/cli
The problem is that I get an error when running this command:

    ng update @angular/core
                      Package &quot;@angular/flex-layout&quot; has an incompatible peer dependency to &quot;rxjs&quot; (requires &quot;^5.5.0&quot;, would install &quot;6.2.0&quot;).
                      Package &quot;@angular/compiler-cli&quot; has an incompatible peer dependency to &quot;typescript&quot; (requires &quot;&gt;=2.7.2 &lt;2.8&quot;, would install &quot;2.6.2&quot;)
    Incompatible peer dependencies found. See above.
I am not sure how to handle this &amp; I don&#39;t want to try things on my own to avoid breaking the app.

Can someone please advise what to do?

My current dependencies are as follows:

    {
     ....
      },
      &quot;private&quot;: true,
      &quot;dependencies&quot;: {
        &quot;@angular/animations&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/cdk&quot;: &quot;^5.2.5&quot;,
        &quot;@angular/common&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/compiler&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/core&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/flex-layout&quot;: &quot;^5.0.0-beta.14&quot;,
        &quot;@angular/forms&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/http&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/material&quot;: &quot;^5.2.5&quot;,
        &quot;@angular/platform-browser&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/platform-browser-dynamic&quot;: &quot;^5.2.10&quot;,
        &quot;@angular/router&quot;: &quot;^5.2.10&quot;,
        &quot;@ngx-translate/core&quot;: &quot;^9.1.1&quot;,
        &quot;@ngx-translate/http-loader&quot;: &quot;^3.0.1&quot;,
        &quot;core-js&quot;: &quot;^2.5.5&quot;,
        &quot;hammerjs&quot;: &quot;^2.0.8&quot;,
        &quot;primeng&quot;: &quot;^5.2.4&quot;,
        &quot;rxjs&quot;: &quot;^5.5.11&quot;,
        &quot;zone.js&quot;: &quot;^0.8.26&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;@angular-devkit/build-angular&quot;: &quot;~0.6.3&quot;,
        &quot;@angular/cli&quot;: &quot;^6.0.3&quot;,
        &quot;@angular/compiler-cli&quot;: &quot;^5.2.11&quot;,
        &quot;@angular/language-service&quot;: &quot;^5.2.10&quot;,
        &quot;@types/jasmine&quot;: &quot;~2.8.3&quot;,
        &quot;@types/jasminewd2&quot;: &quot;~2.0.2&quot;,
        &quot;@types/node&quot;: &quot;^6.0.106&quot;,
        &quot;codelyzer&quot;: &quot;^4.3.0&quot;,
        &quot;jasmine-core&quot;: &quot;~2.8.0&quot;,
        &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
        &quot;karma&quot;: &quot;^2.0.2&quot;,
        &quot;karma-chrome-launcher&quot;: &quot;~2.2.0&quot;,
        &quot;karma-coverage-istanbul-reporter&quot;: &quot;^1.2.1&quot;,
        &quot;karma-jasmine&quot;: &quot;~1.1.0&quot;,
        &quot;karma-jasmine-html-reporter&quot;: &quot;^0.2.2&quot;,
        &quot;protractor&quot;: &quot;^5.3.2&quot;,
        &quot;ts-node&quot;: &quot;~4.1.0&quot;,
        &quot;tslint&quot;: &quot;~5.9.1&quot;,
        &quot;typescript&quot;: &quot;~2.6.2&quot;
      }
    }


  [1]: https://update.angular.io/


When upgrading Angular 5 to 6, I get incompatible peer dependency (using ng update @angular/core)

I am using angular6, in my project I am using Facebook Account Toolkit for mobile verification purpose.

I need to initialise Account toolkit in index.html file using following code.


      AccountKit.init({
       appId:&quot;XX&quot;,
       state:&quot;xx&quot;,
       version:&quot;v1.2&quot;,
       fbAppEventsEnabled:true,
       debug:true
     });

The problem is, values for **appId** and **state** change depending on environment (development/test/production).

How can I use environment variables in `index.html` file.

Please let me know if anyone has a solution for angular 6.

Thanks in advance.

How to use environment variable in index.html for Angular 6

How do I specify the environment to use in Angular 6+? The `.angular-cli.json` file seems to have changed to `angular.json` from previous versions and with it the structure of the `json` within.

How/where in this file do I specify the environments to use?

How to add/set environment Angular 6 angular.json file

I have finished to update my App to Angular 6 (it was in 5.2 version).

I got an error syntax in :

    import { Router, ActivatedRoute, NavigationEnd } from &#39;@angular/router&#39;;
    import { filter } from &#39;rxjs/operators&#39;;
    ...
    constructor(private router: Router) {}

    this.router.events.filter
          (event =&gt; event instanceof NavigationEnd).subscribe((res) =&gt; 
        {
          // DO something
        });

&gt; error TS2339: Property &#39;filter&#39; does not exist on type
&gt; &#39;Observable&lt;Event&gt;&#39;.

what&#39;s the right syntax in Angular 6 ?

thanks

Angular 6 router.events.filter &#39;filter&#39; does not exist on type &#39;Observable&lt;Event&gt;&#39;

I&#39;m trying to  provide a resolve service via the new `providedIn` attribute.

This is a translations resolver which I use in a protected module:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import { Injectable } from &#39;@angular/core&#39;;

    import { Observable , pipe } from &#39;rxjs&#39;;
    import {map} from &quot;rxjs/operators&quot;;

    //This is causing: &quot;WARNING in Circular dependency detected:&quot;
    import {ProtectedModule} from &quot;../../../protected/protected.module&quot;;

    import { HttpHandlerService } from &#39;../../http/http-handler.service&#39;;

    @Injectable({
      providedIn: ProtectedModule //Over here (I need the import for this line)
    })
    export class TranslationsResolverService {
      constructor(private _httpHandlerService : HttpHandlerService) { }
        resolve(): any {
          //Do Something...
        }
    }

&lt;!-- end snippet --&gt;

I declared the translations resolver service in the protected routing module:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import { NgModule }           from &#39;@angular/core&#39;;
    import {RouterModule, Routes} from &#39;@angular/router&#39;;

    import {AuthGuard} from &quot;../core/resolvers/auth/auth.guard&quot;;
    import {TranslationsResolverService} from &quot;./../core/resolvers/translations/translations-resolver.service&quot;;

    const routes: Routes = [
      {
        path : &#39;app&#39; ,
        component: ProtectedComponent,
        resolve : {
          translations : TranslationsResolverService // &lt;---- Over here - i can&#39;t remove that of course
        },
        canActivate: [AuthGuard],
        ]
      }
    ];


    @NgModule({
      imports : [RouterModule.forChild(routes)],
      exports : [RouterModule]
    })
    export class ProtectedRoutingModule { }

&lt;!-- end snippet --&gt;


Because of the fact that I import (typescript import) the `protected.module` in the `translations-resolver.service.ts` **in order to use it in the `providedIn` attribute** I get a WARNING in Circular dependency detected:

    path/to/translations-resolver.service.ts -&gt; 
    
    protected/protected.module.ts -&gt;
    
    protected/protected-routing.module.ts -&gt; 
    
    path to translations-resolver.service.ts

The 2nd path (protected/protected.module.ts) is added due to the `providedIn` attribute.

I can fix this by just providing the `translationsResolver` as a `NgModule provider` (in the providers array) but I prefer it to be an `injectable` provider.

Any suggestions for solving this?

Angular 6+ :ProvidedIn a non root module is causing a circular dependency

I am trying to update my Angular 5.2 app to Angular 6. I successfully followed instructions in the Angular update guide (including the update of `angular-cli` to v6), and now I am trying to serve the app via

    ng serve --env=local

But this gives me error:

&gt; Unknown option: &#39;--env&#39;

I use multiple environments (`dev/local/prod`), and this is the way it was working in Angular 5.2. How can I set the environment now in Angular 6?

How to set environment via `ng serve` in Angular 6

When generating services in the Angular CLI, it is adding extra metadata with a &#39;provided in&#39; property with a default of &#39;root&#39; for the Injectable decorator.

    @Injectable({
      providedIn: &#39;root&#39;,
    })

What exactly does providedIn do?  I am assuming this is making the service available like a &#39;global&#39; type singleton service for the whole application, however, wouldn&#39;t be cleaner to declare such services in the provider array of the AppModule?

What is the purpose of providedIn with the Injectable decorator when generating Services in Angular 6?

I am getting this error while running my application. Here are the details of my application. 

    Angular CLI: 7.3.3 
    Node: 10.15.1 
    Angular: 7.2.7 
    @angular-devkit/architect -0.13.3 
    @angular-devkit/build-angular- 0.800.1 
    @angular-devkit/build-optimizer - 0.800.1 
    @angular-devkit/build-webpack - 0.800.1 
    @angular-devkit/core -7.3.3 
    @angular-devkit/schematics -7.3.3 
    @angular/cli -7.3.3 
    @ngtools/webpack -8.0.1 
    @schematics/angular -7.3.3 
    @schematics/update 0.13.3 
    rxjs 6.3.3 
    typescript 3.2.4 
    webpack 4.30.0


I have already tried cache clean.

Errors: Data path &quot;.builders[&#39;app-shell&#39;]&quot; should have required property &#39;class&#39;

After updating to Angular 6.0.1, I get the following error on `ng serve`:

    Could not find module &quot;@angular-devkit/build-angular&quot; from &quot;/home/Projects/myProjectName&quot;.
    Error: Could not find module &quot;@angular-devkit/build-angular&quot; from &quot;/home/Projects/myProjectName&quot;.
        at Object.resolve (/home/Projects/myProjectName/node_modules/@angular-devkit/core/node/resolve.js:141:11)
        at Observable.rxjs_1.Observable [as _subscribe] (/home/Projects/myProjectName/node_modules/@angular-devkit/architect/src/architect.js:132:40)

`ng update` says everything is in order. Deleting `node_modules` folder and a fresh `npm install` install did not help either. 

My project is based on [ng2-admin(Angular4 version)](https://github.com/akveo/ngx-admin). Here is my package.json dependecies:

     &quot;dependencies&quot;: {
        &quot;@angular/animations&quot;: &quot;^6.0.1&quot;,
        &quot;@angular/common&quot;: &quot;^6.0.1&quot;,
        &quot;@angular/compiler&quot;: &quot;^6.0.1&quot;,
        &quot;@angular/core&quot;: &quot;^6.0.1&quot;,
        &quot;@angular/forms&quot;: &quot;^6.0.1&quot;,
        &quot;@angular/http&quot;: &quot;^6.0.1&quot;,
        &quot;@angular/platform-browser&quot;: &quot;^6.0.1&quot;,
        &quot;@angular/platform-browser-dynamic&quot;: &quot;^6.0.1&quot;,
        &quot;@angular/platform-server&quot;: &quot;^6.0.1&quot;,
        &quot;@angular/router&quot;: &quot;^6.0.1&quot;,
        &quot;@ng-bootstrap/ng-bootstrap&quot;: &quot;1.0.0-alpha.26&quot;,
        &quot;@ngx-translate/core&quot;: &quot;^10.0.1&quot;,
        &quot;@ngx-translate/http-loader&quot;: &quot;^3.0.1&quot;,
        &quot;amcharts3&quot;: &quot;github:amcharts/amcharts3&quot;,
        &quot;ammap3&quot;: &quot;github:amcharts/ammap3&quot;,
        &quot;angular-table&quot;: &quot;^1.0.4&quot;,
        &quot;angular2-csv&quot;: &quot;^0.2.5&quot;,
        &quot;angular2-datatable&quot;: &quot;0.6.0&quot;,
        &quot;animate.css&quot;: &quot;3.5.2&quot;,
        &quot;bootstrap&quot;: &quot;4.0.0-alpha.6&quot;,
        &quot;bower&quot;: &quot;^1.8.4&quot;,
        &quot;chart.js&quot;: &quot;1.1.1&quot;,
        &quot;chartist&quot;: &quot;0.10.1&quot;,
        &quot;chroma-js&quot;: &quot;1.3.3&quot;,
        &quot;ckeditor&quot;: &quot;4.6.2&quot;,
        &quot;core-js&quot;: &quot;2.4.1&quot;,
        &quot;easy-pie-chart&quot;: &quot;2.1.7&quot;,
        &quot;font-awesome&quot;: &quot;4.7.0&quot;,
        &quot;fullcalendar&quot;: &quot;3.3.1&quot;,
        &quot;google-maps&quot;: &quot;3.2.1&quot;,
        &quot;ionicons&quot;: &quot;2.0.1&quot;,
        &quot;jquery&quot;: &quot;3.2.1&quot;,
        &quot;jquery-slimscroll&quot;: &quot;1.3.8&quot;,
        &quot;leaflet&quot;: &quot;0.7.7&quot;,
        &quot;leaflet-map&quot;: &quot;0.2.1&quot;,
        &quot;lodash&quot;: &quot;4.17.4&quot;,
        &quot;ng2-ckeditor&quot;: &quot;1.1.6&quot;,
        &quot;ng2-completer&quot;: &quot;^1.6.3&quot;,
        &quot;ng2-handsontable&quot;: &quot;^2.1.0-rc.3&quot;,
        &quot;ng2-slim-loading-bar&quot;: &quot;^4.0.0&quot;,
        &quot;ng2-smart-table&quot;: &quot;^1.0.3&quot;,
        &quot;ng2-tree&quot;: &quot;2.0.0-alpha.5&quot;,
        &quot;ngx-uploader&quot;: &quot;4.2.4&quot;,
        &quot;normalize.css&quot;: &quot;6.0.0&quot;,
        &quot;roboto-fontface&quot;: &quot;0.7.0&quot;,
        &quot;rxjs&quot;: &quot;^6.1.0&quot;,
        &quot;rxjs-compat&quot;: &quot;^6.1.0&quot;,
        &quot;zone.js&quot;: &quot;0.8.26&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;@angular/cli&quot;: &quot;^6.0.1&quot;,
        &quot;@angular/compiler-cli&quot;: &quot;^6.0.1&quot;,
        &quot;@types/fullcalendar&quot;: &quot;2.7.40&quot;,
        &quot;@types/jasmine&quot;: &quot;2.5.38&quot;,
        &quot;@types/jquery&quot;: &quot;2.0.41&quot;,
        &quot;@types/jquery.slimscroll&quot;: &quot;1.3.30&quot;,
        &quot;@types/lodash&quot;: &quot;4.14.61&quot;,
        &quot;@types/node&quot;: &quot;6.0.69&quot;,
        &quot;codelyzer&quot;: &quot;3.0.1&quot;,
        &quot;gh-pages&quot;: &quot;0.12.0&quot;,
        &quot;jasmine-core&quot;: &quot;2.5.2&quot;,
        &quot;jasmine-spec-reporter&quot;: &quot;3.2.0&quot;,
        &quot;karma&quot;: &quot;1.4.1&quot;,
        &quot;karma-chrome-launcher&quot;: &quot;2.0.0&quot;,
        &quot;karma-cli&quot;: &quot;1.0.1&quot;,
        &quot;karma-coverage-istanbul-reporter&quot;: &quot;0.2.0&quot;,
        &quot;karma-jasmine&quot;: &quot;1.1.0&quot;,
        &quot;karma-jasmine-html-reporter&quot;: &quot;0.2.2&quot;,
        &quot;npm-run-all&quot;: &quot;4.0.2&quot;,
        &quot;protractor&quot;: &quot;5.1.0&quot;,
        &quot;rimraf&quot;: &quot;2.6.1&quot;,
        &quot;standard-changelog&quot;: &quot;1.0.1&quot;,
        &quot;stylelint&quot;: &quot;7.10.1&quot;,
        &quot;ts-node&quot;: &quot;2.1.2&quot;,
        &quot;tslint&quot;: &quot;5.2.0&quot;,
        &quot;tslint-eslint-rules&quot;: &quot;4.0.0&quot;,
        &quot;tslint-language-service&quot;: &quot;0.9.6&quot;,
        &quot;typescript&quot;: &quot;^2.7.2&quot;,
        &quot;typogr&quot;: &quot;0.6.6&quot;,
        &quot;underscore&quot;: &quot;1.8.3&quot;,
        &quot;wintersmith&quot;: &quot;2.2.5&quot;,
        &quot;wintersmith-sassy&quot;: &quot;1.1.0&quot;
      }

and my angular.json:

    {
      &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
      &quot;version&quot;: 1,
      &quot;newProjectRoot&quot;: &quot;projects&quot;,
      &quot;projects&quot;: {
        &quot;ng2-admin&quot;: {
          &quot;root&quot;: &quot;&quot;,
          &quot;sourceRoot&quot;: &quot;src&quot;,
          &quot;projectType&quot;: &quot;application&quot;,
          &quot;architect&quot;: {
            &quot;build&quot;: {
              &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
              &quot;options&quot;: {
                &quot;outputPath&quot;: &quot;dist&quot;,
                &quot;index&quot;: &quot;src/index.html&quot;,
                &quot;main&quot;: &quot;src/main.ts&quot;,
                &quot;tsConfig&quot;: &quot;src/tsconfig.app.json&quot;,
                &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
                &quot;assets&quot;: [
                  &quot;src/assets&quot;,
                  &quot;src/favicon.ico&quot;
                ],
                &quot;styles&quot;: [
                  &quot;node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss&quot;,
                  &quot;node_modules/normalize.css/normalize.css&quot;,
                  &quot;node_modules/font-awesome/scss/font-awesome.scss&quot;,
                  &quot;node_modules/ionicons/scss/ionicons.scss&quot;,
                  &quot;node_modules/bootstrap/scss/bootstrap.scss&quot;,
                  &quot;node_modules/leaflet/dist/leaflet.css&quot;,
                  &quot;node_modules/chartist/dist/chartist.css&quot;,
                  &quot;node_modules/fullcalendar/dist/fullcalendar.css&quot;,
                  &quot;node_modules/handsontable/dist/handsontable.full.css&quot;,
                  &quot;node_modules/ng2-slim-loading-bar/style.css&quot;,
                  &quot;src/app/theme/theme.scss&quot;,
                  &quot;src/styles.scss&quot;
                ],
                &quot;scripts&quot;: [
                  &quot;node_modules/jquery/dist/jquery.js&quot;,
                  &quot;node_modules/easy-pie-chart/dist/jquery.easypiechart.js&quot;,
                  &quot;node_modules/jquery-slimscroll/jquery.slimscroll.js&quot;,
                  &quot;node_modules/tether/dist/js/tether.js&quot;,
                  &quot;node_modules/bootstrap/dist/js/bootstrap.js&quot;,
                  &quot;node_modules/handsontable/dist/handsontable.full.js&quot;,
                  &quot;node_modules/chroma-js/chroma.js&quot;
                ]
              },
              &quot;configurations&quot;: {
                &quot;production&quot;: {
                  &quot;optimization&quot;: true,
                  &quot;outputHashing&quot;: &quot;all&quot;,
                  &quot;sourceMap&quot;: false,
                  &quot;extractCss&quot;: true,
                  &quot;namedChunks&quot;: false,
                  &quot;aot&quot;: true,
                  &quot;extractLicenses&quot;: true,
                  &quot;vendorChunk&quot;: false,
                  &quot;buildOptimizer&quot;: true,
                  &quot;fileReplacements&quot;: [
                    {
                      &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                      &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                    }
                  ]
                }
              }
            },
            &quot;serve&quot;: {
              &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
              &quot;options&quot;: {
                &quot;browserTarget&quot;: &quot;ng2-admin:build&quot;
              },
              &quot;configurations&quot;: {
                &quot;production&quot;: {
                  &quot;browserTarget&quot;: &quot;ng2-admin:build:production&quot;
                }
              }
            },
            &quot;extract-i18n&quot;: {
              &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
              &quot;options&quot;: {
                &quot;browserTarget&quot;: &quot;ng2-admin:build&quot;
              }
            },
            &quot;test&quot;: {
              &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
              &quot;options&quot;: {
                &quot;main&quot;: &quot;src/test.ts&quot;,
                &quot;karmaConfig&quot;: &quot;./karma.conf.js&quot;,
                &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
                &quot;tsConfig&quot;: &quot;src/tsconfig.spec.json&quot;,
                &quot;scripts&quot;: [
                  &quot;node_modules/jquery/dist/jquery.js&quot;,
                  &quot;node_modules/easy-pie-chart/dist/jquery.easypiechart.js&quot;,
                  &quot;node_modules/jquery-slimscroll/jquery.slimscroll.js&quot;,
                  &quot;node_modules/tether/dist/js/tether.js&quot;,
                  &quot;node_modules/bootstrap/dist/js/bootstrap.js&quot;,
                  &quot;node_modules/handsontable/dist/handsontable.full.js&quot;,
                  &quot;node_modules/chroma-js/chroma.js&quot;
                ],
                &quot;styles&quot;: [
                  &quot;node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss&quot;,
                  &quot;node_modules/normalize.css/normalize.css&quot;,
                  &quot;node_modules/font-awesome/scss/font-awesome.scss&quot;,
                  &quot;node_modules/ionicons/scss/ionicons.scss&quot;,
                  &quot;node_modules/bootstrap/scss/bootstrap.scss&quot;,
                  &quot;node_modules/leaflet/dist/leaflet.css&quot;,
                  &quot;node_modules/chartist/dist/chartist.css&quot;,
                  &quot;node_modules/fullcalendar/dist/fullcalendar.css&quot;,
                  &quot;node_modules/handsontable/dist/handsontable.full.css&quot;,
                  &quot;node_modules/ng2-slim-loading-bar/style.css&quot;,
                  &quot;src/app/theme/theme.scss&quot;,
                  &quot;src/styles.scss&quot;
                ],
                &quot;assets&quot;: [
                  &quot;src/assets&quot;,
                  &quot;src/favicon.ico&quot;
                ]
              }
            },
            &quot;lint&quot;: {
              &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
              &quot;options&quot;: {
                &quot;tsConfig&quot;: [
                  &quot;src/tsconfig.app.json&quot;,
                  &quot;src/tsconfig.spec.json&quot;
                ],
                &quot;exclude&quot;: []
              }
            }
          }
        },
        &quot;ng2-admin-e2e&quot;: {
          &quot;root&quot;: &quot;&quot;,
          &quot;sourceRoot&quot;: &quot;&quot;,
          &quot;projectType&quot;: &quot;application&quot;,
          &quot;architect&quot;: {
            &quot;e2e&quot;: {
              &quot;builder&quot;: &quot;@angular-devkit/build-angular:protractor&quot;,
              &quot;options&quot;: {
                &quot;protractorConfig&quot;: &quot;./protractor.conf.js&quot;,
                &quot;devServerTarget&quot;: &quot;ng2-admin:serve&quot;
              }
            },
            &quot;lint&quot;: {
              &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
              &quot;options&quot;: {
                &quot;tsConfig&quot;: [
                  &quot;e2e/tsconfig.e2e.json&quot;
                ],
                &quot;exclude&quot;: []
              }
            }
          }
        }
      },
      &quot;defaultProject&quot;: &quot;ng2-admin&quot;,
      &quot;schematics&quot;: {
        &quot;@schematics/angular:component&quot;: {
          &quot;prefix&quot;: &quot;app&quot;,
          &quot;styleext&quot;: &quot;scss&quot;
        },
        &quot;@schematics/angular:directive&quot;: {
          &quot;prefix&quot;: &quot;app&quot;
        }
      }
    }



Could not find module &quot;@angular-devkit/build-angular&quot;

In Angular Material Design 6, the (change) method was removed. 
How should I replace the change method to execute code in the component when the user changes selection?

Angular 6 Material mat-select change method removed

I&#39;ve read the [documentation](https://github.com/angular/angular-cli), which says that if I want to use `scss` I have to run the following command:

    ng set defaults.styleExt scss

But when I do that and make that file, I still receive this error in my console:

&gt;     styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
&gt;     no such file or directory, open
&gt;     &#39;/Users/Egen/Code/angular/src/styles.css&#39;(…)

Angular-cli from css to scss

[![code][1]][1]


[![error info][2]][2]


**Typescript code:**

    import { Injectable } from &#39;@angular/core&#39;;
    import { Observable } from &#39;rxjs/Observable&#39;;
    import { of } from &#39;rxjs/observable/of&#39;;
    import { Hero } from &#39;./hero&#39;;
    import { HEROES } from &#39;./mock-heroes&#39;;
    
    @Injectable({
      providedIn: &#39;root&#39;
    })
    export class HeroService {
    
      constructor() { }
    
      getHeroes(): Observable&lt;Hero[]&gt; {
        return of(HEROES);
      }
    
    }

**error info:**

&gt; error TS2307: Cannot find module &#39;rxjs-compat/Observable&#39;.
&gt; node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find
&gt; module &#39;rxjs-compat/observable/of&#39;. src/app/hero.service.ts(2,10):
&gt; error TS2305: Module
&gt; &#39;&quot;F:/angular-tour-of-heroes/node_modules/rxjs/Observable&quot;&#39; has no
&gt; exported member &#39;Observable&#39;. src/app/hero.service.ts(15,12): error
&gt; TS2304: Cannot find name &#39;of&#39;.

**`package.json` file with Angular version:**

[![version][3]][3]


  [1]: https://i.stack.imgur.com/BAqe4.png
  [2]: https://i.stack.imgur.com/XLYOx.png
  [3]: https://i.stack.imgur.com/58sa4.png

Angular - &quot;has no exported member &#39;Observable&#39;&quot;

I am trying to build a custom component using multiple `ng-content` in Angular 6, but this is not working and I have no idea why.

This is my component code:
```html
&lt;div class=&quot;header-css-class&quot;&gt;
    &lt;ng-content select=&quot;#header&quot;&gt;&lt;/ng-content&gt;
&lt;/div&gt;
&lt;div class=&quot;body-css-class&quot;&gt;
    &lt;ng-content select=&quot;#body&quot;&gt;&lt;/ng-content&gt;
&lt;/div&gt;
```
I am trying to use this component in another place and render two different HTML code inside `body` and header `select` of `ng-content`, something like this:
```html   
&lt;div #header&gt;This should be rendered in header selection of ng-content&lt;/div&gt;
&lt;div #body&gt;This should be rendered in body selection of ng-content&lt;/div&gt;
```
But the component is rendering blank.

Do you guys know what I could be doing wrong or what is the best way to render two different sections in same component?

Thanks!

Multiple ng-content

I am recently learning Angular 6 with @ngrx/store while one of the tutorial is to use @ngrx/store for state management, **however I don&#39;t understand the benefit of using @ngrx/store behind the scene.** 

For example, for a simple login and signup action, **previously by using the service(Let&#39;s call it AuthService)** we might use it to call the backend api, store &quot;userInfo&quot; or &quot;token&quot; in the AuthService, redirect user to &quot;HOME&quot; page and we can inject AuthService in any component where we need to get the userInfo by using DI, **which simply that one file AuthService handles everything**.

Now if we are using @ngrx/store, we need to define the **Action/State/Reducer/Effects/Selector** which probably need to write in 4 or 5 files to handle above action or event, then sometimes still we need to call backend api using service, **which seems much much more complicated and redundant...**

In some other scenario, *I even see some page uses @ngrx/store to store the object or list of object like grid data.*, **is that for some kind of in-memory store usage?**

So back to the question, **why are we using @ngrx/store over service registration store here in Angular project?**  I know it&#39;s for &quot;**STATE MANAGEMENT**&quot; usage, **but what exactly is the &quot;STATE MANAGEMENT&quot;? Is that something like transaction log and When do we need it? Why would we manage it on the front end?** Please feel free to share your suggestion or experience in the @ngrx/store area! 



Angular 6 - Why use @ngrx/store rather than service injection

Since I&#39;ve created `@Directive` as `SelectableDirective`, I&#39;m little bit confused, about how to pass **more than one** value to the custom directive. I have searched a lot but didn&#39;t get proper solution in *Angular* with *Typescript*.

Here is what my sample code is: 

Parent Component as `MCQComponent`:

    import { Component, OnInit } from &#39;@angular/core&#39;;
    import { Question } from &#39;../question/question&#39;;
    import { AppService } from &#39;../app.service/app.service&#39;;
    import { SelectableDirective } from &#39;../selectable.directive/selectable.directive&#39;;
    import { ResultComponent } from &#39;../result-component/result.component&#39;;
    
    @Component({
    	selector: &#39;mcq-component&#39;,
    	template: &quot;
    	     .....
    		&lt;div *ngIf = &#39;isQuestionView&#39;&gt;
    			&lt;ul&gt;
    				&lt;li *ngFor = &#39;let opt of currentQuestion.options&#39; 
    					[selectable] = &#39;opt&#39;
    					(selectedOption) = &#39;onOptionSelection($event)&#39;&gt;
    					{{opt.option}}
    				&lt;/li&gt;
    			&lt;/ul&gt;
    			.....
    		&lt;/div&gt;
    
    	&quot;
    	providers: [AppService],
    	directives: [SelectableDirective, ResultComponent]
    })
    export class MCQComponent implements OnInit{
    	private currentIndex:any = 0;
    	private currentQuestion:Question = new Question();
    	private questionList:Array&lt;Question&gt; = [];
        ....
    	constructor(private appService: AppService){}
    	....
    }

This is a parent component having custom directive **[selectable]** which takes one param called **opt**. 

Here is the code for this directive: 

    import { Directive, HostListener, ElementRef, Input, Output, EventEmitter } from &#39;@angular/core&#39;
    import { Question } from &#39;../question/question&#39;;
    
    @Directive({
    	selector: &#39;[selectable]&#39;
    })
    export class SelectableDirective{
    	private el: HTMLElement;
    	@Input(&#39;selectable&#39;) option:any;
    	
    	...
    }

So here I want to pass **more parameters from parent** component, how do I achieve this?


How to pass multiple parameter to @Directives (@Components) in Angular with TypeScript?

I&#39;m trying to implement the `Table with expandable rows` from https://material.angular.io/components/table/examples but I get this error:

`There can only be one default row without a when predicate function.`

This error comes from the fact that I have two ` &lt;tr mat-row ...`, both without a when predicate (as per example). If I remove one, then the error disappears.

From my own investigation I&#39;ve found that this feature is new to Material. I upgraded to @angular/material@latest and @angular/cdk@latest and I still got the error.

**Does anyone know what I have to do to implement the table as in the example from documentation? https://material.angular.io/components/table/examples**

My versions:

    Angular CLI: 6.0.8
    Node: 8.11.2
    OS: win32 x64
    Angular: 6.0.4
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router
    
    Package                           Version
    -----------------------------------------------------------
    @angular-devkit/architect         0.6.8
    @angular-devkit/build-angular     0.6.8
    @angular-devkit/build-optimizer   0.6.8
    @angular-devkit/core              0.6.8
    @angular-devkit/schematics        0.6.8
    @angular/cdk                      6.3.1
    @angular/cli                      6.0.8
    @angular/flex-layout              6.0.0-beta.16
    @angular/material                 6.3.1
    @ngtools/webpack                  6.0.8
    @schematics/angular               0.6.8
    @schematics/update                0.6.8
    rxjs                              6.2.0
    typescript                        2.7.2
    webpack                           4.8.3



Angular6 Material6 Error: &quot;There can only be one default row without a when predicate function.&quot;

After migrating application from angular 5 to 6, on running ng serve the following errors pop up.

&gt; Schema validation failed with the following errors:
  Data path &quot;&quot; should NOT have additional properties(project).
Error: Schema validation failed with the following errors:
  Data path &quot;&quot; should NOT have additional properties(project).
    at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (.../TemplateApp/me-cmf-web-template-angular/node_modules/@angular-devkit/core/src/workspace/workspace.js:210:42)
    at MergeMapSubscriber._tryNext (/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:65:27)
    at MergeMapSubscriber._next (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:55:18)
    at MergeMapSubscriber.Subscriber.next (/home/training/Attinad_Projects/TemplateApp/me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:64:18)
    at MergeMapSubscriber.notifyNext (.../TemplateApp/me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/mergeMap.js:84:26)
    at InnerSubscriber._next (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/InnerSubscriber.js:25:21)
    at InnerSubscriber.Subscriber.next (/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:64:18)
    at MapSubscriber._next (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/map.js:52:26)
    at MapSubscriber.Subscriber.next (/.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:64:18)
    at SwitchMapSubscriber.notifyNext (.../me-cmf-web-template-angular/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/switchMap.js:77:26)

 

I assume that the error is with .angular.json file which I re-named from .angular-cli.json . 

My .angular.json file is as follows : 



    {
        &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
        &quot;project&quot;: {
            &quot;name&quot;: &quot;mediaweb&quot;
        },
        &quot;apps&quot;: [{
                &quot;root&quot;: &quot;src&quot;,
                &quot;outDir&quot;: &quot;dist/browser&quot;,
                &quot;assets&quot;: [
                    &quot;assets&quot;,
                    &quot;favicon.ico&quot;
                ],
                &quot;index&quot;: &quot;index.html&quot;,
                &quot;main&quot;: &quot;main.ts&quot;,
                &quot;polyfills&quot;: &quot;polyfills.ts&quot;,
                &quot;test&quot;: &quot;test.ts&quot;,
                &quot;tsconfig&quot;: &quot;tsconfig.app.json&quot;,
                &quot;testTsconfig&quot;: &quot;tsconfig.spec.json&quot;,
                &quot;prefix&quot;: &quot;app&quot;,
                &quot;styles&quot;: [
                    &quot;styles.scss&quot;,
                    &quot;../node_modules/owl.carousel/dist/assets/owl.carousel.css&quot;,
                    &quot;../node_modules/owl.carousel/dist/assets/owl.theme.default.css&quot;,
                    &quot;../node_modules/video.js/dist/video-js.css&quot;
                ],
                &quot;scripts&quot;: [
                    &quot;../node_modules/jquery/dist/jquery.js&quot;,
                    &quot;../node_modules/owl.carousel/dist/owl.carousel.js&quot;,
                    &quot;../node_modules/video.js/dist/ie8/videojs-ie8.js&quot;,
                    &quot;../node_modules/video.js/dist/video.js&quot;
                ],
                &quot;environmentSource&quot;: &quot;environments/environment.ts&quot;,
                &quot;environments&quot;: {
                    &quot;dev&quot;: &quot;environments/environment.dev.ts&quot;,
                    &quot;prod&quot;: &quot;environments/environment.prod.ts&quot;
                }
            },
            {
                &quot;platform&quot;: &quot;server&quot;,
                &quot;root&quot;: &quot;src&quot;,
                &quot;outDir&quot;: &quot;dist/server&quot;,
                &quot;assets&quot;: [
                    &quot;assets&quot;,
                    &quot;favicon.ico&quot;
                ],
                &quot;index&quot;: &quot;index.html&quot;,
                &quot;main&quot;: &quot;main.server.ts&quot;,
                &quot;test&quot;: &quot;test.ts&quot;,
                &quot;tsconfig&quot;: &quot;tsconfig.server.json&quot;,
                &quot;testTsconfig&quot;: &quot;tsconfig.spec.json&quot;,
                &quot;prefix&quot;: &quot;app&quot;,
                &quot;styles&quot;: [
                    &quot;styles.scss&quot;
                ],
                &quot;scripts&quot;: [],
                &quot;environmentSource&quot;: &quot;environments/environment.ts&quot;,
                &quot;environments&quot;: {
                    &quot;dev&quot;: &quot;environments/environment.dev.ts&quot;,
                    &quot;prod&quot;: &quot;environments/environment.prod.ts&quot;
                }
            }
        ],
        &quot;e2e&quot;: {
            &quot;protractor&quot;: {
                &quot;config&quot;: &quot;./protractor.conf.js&quot;
            }
        },
        &quot;lint&quot;: [{
                &quot;project&quot;: &quot;src/tsconfig.app.json&quot;,
                &quot;exclude&quot;: [&quot;**/node_modules/**&quot;, &quot;**/UI/**&quot;]
            },
            {
                &quot;project&quot;: &quot;src/tsconfig.spec.json&quot;,
                &quot;exclude&quot;: &quot;**/node_modules/**&quot;
            },
            {
                &quot;project&quot;: &quot;e2e/tsconfig.e2e.json&quot;,
                &quot;exclude&quot;: &quot;**/node_modules/**&quot;
            }
        ],
        &quot;test&quot;: {
            &quot;karma&quot;: {
                &quot;config&quot;: &quot;./karma.conf.js&quot;
            }
        },
        &quot;defaults&quot;: {
            &quot;styleExt&quot;: &quot;scss&quot;,
            &quot;component&quot;: {}
        }
    }

Should I re-structure the json file, if so how?.

Any help would be great.




Error: Schema validation failed with the following errors: Data path &quot;&quot; should NOT have additional properties(project)

Why is the view not being updated when a variable changes within a subscribe?

I have this code:

**example.component.ts**

    testVariable: string;

    ngOnInit() {
        this.testVariable = &#39;foo&#39;;

        this.someService.someObservable.subscribe(
            () =&gt; console.log(&#39;success&#39;),
            (error) =&gt; console.log(&#39;error&#39;, error),
            () =&gt; {
                this.testVariable += &#39;-bar&#39;;

                console.log(&#39;completed&#39;, this.testVariable);
                // prints: foo-Hello-bar
            }
        );

        this.testVariable += &#39;-Hello&#39;;
    }


**example.component.html**

    {{testVariable}}


But the view displays: *foo-Hello*.

Why won&#39;t it display: *foo-Hello-bar*?

If I call `ChangeDetectorRef.detectChanges()` within the subscribe it will display the proper value, but why do I have to do this?

I shouldn&#39;t be calling this method from every subscribe, or, at all (angular should handle this). Is there a right way?

Did I miss something in the update from Angular/rxjs 5 to 6?


Right now I have Angular version 6.0.2 and rxjs 6.0.0. The same code works ok in Angular 5.2 and rxjs 5.5.10 without the need of calling `detectChanges`.

Angular 6 View is not updated after changing a variable within subscribe

Has anyone faced below warning in &quot;ng serve&quot;?

&gt; WARNING in ./node_modules/@angular/compiler/src/util.js
10:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
ℹ ｢wdm｣: Compiled with warnings.

Angular versioning:

&gt; Angular CLI: 6.0.8
Node: 8.11.3
OS: darwin x64
Angular: 6.0.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, upgrade

I tried updating CLI and Angular but no success. Code inside util.js looks like:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    function (factory) {
        if (typeof module === &quot;object&quot; &amp;&amp; typeof module.exports === &quot;object&quot;) {
            var v = factory(require, exports);
            if (v !== undefined) module.exports = v;
        }
        else if (typeof define === &quot;function&quot; &amp;&amp; define.amd) {
            define(&quot;@angular/compiler/src/util&quot;, [&quot;require&quot;, &quot;exports&quot;], factory);
        }
    }

&lt;!-- end snippet --&gt;



Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

I&#39;m attempting to start an .NET Core 2/Angular 6 SPA. I created an Angular 5 Application using &quot;dotnet new angular&quot; then proceeded to upgrade using [this guide][1] from angular.io. Once I finished the upgrade I tried to run the application using &quot;dotnet run&quot; and I get an ugly error page with the error: 

&gt; **An unhandled exception occurred while processing the request.**
&gt;
&gt; AggregateException: One or more errors occurred. (One or more errors
&gt; occurred. (The NPM script &#39;start&#39; exited without indicating that the
&gt; Angular CLI was listening for requests. The error output was: Unknown
&gt; option: &#39;--extractCss&#39;
&gt;
&gt; InvalidOperationException: The NPM script &#39;start&#39; exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown  option: &#39;--extractCss&#39;

Thinking perhaps I missed a step during the upgrade, I tried a second time and got the same error.

Here are the steps I took after creating the app:

    npm install -g @angular/cli
    npm install @angular/cli
    ng update @angular/cli
    ng update @angular/core
    npm install --save @angular/material @angular/cdk @angular/animations hammerjs 
    npm install -g rxjs-tslint
    rxjs-5-to-6-migrate -p src/tsconfig.app.json

I&#39;m running Node version 9.4.0 and .Net Core 2.1.200 on Windows 10 (1703) Enterprise.

Any ideas on how to fix this? Here is a full stack trace:

     ---&gt; System.IO.EndOfStreamException: Attempted to read past the end of the stream.
       at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
       at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
       at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.&lt;StartAngularCliServerAsync&gt;d__3.MoveNext()
       --- End of inner exception stack trace ---
       at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.&lt;StartAngularCliServerAsync&gt;d__3.MoveNext()
       --- End of inner exception stack trace ---
       at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
       at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.&lt;&gt;c.&lt;Attach&gt;b__2_0(Task`1 task)
       at System.Threading.Tasks.ContinuationResultTaskFromResultTask`2.InnerInvoke()
       at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
       at System.Threading.Tasks.Task.ExecuteWithThreadLocal(Task&amp; currentTaskSlot)
       --- End of inner exception stack trace ---
       at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
       at Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.&lt;WithTimeout&gt;d__1`1.MoveNext()
    --- End of stack trace from previous location where exception was thrown ---
       at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
       at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
       at Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.&lt;PerformProxyRequest&gt;d__4.MoveNext()
    --- End of stack trace from previous location where exception was thrown ---
       at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
       at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
       at Microsoft.AspNetCore.Builder.SpaProxyingExtensions.&lt;&gt;c__DisplayClass2_0.&lt;&lt;UseProxyToSpaDevelopmentServer&gt;b__0&gt;d.MoveNext()
    --- End of stack trace from previous location where exception was thrown ---
       at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
       at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
       at Microsoft.AspNetCore.Builder.RouterMiddleware.&lt;Invoke&gt;d__4.MoveNext()
    --- End of stack trace from previous location where exception was thrown ---
       at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
       at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
       at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.&lt;Invoke&gt;d__7.MoveNext()
    ---&gt; (Inner Exception #0) System.AggregateException: One or more errors occurred. (The NPM script &#39;start&#39; exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: &#39;--extractCss&#39;
    
    ) ---&gt; System.InvalidOperationException: The NPM script &#39;start&#39; exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: &#39;--extractCss&#39;
    
     ---&gt; System.IO.EndOfStreamException: Attempted to read past the end of the stream.
       at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
       at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
       at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.&lt;StartAngularCliServerAsync&gt;d__3.MoveNext()
       --- End of inner exception stack trace ---
       at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.&lt;StartAngularCliServerAsync&gt;d__3.MoveNext()
       --- End of inner exception stack trace ---
       at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
       at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.&lt;&gt;c.&lt;Attach&gt;b__2_0(Task`1 task)
       at System.Threading.Tasks.ContinuationResultTaskFromResultTask`2.InnerInvoke()
       at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
       at System.Threading.Tasks.Task.ExecuteWithThreadLocal(Task&amp; currentTaskSlot)
    ---&gt; (Inner Exception #0) System.InvalidOperationException: The NPM script &#39;start&#39; exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: &#39;--extractCss&#39;
    
     ---&gt; System.IO.EndOfStreamException: Attempted to read past the end of the stream.
       at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
       at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
       at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.&lt;StartAngularCliServerAsync&gt;d__3.MoveNext()
       --- End of inner exception stack trace ---
       at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.&lt;StartAngularCliServerAsync&gt;d__3.MoveNext()&lt;---
    &lt;---

  [1]: https://update.angular.io/

The NPM script &#39;start&#39; exited without indicating that the Angular CLI was listening for requests

I upgraded my project from angular-5.x to angular-6.x and it started giving the following error and even creation of dummy global variable does not work as given here [https://stackoverflow.com/questions/50209019/angular-6-auth0-global-not-defined][1]

The error is as follows:

    Uncaught ReferenceError: global is not defined
        at Object../node_modules/has-binary2/index.js (index.js:10)
        at __webpack_require__ (bootstrap:81)
        at Object../node_modules/socket.io-parser/index.js (index.js:8)
        at __webpack_require__ (bootstrap:81)
        at Object../node_modules/socket.io-client/lib/index.js (index.js:7)
        at __webpack_require__ (bootstrap:81)
        at Object../src/app/app4pc/apiConnection/services/ApiConnectionServer.ts (auth.interceptor.ts:8)
        at __webpack_require__ (bootstrap:81)
        at Object../src/app/app4pc/apiConnection/toServer.module.ts (ApiConnectionServer.ts:11)
        at __webpack_require__ (bootstrap:81)
    
after resolving this I get following error:

    Uncaught ReferenceError: process is not defined
        at Object../node_modules/process-nextick-args/index.js (index.js:3)
        at __webpack_require__ (bootstrap:81)
        at Object../node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:26)
        at __webpack_require__ (bootstrap:81)
        at Object../node_modules/readable-stream/readable-browser.js (readable-browser.js:1)
        at __webpack_require__ (bootstrap:81)
        at Object../node_modules/simple-peer/index.js (index.js:7)
        at __webpack_require__ (bootstrap:81)
        at Object../src/app/util/services/call.services.ts (notification.service.ts:12)
        at __webpack_require__ (bootstrap:81)    
 

And continues on and on.
    
[1]: https://stackoverflow.com/questions/50209019/angular-6-auth0-global-not-defined

Upgrading to angular-6.x gives &quot;Uncaught ReferenceError: global is not defined&quot;

As Angular6 has been released, 
They have added a new command [ng add &lt;package&gt;][1]. Can anyone tell me what will be the difference between existing `command npm install &lt;package&gt;` and `ng add &lt;package&gt;`


  [1]: https://github.com/angular/material2/blob/master/src/lib/schematics/collection.json

Difference between ng add &lt;package name&gt; vs npm install &lt;package name&gt; in angular 6

I am building the application in `Angular6+`, now I ran the command `ng build --prod` which gave me a dist folder. How do I check or serve that folder on Localhost? 

How to run the Dist Folder on Local Machine in Angular 6+?

In the latest release of Angular 6, a service is registered in a module using the `providedIn` property in the service metadata:

    @Injectable({
      providedIn: &#39;root&#39;,
    })
    export class HeroService {}

However the documentation still also refers to registering the service in the module `providers` array in the module metadata just like we did in Angular 5:

    @NgModule({
      providers: [HeroService],
    })
    export class AppModule {}

So,

- Which method should be used to make the injector aware of the service that it should inject?
- Will the module `providers` array method be deprecated?

angular 6 dependency injection

I have my REST API where I put my pdf file, now I want my angular app to download it on click via my web browser but I got HttpErrorResponse 

&quot;Unexpected token % in JSON at position 0&quot;

&quot;SyntaxError: Unexpected token % in JSON at position 0↵    at JSON.parse (&lt;anonymous&gt;

this is my endpoint

        @GetMapping(&quot;/help/pdf2&quot;)
    public ResponseEntity&lt;InputStreamResource&gt; getPdf2(){

        Resource resource = new ClassPathResource(&quot;/pdf-sample.pdf&quot;);
        long r = 0;
        InputStream is=null;

        try {
            is = resource.getInputStream();
            r = resource.contentLength();
        } catch (IOException e) {
            e.printStackTrace();
        }

            return ResponseEntity.ok().contentLength(r)
                    .contentType(MediaType.parseMediaType(&quot;application/pdf&quot;))
                    .body(new InputStreamResource(is));

    }

this is my service 

      getPdf() {

    this.authKey = localStorage.getItem(&#39;jwt_token&#39;);

    const httpOptions = {
      headers: new HttpHeaders({
        &#39;Content-Type&#39;:  &#39;application/pdf&#39;,
        &#39;Authorization&#39; : this.authKey,
        responseType : &#39;blob&#39;,
        Accept : &#39;application/pdf&#39;,
        observe : &#39;response&#39;
      })
    };
    return this.http
      .get(&quot;http://localhost:9989/api/download/help/pdf2&quot;, httpOptions);


  }

and invocation 

    this.downloadService.getPdf()
      .subscribe((resultBlob: Blob) =&gt; {
      var downloadURL = URL.createObjectURL(resultBlob);
      window.open(downloadURL);});



Angular 6 Downloading file from rest api

When running my unit tests, from time to time, even if they pass, at the end of all the tests running, I will get the following error.

On my Jenkins CI build running PhantomJS:

    .PhantomJS 2.1.1 (Linux 0.0.0) ERROR
      {
        &quot;message&quot;: &quot;An error was thrown in afterAll\nReferenceError: Can&#39;t find variable: $ thrown&quot;,
        &quot;str&quot;: &quot;An error was thrown in afterAll\nReferenceError: Can&#39;t find variable: $ thrown&quot;
      }

Or on Chrome:

    Chrome 67.0.3396 (Windows 7 0.0.0) ERROR
      {
        &quot;message&quot;: &quot;An error was thrown in afterAll\n[object ErrorEvent] thrown&quot;,
        &quot;str&quot;: &quot;An error was thrown in afterAll\n[object ErrorEvent] thrown&quot;
      }

I also have really unreliable tests, without changing anything some times they would succeed and other times the same tests would fail, so I knew something weird was going on. 

Angular 6 Unit Tests: An error was thrown in afterAll\nReferenceError: Can&#39;t find variable: $ thrown

I&#39;m using angular 6 and I have a button which opens a dialog. in my dialog, I have a form that gets user&#39;s data and then I have two buttons to submit and cancel. I tried to show my form&#39;s data in the console but it returns undefined! whats the problem? here is part of codes:

**main.component.ts:**


    import { Work } from &#39;../../../../classes/work_shift&#39;;
    import { DialogContentComponent} from &#39;./dialog-content/dialog-content.component&#39;;
    export class WorkShiftsComponent implements OnInit {
     shifts: Work[];
      name: string;
      start: string;
      end: string;
      constructor(public dialog: MatDialog, private shiftService: WorkShiftsService) { }
    
      ngOnInit() {
      }
    
      openDialog() {
        const dialogRef = this.dialog.open(DialogContentComponent, {
          width: &#39;640px&#39;,
          disableClose: true,
          data: {name: this.name, start: this.start, end: this.end}
        });
        dialogRef.afterClosed().subscribe(result =&gt; {
          console.log(&#39;The dialog was closed&#39;);
          console.log(result);//returns undefined
        });
      }
    }

**dialogContent.component.html:**

        &lt;mat-dialog-content&gt;
      &lt;form class=&quot;example-form&quot;&gt;
        &lt;div fxLayout=&quot;column&quot; fxLayoutAlign=&quot;space-around&quot; class=&quot;form&quot;&gt;
          &lt;div class=&quot;input&quot;&gt;
            &lt;mat-form-field class=&quot;input4&quot;&gt;
              &lt;input matInput placeholder=&quot;Shift name&quot;&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;mat-form-field class=&quot;input input2&quot;&gt;
              &lt;input matInput placeholder=&quot;Start&quot; atp-time-picker&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field class=&quot;input input2&quot;&gt;
              &lt;input matInput placeholder=&quot;End&quot; atp-time-picker &gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;br/&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/mat-dialog-content&gt;
    &lt;mat-dialog-actions&gt;
      &lt;button class=&quot;mat-button&quot; mat-button (click)=&quot;onClose()&quot;&gt;Cancel&lt;/button&gt;
      &lt;button class=&quot;mat-button&quot; mat-button [mat-dialog-close]=&quot;data&quot; cdkFocusInitial color=&quot;primary&quot;&gt;Create&lt;/button&gt;
    &lt;/mat-dialog-actions&gt;



how to pass data from angular material dialog to parent component?

I&#39;m building an Angular 6 app, but every time I want to serve to localhost, I get these errors: 

    ERROR in ./node_modules/aws-sign2/index.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\aws-sign2&#39;
    ERROR in ./node_modules/aws4/aws4.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\aws4&#39;
    ERROR in ./node_modules/ecc-jsbn/index.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\ecc-jsbn&#39;
    ERROR in ./node_modules/http-signature/lib/signer.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\http-signature\lib&#39;
    ERROR in ./node_modules/http-signature/lib/verify.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\http-signature\lib&#39;
    ERROR in ./node_modules/oauth-sign/index.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\oauth-sign&#39;
    ERROR in ./node_modules/request/lib/oauth.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\request\lib&#39;
    ERROR in ./node_modules/request/lib/helpers.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\request\lib&#39;
    ERROR in ./node_modules/request/lib/hawk.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\request\lib&#39;
    ERROR in ./node_modules/sshpk/lib/signature.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib&#39;
    ERROR in ./node_modules/sshpk/lib/private-key.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib&#39;
    ERROR in ./node_modules/sshpk/lib/certificate.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib&#39;
    ERROR in ./node_modules/sshpk/lib/fingerprint.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib&#39;
    ERROR in ./node_modules/sshpk/lib/key.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib&#39;
    ERROR in ./node_modules/sshpk/lib/dhe.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib&#39;
    ERROR in ./node_modules/sshpk/lib/identity.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib&#39;
    ERROR in ./node_modules/sshpk/lib/utils.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib&#39;
    ERROR in ./node_modules/sshpk/lib/formats/pem.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib\formats&#39;
    ERROR in ./node_modules/sshpk/lib/formats/ssh-private.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib\formats&#39;
    ERROR in ./node_modules/sshpk/lib/formats/openssh-cert.js
    Module not found: Error: Can&#39;t resolve &#39;crypto&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib\formats&#39;
    ERROR in ./node_modules/request/lib/har.js
    Module not found: Error: Can&#39;t resolve &#39;fs&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\request\lib&#39;
    ERROR in ./node_modules/forever-agent/index.js
    Module not found: Error: Can&#39;t resolve &#39;http&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\forever-agent&#39;
    ERROR in ./node_modules/http-signature/lib/signer.js
    Module not found: Error: Can&#39;t resolve &#39;http&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\http-signature\lib&#39;
    ERROR in ./node_modules/request/request.js
    Module not found: Error: Can&#39;t resolve &#39;http&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\request&#39;
    ERROR in ./node_modules/tunnel-agent/index.js
    Module not found: Error: Can&#39;t resolve &#39;http&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\tunnel-agent&#39;
    ERROR in ./node_modules/forever-agent/index.js
    Module not found: Error: Can&#39;t resolve &#39;https&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\forever-agent&#39;
    ERROR in ./node_modules/request/request.js
    Module not found: Error: Can&#39;t resolve &#39;https&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\request&#39;
    ERROR in ./node_modules/tunnel-agent/index.js
    Module not found: Error: Can&#39;t resolve &#39;https&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\tunnel-agent&#39;
    ERROR in ./node_modules/forever-agent/index.js
    Module not found: Error: Can&#39;t resolve &#39;net&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\forever-agent&#39;
    ERROR in ./node_modules/tough-cookie/lib/cookie.js
    Module not found: Error: Can&#39;t resolve &#39;net&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\tough-cookie\lib&#39;
    ERROR in ./node_modules/tunnel-agent/index.js
    Module not found: Error: Can&#39;t resolve &#39;net&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\tunnel-agent&#39;
    ERROR in ./node_modules/mime-types/index.js
    Module not found: Error: Can&#39;t resolve &#39;path&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\mime-types&#39;
    ERROR in ./node_modules/assert-plus/assert.js
    Module not found: Error: Can&#39;t resolve &#39;stream&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\assert-plus&#39;
    ERROR in ./node_modules/combined-stream/lib/combined_stream.js
    Module not found: Error: Can&#39;t resolve &#39;stream&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\combined-stream\lib&#39;
    ERROR in ./node_modules/delayed-stream/lib/delayed_stream.js
    Module not found: Error: Can&#39;t resolve &#39;stream&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\delayed-stream\lib&#39;
    ERROR in ./node_modules/isstream/isstream.js
    Module not found: Error: Can&#39;t resolve &#39;stream&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\isstream&#39;
    ERROR in ./node_modules/request/request.js
    Module not found: Error: Can&#39;t resolve &#39;stream&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\request&#39;
    ERROR in ./node_modules/sshpk/lib/ed-compat.js
    Module not found: Error: Can&#39;t resolve &#39;stream&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\sshpk\lib&#39;
    ERROR in ./node_modules/forever-agent/index.js
    Module not found: Error: Can&#39;t resolve &#39;tls&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\forever-agent&#39;
    ERROR in ./node_modules/tunnel-agent/index.js
    Module not found: Error: Can&#39;t resolve &#39;tls&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\tunnel-agent&#39;
    ERROR in ./node_modules/request/request.js
    Module not found: Error: Can&#39;t resolve &#39;zlib&#39; in &#39;C:\Users\sorou\projects\tunrWeb\node_modules\request&#39;

This is my package.json:

    {
      &quot;name&quot;: &quot;tunr-web&quot;,
      &quot;version&quot;: &quot;0.0.0&quot;,
      &quot;scripts&quot;: {
        &quot;ng&quot;: &quot;ng&quot;,
        &quot;start&quot;: &quot;ng serve&quot;,
        &quot;build&quot;: &quot;ng build&quot;,
        &quot;test&quot;: &quot;ng test&quot;,
        &quot;lint&quot;: &quot;ng lint&quot;,
        &quot;e2e&quot;: &quot;ng e2e&quot;
      },
      &quot;private&quot;: true,
      &quot;dependencies&quot;: {
        &quot;@angular/animations&quot;: &quot;^6.0.7&quot;,
        &quot;@angular/cdk&quot;: &quot;github:angular/cdk-builds&quot;,
        &quot;@angular/common&quot;: &quot;^6.0.3&quot;,
        &quot;@angular/compiler&quot;: &quot;^6.0.3&quot;,
        &quot;@angular/core&quot;: &quot;^6.0.3&quot;,
        &quot;@angular/forms&quot;: &quot;^6.0.3&quot;,
        &quot;@angular/http&quot;: &quot;^6.0.3&quot;,
        &quot;@angular/material&quot;: &quot;github:angular/material2-builds&quot;,
        &quot;@angular/platform-browser&quot;: &quot;^6.0.3&quot;,
        &quot;@angular/platform-browser-dynamic&quot;: &quot;^6.0.3&quot;,
        &quot;@angular/router&quot;: &quot;^6.0.3&quot;,
        &quot;angular-svg-round-progressbar&quot;: &quot;^2.0.0&quot;,
        &quot;angularfire2&quot;: &quot;^5.0.0-rc.11&quot;,
        &quot;core-js&quot;: &quot;^2.5.4&quot;,
        &quot;firebase&quot;: &quot;^5.1.0&quot;,
        &quot;hammerjs&quot;: &quot;^2.0.8&quot;,
        &quot;jquery&quot;: &quot;^3.3.1&quot;,
        &quot;ng-scrollreveal&quot;: &quot;^2.2.0&quot;,
        &quot;ng2-scroll-to-el&quot;: &quot;^1.2.1&quot;,
        &quot;ngx-facebook&quot;: &quot;^2.4.0&quot;,
        &quot;ngx-infinite-scroll&quot;: &quot;^6.0.1&quot;,
        &quot;ngx-sharebuttons&quot;: &quot;^4.1.4&quot;,
        &quot;rxjs&quot;: &quot;^6.2.1&quot;,
        &quot;rxjs-compat&quot;: &quot;^6.2.1&quot;,
        &quot;time-ago-pipe&quot;: &quot;^1.3.2&quot;,
        &quot;youtube-search&quot;: &quot;^1.1.1&quot;,
        &quot;zone.js&quot;: &quot;^0.8.26&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;@angular-devkit/build-angular&quot;: &quot;~0.6.8&quot;,
        &quot;@angular/cli&quot;: &quot;~6.0.8&quot;,
        &quot;@angular/compiler-cli&quot;: &quot;^6.0.3&quot;,
        &quot;@angular/language-service&quot;: &quot;^6.0.3&quot;,
        &quot;@types/jasmine&quot;: &quot;~2.8.6&quot;,
        &quot;@types/jasminewd2&quot;: &quot;~2.0.3&quot;,
        &quot;@types/node&quot;: &quot;~8.9.4&quot;,
        &quot;@types/scrollreveal&quot;: &quot;0.0.3&quot;,
        &quot;codelyzer&quot;: &quot;~4.2.1&quot;,
        &quot;jasmine-core&quot;: &quot;~2.99.1&quot;,
        &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
        &quot;karma&quot;: &quot;~1.7.1&quot;,
        &quot;karma-chrome-launcher&quot;: &quot;~2.2.0&quot;,
        &quot;karma-coverage-istanbul-reporter&quot;: &quot;~2.0.0&quot;,
        &quot;karma-jasmine&quot;: &quot;~1.1.1&quot;,
        &quot;karma-jasmine-html-reporter&quot;: &quot;^0.2.2&quot;,
        &quot;protractor&quot;: &quot;~5.3.0&quot;,
        &quot;ts-node&quot;: &quot;~5.0.1&quot;,
        &quot;tslint&quot;: &quot;~5.9.1&quot;,
        &quot;typescript&quot;: &quot;~2.7.2&quot;
      }
    }

Does somebody know what is going wrong? None of the modules mentioned above exist in my node_modules file (I can install some of them, but &#39;crypto&#39;, for example, is built in now). How can I get those folders? It&#39;s driving me nuts.  



All Angular6 Solutions on Gang of Coders

Total of 28 Angular6 Solutions

When upgrading Angular 5 to 6, I get incompatible peer dependency (using ng update @angular/core)

How to use environment variable in index.html for Angular 6

How to add/set environment Angular 6 angular.json file

Angular 6 router.events.filter 'filter' does not exist on type 'Observable<Event>'

Angular 6+ :ProvidedIn a non root module is causing a circular dependency

How to set environment via `ng serve` in Angular 6

What is the purpose of providedIn with the Injectable decorator when generating Services in Angular 6?

Errors: Data path ".builders['app-shell']" should have required property 'class'

Could not find module "@angular-devkit/build-angular"

Angular 6 Material mat-select change method removed

Angular-cli from css to scss

Angular - "has no exported member 'Observable'"

Multiple ng-content

Angular 6 - Why use @ngrx/store rather than service injection

How to pass multiple parameter to @Directives (@Components) in Angular with TypeScript?

Angular6 Material6 Error: "There can only be one default row without a when predicate function."

Error: Schema validation failed with the following errors: Data path "" should NOT have additional properties(project)

Angular 6 View is not updated after changing a variable within subscribe

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

The NPM script 'start' exited without indicating that the Angular CLI was listening for requests

Upgrading to angular-6.x gives "Uncaught ReferenceError: global is not defined"

Difference between ng add <package name> vs npm install <package name> in angular 6

How to run the Dist Folder on Local Machine in Angular 6+?

angular 6 dependency injection

Angular 6 Downloading file from rest api

Angular 6 Unit Tests: An error was thrown in afterAll\nReferenceError: Can't find variable: $ thrown

how to pass data from angular material dialog to parent component?

Angular 6 many Can't resolve errors (crypto, fs, http, https, net, path, stream, tls, zlib)