This should technically be achievable using `window.location.reload()`:

**HTML:**

    &lt;button (click)=&quot;refresh()&quot;&gt;Refresh&lt;/button&gt;

**TS:**

    refresh(): void {
        window.location.reload();
    }

**Update:**

Here is a basic [StackBlitz][1] example showing the refresh in action. Notice the URL on &quot;/hello&quot; path is retained when `window.location.reload()` is executed.


  [1]: https://angular-zhdfqe.stackblitz.io/hello

When I get an extension error I have no way of knowing why the error happens.

Where are the VSCode error logs for extensions?

I have the following express endpoint for uploading to Google Cloud storage. It works great and the response from the google api gives me a unique file name that I want to pass back to my front end:

    app.post(&#39;/upload&#39;, (req, res) =&gt; {
      var form = new formidable.IncomingForm(),
      files = [],
      fields = [];

      form
        .on(&#39;field&#39;, function(field, value) {
          fields.push([field, value]);
        })
        .on(&#39;file&#39;, function(field, file) {
          files.push([field, file]);
        })
        .on(&#39;end&#39;, function() {
          console.log(&#39;-&gt; upload done&#39;);
        });
      form.parse(req, function(err, fields, files){
        var filePath = files.file.path;
        bucket.upload(filePath, function(err, file, apiResponse){
          if (!err){
            res.writeHead(200, {&#39;content-type&#39;: &#39;text/plain&#39;});
            res.end(&quot;Unique File Name:&quot; + file.name);
          }else{
            res.writeHead(500);
            res.end();
          }
        });
      });
  
     return;
    });

I reach this endpoint by calling a short function which passes the file to it: 

    function upload(file) {
      var data = new FormData();
      data.append(&#39;file&#39;, file);
      return fetch(`upload`,{
        method: &#39;POST&#39;,
        body: data
      });
    }

    const Client = { upload };
    export default Client;

This function is called from my front end like this: 
					
    Client.upload(this.file).then((data) =&gt; {
	  console.log(data);
	});

This final `console.log(data)` logs the response to the console. However, I don&#39;t see anywhere the response that I wrote in (`&quot;Unique File Name:&quot; + file.name`)

How I can retrieve this info from the response body on the client-side? 



The `data` looks like this when I console.log it:

[![Screenshot of the data console.log][1]][1]


This is the response I get when I POST a file to my endpoint using Postman:

[![Screen shot of response using Postman][2]][2]


  [1]: https://i.stack.imgur.com/0wl4a.png
  [2]: https://i.stack.imgur.com/pEsyV.png

Read the body of a Fetch Promise

How can I reload the current page on Angular 2?

if iam in page 2 (pagination) and refresh the page it will show page 1(URL pageload)
but i want i refresh the page 2 and it will appear in page 2

How to reload page the page with pagination in Angular 2?

<p>How can I reload the current page on Angular 2?</p>
<p>if iam in page 2 (pagination) and refresh the page it will show page 1(URL pageload)
but i want i refresh the page 2 and it will appear in page 2</p>


I really struggle with creating global variables in my Angular 2 application. 

So I have my file called **globals.ts**, which looks like this:

    import { Injectable } from &quot;@angular/core&quot;;


    @Injectable()
    export class Globals {

      var role = &#39;test&#39;;

    }

And I want to use the variable role in my HTML view of my component like this:

    {{ role }} 

I already added the globals.ts file to my **app.module.ts** in the following way:

    providers: [
      Globals
    ],

No matter what I did on this file, it just didn&#39;t work. What I don&#39;t want to do is to have to import the globals.ts file in every component manually, which is why I want to use the providers feature.


Angular 4/5/6 Global Variables

In my app i have something like:

    this._personService.getName(id)
          .concat(this._documentService.getDocument())
          .subscribe((response) =&gt; {
                      console.log(response)
                      this.showForm()
           });
   
     //Output: 
     // [getnameResult]
     // [getDocumentResult]

     // I want:
     // [getnameResult][getDocumentResult]


Then i get two separated results, first of the `_personService` and then the `_documentService`. How can I wait for both results before call `this.showForm()` to finish an then manipulate the results of each one.


How to &#39;wait&#39; for two observables in RxJS

What is the difference between `generic Type(T)` vs `any` in typescript?
---------------------------------------------------------------------

Function 1
----------

    function identity(arg: any): any {
        return arg;
    }

Function 2 
-----------

    function identity&lt;T&gt;(arg: T): T {
        return arg;
    }
    
Function 3
--------------
    function identity&lt;T&gt;(arg: T[]): T[] {
        return arg;
    }


----------


&gt;Function 1 &amp; 3 is accepted if we passing any kind of ` data type`, But the function 2 does not accept if we pass an `array`. **generic type is accepting all kind of data type on compile time**. but here why it does not accept? 

***Also which function is good for better performance ( function 1 or function 3)?***

What are the difference between generic Type(T) vs any in typescript

So I was trying to build and deploy my Angular 4 app for production on both Firebase and Heroku, but I have come across the error as follows:

&gt; ERROR in /Users/.../... (57,49):  Property &#39;firebase&#39; does not exist
&gt; on type &#39;{ production: boolean; }&#39;.

It occurs when I run `ng build --prod`, and my deployment servers are working perfectly fine. Here is my **app.module.ts** file, for reference:

```typescript
import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;
import { FormsModule } from &#39;@angular/forms&#39;;
import { AngularFireModule } from &#39;angularfire2&#39;;
import { AngularFireDatabaseModule } from &#39;angularfire2/database&#39;;
import { Ng2ScrollimateModule } from &#39;ng2-scrollimate&#39;;
import { Ng2PageScrollModule } from &#39;ng2-page-scroll&#39;;

import { HttpModule } from &#39;@angular/http&#39;;
import { trigger, state, style, animate, transition, keyframes } from &#39;@angular/animations&#39;;
import { BrowserAnimationsModule } from &#39;@angular/platform-browser/animations&#39;;
import { environment } from &#39;../environments/environment&#39;;

import { AppComponent } from &#39;./app.component&#39;;

import { LogoComponent } from &#39;./logo/logo.component&#39;;
import { InfoComponent } from &#39;./info/info.component&#39;;
import { AboutComponent } from &#39;./about/about.component&#39;;
import { DividerComponent } from &#39;./divider/divider.component&#39;;
import { ProficienciesComponent } from &#39;./proficiencies/proficiencies.component&#39;;
import { ProficiencyComponent } from &#39;./proficiency/proficiency.component&#39;;
import { PortfolioComponent } from &#39;./portfolio/portfolio.component&#39;;
import { ProjectComponent } from &#39;./project/project.component&#39;;
import { ResumeComponent } from &#39;./resume/resume.component&#39;;
import { FooterComponent } from &#39;./footer/footer.component&#39;;
import { ContactComponent } from &#39;./contact/contact.component&#39;;
import { LoadingComponent } from &#39;./loading/loading.component&#39;;

@NgModule({
  declarations: [
    AppComponent,
    LogoComponent,
    InfoComponent,
    AboutComponent,
    DividerComponent,
    ProficienciesComponent,
    ProficiencyComponent,
    PortfolioComponent,
    ProjectComponent,
    ResumeComponent,
    FooterComponent,
    ContactComponent,
    LoadingComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    Ng2ScrollimateModule,
    Ng2PageScrollModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

**environment.prod.ts**

```typescript
export const environment = {
  production: true
};
```

**environment.ts**

```typescript
export const environment = {
  production: true,
  firebase: {
    apiKey: &#39;...&#39;,
    authDomain: &#39;project.firebaseapp.com&#39;,
    databaseURL: &#39;https://project.firebaseio.com&#39;,
    projectId: &#39;project&#39;,
    storageBucket: &#39;project.appspot.com&#39;,
    messagingSenderId: &#39;...&#39;,
  },
};
```
After scouring StackOverflow and GitHub for possible solutions, there seem to be no developers who have encountered this exact error and published their findings, so I was wondering whether anyone knows how to go about solving this issue. Thanks so much in advance!

Property &#39;firebase&#39; does not exist on type { production: boolean; }

I&#39;m trying to load a local json with `http.get()` in angular 2. I tried something, that I found here on stack. It looks like this:

this is my `app.module.ts` where I `import` the `HttpModule` and the `JsonModule` from `@angular/http`:

    import { BrowserModule } from &#39;@angular/platform-browser&#39;;
    import { NgModule } from &#39;@angular/core&#39;;
    import { FormsModule } from &#39;@angular/forms&#39;;
    import { HttpModule, JsonpModule } from &#39;@angular/http&#39;;
    import { RouterModule, Routes } from &#39;@angular/router&#39;;
    
    import { AppComponent } from &#39;./app.component&#39;;
    import { NavCompComponent } from &#39;./nav-comp/nav-comp.component&#39;;
    import { NavItemCompComponent } from &#39;./nav-comp/nav-item-comp/nav-item-comp.component&#39;;
    
    
    @NgModule({
    	declarations: [
    		AppComponent,
    		NavCompComponent,
    		NavItemCompComponent
    	],
    	imports: [
    		BrowserModule,
    		FormsModule,
    		HttpModule,
    		JsonpModule,
    		RouterModule.forRoot(appRoutes)
    	],
    	providers: [],
    	bootstrap: [AppComponent]
    })
    
    export class AppModule { }

In my **component** I `import` `Http` and `Response` from `@angular/http`. Then I have a function called `loadNavItems()`, where I try to load my json with relative path using `http.get()` and print the result with `console.log()`. The function is called in `ngOnInit()`:

    import { Component, OnInit } from &#39;@angular/core&#39;;
    import { Http, Response } from &#39;@angular/http&#39;;
    
    @Component({
    	selector: &#39;app-nav-comp&#39;,
    	templateUrl: &#39;./nav-comp.component.html&#39;,
    	styleUrls: [&#39;./nav-comp.component.scss&#39;]
    })
    export class NavCompComponent implements OnInit {
    
    	navItems: any;
    
    	constructor(private http: Http) { }
    
    	ngOnInit() {
    		this.loadNavItems();
    	}
    
    	loadNavItems() {
    		this.navItems = this.http.get(&quot;../data/navItems.json&quot;);
    		console.log(this.navItems);
    	}
    }

My **local json file** looks like this:

    [{
            &quot;id&quot;: 1,
            &quot;name&quot;: &quot;Home&quot;,
            &quot;routerLink&quot;: &quot;/home-comp&quot;
        },
        {
            &quot;id&quot;: 2,
            &quot;name&quot;: &quot;&amp;Uuml;ber uns&quot;,
            &quot;routerLink&quot;: &quot;/about-us-comp&quot;
        },
        {
            &quot;id&quot;: 3,
            &quot;name&quot;: &quot;Events&quot;,
            &quot;routerLink&quot;: &quot;/events-comp&quot;
        },
        {
            &quot;id&quot;: 4,
            &quot;name&quot;: &quot;Galerie&quot;,
            &quot;routerLink&quot;: &quot;/galery-comp&quot;
        },
        {
            &quot;id&quot;: 5,
            &quot;name&quot;: &quot;Sponsoren&quot;,
            &quot;routerLink&quot;: &quot;/sponsoring-comp&quot;
        },
        {
            &quot;id&quot;: 6,
            &quot;name&quot;: &quot;Kontakt&quot;,
            &quot;routerLink&quot;: &quot;/contact-comp&quot;
        }
    ]

There are no errors in the console, I just get this output:[![enter image description here][1]][1]



In my **html template** I would like to loop the items like this:

    &lt;app-nav-item-comp *ngFor=&quot;let item of navItems&quot; [item]=&quot;item&quot;&gt;&lt;/app-nav-item-comp&gt;

I made this with a solution I found here on stack, but I have no idea why it doesn&#39;t work?

**EDIT RELATIVE PATH:**
I also get a problem with my relative path, but I&#39;m sure it&#39;s the right one when I use `../data/navItems.json`. In the screenshot you can se the nav-comp.component.ts, where I load the json using relative path from the json file which is in the folder called data? What&#39;s wrong, the console prints an 404 error, because it can&#39;t find my json file from the relative path?

[![enter image description here][2]][2]


  [1]: https://i.stack.imgur.com/GKHtv.png
  [2]: https://i.stack.imgur.com/gW7GV.png

Load json from local file with http.get() in angular 2

I am using a [mat-table](https://material.angular.io/components/table/overview) to list the content of the users chosen languages. They can also add new languages using dialog panel. After they added a language and returned back. I want my datasource to refresh to show the changes they made. 

I initialize the datastore by getting user data from a service and passing that into a datasource in the refresh method.

&lt;!-- language-all: lang-js --&gt;

**Language.component.ts**

    import { Component, OnInit } from &#39;@angular/core&#39;;
    import { LanguageModel, LANGUAGE_DATA } from &#39;../../../../models/language.model&#39;;
    import { LanguageAddComponent } from &#39;./language-add/language-add.component&#39;;
    import { AuthService } from &#39;../../../../services/auth.service&#39;;
    import { LanguageDataSource } from &#39;./language-data-source&#39;;
    import { LevelbarComponent } from &#39;../../../../directives/levelbar/levelbar.component&#39;;
    import { DataSource } from &#39;@angular/cdk/collections&#39;;
    import { Observable } from &#39;rxjs/Observable&#39;;
    import &#39;rxjs/add/observable/of&#39;;
    import { MatSnackBar, MatDialog } from &#39;@angular/material&#39;;
    
    @Component({
      selector: &#39;app-language&#39;,
      templateUrl: &#39;./language.component.html&#39;,
      styleUrls: [&#39;./language.component.scss&#39;]
    })
    export class LanguageComponent implements OnInit {
    
      displayedColumns = [&#39;name&#39;, &#39;native&#39;, &#39;code&#39;, &#39;level&#39;];
      teachDS: any;
      user: any;
    
      constructor(private authService: AuthService, private dialog: MatDialog) { }
    
      ngOnInit() {
        this.refresh();
      }
    
      add() {
        this.dialog.open(LanguageAddComponent, {
          data: { user: this.user },
        }).afterClosed().subscribe(result =&gt; {
          this.refresh();
        });
      }
    
      refresh() {
        this.authService.getAuthenticatedUser().subscribe((res) =&gt; {
          this.user = res;
          this.teachDS = new LanguageDataSource(this.user.profile.languages.teach);   
        });
      }
    }

**language-data-source.ts**
    
    import {MatPaginator, MatSort} from &#39;@angular/material&#39;;
    import {DataSource} from &#39;@angular/cdk/collections&#39;;
    import {Observable} from &#39;rxjs/Observable&#39;;
    import &#39;rxjs/add/observable/merge&#39;;
    import &#39;rxjs/add/operator/map&#39;;
    
    export class LanguageDataSource extends DataSource&lt;any&gt; {
    
      constructor(private languages) {
        super();
      }
    
      connect(): Observable&lt;any&gt; {
        return Observable.of(this.languages);
      }
    
      disconnect() {
        // No-op
      }
  
    }

So I have tried to call a refresh method where I get the user from the backend again and then I reinitialize the data source. However this does not work, no changes are occurring.

Angular + Material - How to refresh a data source (mat-table)

I am working on an Angular project. I&#39;m struggling with refresh action in a component. &lt;br&gt;&lt;br&gt;
I would like to refresh the router&#39;s components on button click.
I have refresh button when I click on it the component/router need to be refresh.&lt;br&gt;&lt;br&gt;
I tried `window.location.reload()` and `location.reload()` these two are not suitable for my need. Please help if anyone aware of it.
 

How to Refresh a Component in Angular

Injecting ActivatedRouteSnapshot into a component is not working (and neither is injecting ActivatedRoute). Here the stack trace:

    &quot;Error: Can&#39;t resolve all parameters for ActivatedRouteSnapshot: (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?).
    at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7042:33)
    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:73735:16)
    at new SyntaxError (http://localhost:4200/vendor.bundle.js:6140:16)
    at CompileMetadataResolver._getDependenciesMetadata (http://localhost:4200/vendor.bundle.js:19345:31)
    at CompileMetadataResolver._getTypeMetadata (http://localhost:4200/vendor.bundle.js:19220:26)
    at CompileMetadataResolver._getInjectableMetadata (http://localhost:4200/vendor.bundle.js:19208:21)
    at CompileMetadataResolver.getProviderMetadata (http://localhost:4200/vendor.bundle.js:19450:40)
    at http://localhost:4200/vendor.bundle.js:19408:49
    at Array.forEach (native)
    at CompileMetadataResolver._getProvidersMetadata (http://localhost:4200/vendor.bundle.js:19375:19)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:4200/vendor.bundle.js:18848:30)
    at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:4200/vendor.bundle.js:18736:23)
    at http://localhost:4200/vendor.bundle.js:18937:54
    at Array.forEach (native)
    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:4200/vendor.bundle.js:18936:41)&quot;

----------

In the component, ActivatedRouteSnapshot is injected as follows:

    constructor([...], private router: Router,
              private route: ActivatedRouteSnapshot) {
        [...]
    }


----------

ActivatedRouteSnapshot is provided in `app.component.ts`:

    @Component({
        selector: &#39;app-root&#39;,
        templateUrl: &#39;./app.component.html&#39;,
        styleUrls: [&#39;./app.component.css&#39;],
        providers: [[...], ActivatedRouteSnapshot]
    })


----------

I&#39;m trying to access the query params similarly to how it is done here: https://stackoverflow.com/a/38997116/3433306

According to the docs it should be as simple as adding it to the constructor parameters: https://angular.io/docs/ts/latest/api/router/index/ActivatedRouteSnapshot-interface.html

What am I missing to successfully inject ActivatedRouteSnapshot?

Unable to inject ActivatedRouteSnapshot

I have a mvc 5 project with a angular frontend . I wanted to add routing as described in this tutorial [https://angular.io/guide/router][1]. So in my `_Layout.cshtml` I added a 

```html
&lt;base href=&quot;/&quot;&gt;
```

 and created my routing in my app.module. But when I run this I get the following error: 

    Error: Template parse errors:
        &#39;router-outlet&#39; is not a known element:
        1. If &#39;router-outlet&#39; is an Angular component, then verify that it is part       of this module.
        2. If &#39;router-outlet&#39; is a Web Component then add &#39;CUSTOM_ELEMENTS_SCHEMA&#39;   to the &#39;@NgModule.schemas&#39; of this component to suppress this message. (&quot;
        &lt;a routerLink=&quot;/dashboard&quot;&gt;dashboard&lt;/a&gt;
        &lt;/nav&gt;
        [ERROR -&gt;]&lt;router-outlet&gt;&lt;/router-outlet&gt;
         &quot;): ng:///AppModule/AppComponent.html@5:0

In my app.component the line 

```html
&lt;router-outlet&gt;&lt;/router-outlet&gt;
```

gives an error telling me that Visual studio cannot resolve the tag &#39;router-outlet&#39;. Any suggestions how I can fix this error? Am I missing a reference or a import or just overlooking something?

Below are my package.json ,app.component and app.module

`package.json`:

```json
{
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;name&quot;: &quot;app&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {},
    &quot;dependencies&quot;: {
    &quot;@angular/common&quot;: &quot;^4.2.2&quot;,
    &quot;@angular/compiler&quot;: &quot;^4.2.2&quot;,
    &quot;@angular/core&quot;: &quot;^4.2.2&quot;,
    &quot;@angular/forms&quot;: &quot;^4.2.2&quot;,
    &quot;@angular/http&quot;: &quot;^4.2.2&quot;,
    &quot;@angular/platform-browser&quot;: &quot;^4.2.2&quot;,
    &quot;@angular/platform-browser-dynamic&quot;: &quot;^4.2.2&quot;,
    &quot;@angular/router&quot;: &quot;^4.2.2&quot;,
    &quot;@types/core-js&quot;: &quot;^0.9.41&quot;,
    &quot;angular-in-memory-web-api&quot;: &quot;^0.3.2&quot;,
    &quot;bootstrap&quot;: &quot;^3.3.7&quot;,
    &quot;core-js&quot;: &quot;^2.4.1&quot;,
    &quot;graceful-fs&quot;: &quot;^4.0.0&quot;,
    &quot;ie-shim&quot;: &quot;^0.1.0&quot;,
    &quot;minimatch&quot;: &quot;^3.0.4&quot;,
    &quot;reflect-metadata&quot;: &quot;^0.1.10&quot;,
    &quot;rxjs&quot;: &quot;^5.0.1&quot;,
    &quot;systemjs&quot;: &quot;^0.20.12&quot;,
    &quot;zone.js&quot;: &quot;^0.8.12&quot;
    },
    &quot;devDependencies&quot;: {
    &quot;gulp&quot;: &quot;^3.9.1&quot;,
    &quot;gulp-clean&quot;: &quot;^0.3.2&quot;,
    &quot;gulp-concat&quot;: &quot;^2.6.1&quot;,
    &quot;gulp-tsc&quot;: &quot;^1.3.2&quot;,
    &quot;gulp-typescript&quot;: &quot;^3.1.7&quot;,
    &quot;path&quot;: &quot;^0.12.7&quot;,
    &quot;typescript&quot;: &quot;^2.3.3&quot;
    }
}
```	   

`app.module.ts`:

```typescript
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 {DashboardComponent} from &quot;./dashboard/dashboard.component&quot;    

const appRoutes: Routes = [
{
    path: &#39;&#39;,
    redirectTo: &#39;/dashboard&#39;,
    pathMatch: &#39;full&#39;,
    component: DashboardComponent
},  
{
    path: &#39;dashboard&#39;,
    component: DashboardComponent
}
];
@NgModule({
imports: [
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule               
],
exports: [RouterModule],
declarations: [
    AppComponent,  
    DashboardComponent      
],
bootstrap: [AppComponent]
})
export class AppModule {

}
```

`app.component.ts`:

```typescript
import { Component } from &#39;@angular/core&#39;;

@Component({
selector: &#39;my-app&#39;,
template: `
          &lt;h1&gt;{{title}}&lt;/h1&gt;
          &lt;nav&gt;
          &lt;a routerLink=&quot;/dashboard&quot;&gt;dashboard&lt;/a&gt;
          &lt;/nav&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
          `
})
export class AppComponent {
    title = &#39;app Loaded&#39;;

}
```

    
  [1]: https://angular.io/guide/router

&#39;router-outlet&#39; is not a known element

I am trying to implement lazy loading but getting error as following
**

&gt; ERROR Error: Uncaught (in promise): Error: BrowserModule has already
&gt; been loaded. If you need access to common directives such as NgIf and
&gt; NgFor from a lazy loaded module, import CommonModule instead.

**

Need Help on this.
Here are my Modules 

 1. Shared MOdule

&gt;     @NgModule({
&gt;     
&gt;       declarations: [TimePipe],
&gt;       providers: [
&gt;         EmsEmployeeService,
&gt;         EmsDesignationService,
&gt;         EmsOrganizationService,
&gt;         EmsAuthService,
&gt;         AmsEmployeeService,
&gt;         AmsShiftService,
&gt;         ValidatorService,
&gt;         AmsLeaveService,
&gt;         AmsAttendanceService,
&gt;         AmsDeviceService,
&gt;         AmsOrganizationService,
&gt;         AmsAlertService,
&gt;         AmsHolidayService,
&gt;         AutoCompleteService,
&gt;         AmsTimelogsService,
&gt;         LocalStorageService
&gt;       ],
&gt;       imports: [
&gt;         HttpModule,
&gt;         ToastyModule.forRoot(),
&gt;         AgmCoreModule.forRoot({
&gt;           apiKey: &#39;xxxxxxxxxxxxxxxxxxxxxxxxxxx&#39;
&gt;         }),
&gt;       ],
&gt;       exports: [
&gt;         FormsModule,
&gt;         HttpModule,
&gt;         BrowserAnimationsModule,
&gt;         RouterModule,
&gt;         MaterialModule,
&gt;         MdDatepickerModule,
&gt;         MdNativeDateModule,
&gt;         ToastyModule,
&gt;         FileUploadModule,
&gt;         NgxPaginationModule,
&gt;         NguiAutoCompleteModule,
&gt;         AgmCoreModule,
&gt;         TimePipe
&gt;       ]
&gt;     })
&gt;     export class SharedModule { }

 2.SettingModule

&gt;      @NgModule({
&gt;       imports: [
&gt;         CommonModule,
&gt;         SharedModule,
&gt;         SettingsRoutingModule
&gt;       ],
&gt;       declarations: [
&gt;         SettingsComponent,
&gt;         ShiftsComponent,
&gt;         DevicesComponent,
&gt;         AlertsComponent,
&gt;         HolidaysComponent,
&gt;         AlterTypesComponent,
&gt;         AlterEditComponent,
&gt;         ShiftTypeNewComponent,
&gt;         DeviceLogsComponent,
&gt;         ChannelTypesComponent,
&gt;         ChannelTypeEditComponent
&gt;       ], exports: [
&gt;         SettingsComponent,
&gt;         ShiftsComponent,
&gt;         DevicesComponent,
&gt;         AlertsComponent,
&gt;         HolidaysComponent,
&gt;         AlterTypesComponent,
&gt;         AlterEditComponent,
&gt;         ShiftTypeNewComponent,
&gt;         DeviceLogsComponent,
&gt;         ChannelTypesComponent,
&gt;         ChannelTypeEditComponent,
&gt;       ]
&gt;     })
&gt;     export class SettingsModule { }

    3.SettingRoutingModule

&gt;     const settings_routes: Routes = [
&gt;       { path: &#39;&#39;, redirectTo: &#39;shifts&#39;, pathMatch: &#39;full&#39; },
&gt;       { path: &#39;shifts&#39;, component: ShiftsComponent },
&gt;       { path: &#39;shifts/new&#39;, component: ShiftTypeNewComponent },
&gt;       { path: &#39;shifts/edit/:id&#39;, component: ShiftTypeNewComponent },
&gt;       { path: &#39;devices&#39;, component: DevicesComponent },
&gt;       { path: &#39;deviceLogs&#39;, component: DeviceLogsComponent },
&gt;       { path: &#39;holidays&#39;, component: HolidaysComponent },
&gt;       { path: &#39;alerts&#39;, component: AlertsComponent },
&gt;       { path: &#39;alerts/types&#39;, component: AlterTypesComponent },
&gt;       { path: &#39;alerts/:id&#39;, component: AlterEditComponent },
&gt;       { path: &#39;channelTypes&#39;, component: ChannelTypesComponent },
&gt;       { path: &#39;channelTypes/:id&#39;, component: ChannelTypeEditComponent }
&gt;     ];
&gt;     
&gt;     
&gt;     const routes: Routes = [
&gt;       { path: &#39;&#39;, component: SettingsComponent, children: settings_routes }
&gt;     ];
&gt;     
&gt;     
&gt;     
&gt;     @NgModule({
&gt;       imports: [RouterModule.forChild(routes)],
&gt;       exports: [RouterModule]
&gt;     })
&gt;     export class SettingsRoutingModule { }

4. App-routing-module

&gt;     const attdendance_routes: Routes = [
&gt;       { path: &#39;&#39;, redirectTo: &#39;daily&#39;, pathMatch: &#39;full&#39; },
&gt;       { path: &#39;monthly&#39;, component: MonthlyComponent },
&gt;       { path: &#39;daily&#39;, component: DailyComponent },
&gt;     
&gt;       { path: &#39;daily/:empId&#39;, component: AttendanceDetailsComponent },
&gt;       { path: &#39;details/:empId&#39;, component: AttendanceDetailsComponent },
&gt;       { path: &#39;monthly/:empId&#39;, component: AttendanceDetailsComponent },
&gt;       { path: &#39;leaves/:empId&#39;, component: AttendanceDetailsComponent },
&gt;     
&gt;       { path: &#39;details/:empId/apply-leave&#39;, component: ApplyLeaveComponent },
&gt;       { path: &#39;daily/:empId/apply-leave&#39;, component: ApplyLeaveComponent },
&gt;       { path: &#39;daily/:empId/attendance-logs/:ofDate&#39;, component: AttendanceLogsComponent },
&gt;       { path: &#39;monthly/:empId/apply-leave&#39;, component: ApplyLeaveComponent },
&gt;       { path: &#39;leaves/:empId/apply-leave&#39;, component: ApplyLeaveComponent },
&gt;       { path: &#39;leaves/new/apply&#39;, component: ApplyLeaveComponent },
&gt;     
&gt;       { path: &#39;leaves&#39;, component: LeavesComponent },
&gt;       { path: &#39;leave-balances&#39;, component: LeaveBalancesComponent },
&gt;       { path: &#39;leave-balances/:empId&#39;, component: AttendanceDetailsComponent },
&gt;       { path: &#39;manage-leaves&#39;, component: ManageLeavesComponent },
&gt;     
&gt;     ];
&gt;     
&gt;
&gt;     
&gt;     const emp_routes: Routes = [
&gt;       { path: &#39;&#39;, redirectTo: &#39;list&#39;, pathMatch: &#39;full&#39; },
&gt;       { path: &#39;list&#39;, component: EmployeeListComponent },
&gt;       { path: &#39;list/:id&#39;, component: EmpEditComponent },
&gt;       { path: &#39;designations&#39;, component: DesignationsComponent }
&gt;     ];
&gt;     
&gt;     
&gt;     
&gt;     const page_routes: Routes = [
&gt;       { path: &#39;&#39;, redirectTo: &#39;attendances&#39;, pathMatch: &#39;full&#39; },
&gt;       { path: &#39;employees&#39;, component: EmployeesComponent, children: emp_routes },
&gt;       { path: &#39;attendances&#39;, component: AttendancesComponent, children: attdendance_routes },
&gt;
&gt;       { path: &#39;settings&#39;, loadChildren: &#39;./pages/settings/settings.module#SettingsModule&#39; },
&gt;     ];
&gt;     
&gt;     // main routes
&gt;     const routes: Routes = [
&gt;       { path: &#39;&#39;, redirectTo: &#39;pages&#39;, pathMatch: &#39;full&#39; },
&gt;       { path: &#39;login&#39;, component: LoginComponent, canActivate: [LoginGuard] },
&gt;       { path: &#39;pages&#39;, component: PagesComponent, canActivate: [UserGuard], children: page_routes },
&gt;       { path: &#39;loginViaOrg&#39;, component: OrgLoginComponent },
&gt;       { path: &#39;download&#39;, component: AppDownloadComponent },
&gt;       { path: &#39;**&#39;, redirectTo: &#39;pages&#39; },
&gt;     ];
&gt;     
&gt;     @NgModule({
&gt;       imports: [RouterModule.forRoot(routes, { useHash: true })],
&gt;       exports: [RouterModule]
&gt;     })
&gt;     export class AppRoutingModule { }

5.AppModule

&gt;     @NgModule({
&gt;     
&gt;       declarations: [
&gt;         AppComponent,
&gt;         PagesComponent,
&gt;         LoginComponent,
&gt;         EmployeesComponent,
&gt;         OrgLoginComponent,
&gt;         EmployeeListComponent,
&gt;         EmpEditComponent,
&gt;         DayEventDialogComponent,
&gt;         AttendancesComponent,
&gt;         MonthlyComponent,
&gt;         AttendanceDetailsComponent,
&gt;         DailyComponent,
&gt;         DeviceDialogComponent,
&gt;         LeaveActionDialogComponent,
&gt;         LeavesComponent,
&gt;         LeaveBalancesComponent,
&gt;         ManageLeavesComponent,
&gt;         ApplyLeaveComponent,
&gt;         ConfirmDialogComponent,
&gt;         ResetPasswordDialogComponent,
&gt;         AppDownloadComponent,
&gt;         DesignationsComponent,
&gt;         AttendanceLogsComponent,
&gt;       ],
&gt;     
&gt;       entryComponents: [
&gt;         DayEventDialogComponent,
&gt;         DeviceDialogComponent,
&gt;         LeaveActionDialogComponent,
&gt;         ConfirmDialogComponent,
&gt;         ResetPasswordDialogComponent
&gt;       ],
&gt;     
&gt;       imports: [
&gt;         BrowserModule,
&gt;         // CommonModule,
&gt;         SharedModule,
&gt;         AppRoutingModule,
&gt;         // feature modules
&gt;         // SettingsModule
&gt;       ],
&gt;     
&gt;       providers: [
&gt;         LoginGuard, UserGuard,
&gt;       ],
&gt;     
&gt;       bootstrap: [AppComponent]
&gt;     })
&gt;     export class AppModule { }



Lazy Loading BrowserModule has already been loaded

Im using this:
```js
    import { HttpParams } from &#39;@angular/common/http&#39;;
    let params = new HttpParams();
    params.append(&#39;newOrdNum&#39;,&#39;123&#39;);
```
But this is not working, i dont append param in url. Any suggestion?

Angular: append query parameters to URL

I know that it is not ideal to reload an Angular Single Page Application. However there is a place that I need to reload the full application.

TSLint says that reload is deprecated.

Is there any alternative for this? 

Content Type	Original Author	Original Content on Stackoverflow
Question	FABI1987	View Question on Stackoverflow
Solution 1 - Angular	Alexander Staroselsky	View Answer on Stackoverflow

How to reload page the page with pagination in Angular 2?

Angular Problem Overview

Angular Solutions

Solution 1 - Angular

Read the body of a Fetch Promise

Where are the VSCode error logs for extensions?

Attributions