angular6 | 易学教程

Angular 6 Services: providedIn: 'root' vs CoreModule

阅读更多关于 Angular 6 Services: providedIn: 'root' vs CoreModule

问题 With Angular 6, below is the preferred way to create singleton services: import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class UserService { } From Angular doc: When you provide the service at the root level, Angular creates a single, shared instance of HeroService and injects into any class that asks for it. Registering the provider in the @Injectable metadata also allows Angular to optimize an app by removing the service if it turns out not to be used

Angular 6 Downloading file from rest api

阅读更多关于 Angular 6 Downloading file from rest api

问题 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 "Unexpected token % in JSON at position 0" "SyntaxError: Unexpected token % in JSON at position 0↵ at JSON.parse ( this is my endpoint @GetMapping("/help/pdf2") public ResponseEntity<InputStreamResource> getPdf2(){ Resource resource = new ClassPathResource("/pdf-sample.pdf"); long r = 0; InputStream is=null; try { is = resource.getInputStream(); r =

angular6 feature module lazy loading throwing error TypeError: undefined is not a function

阅读更多关于 angular6 feature module lazy loading throwing error TypeError: undefined is not a function

I have this code in app-routing.module.ts , as per the new documentation in angular I went through the method still it's not working, throwing some errors I can't understand. import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule, Routes } from "@angular/router"; import { HomeComponent } from "./home/home.component"; import { AdminModule } from "./admin/admin.module"; const routes: Routes = [ { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }, { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'home',

Http Error Handling in Angular 6

阅读更多关于 Http Error Handling in Angular 6

问题 I, am trying to handle the http error using the below class in angular 6. I got a 401 unAuthorized status from server. But however I, don't see the console error message. HttpErrorsHandler.ts file import { ErrorHandler, Injectable} from '@angular/core'; @Injectable() export class HttpErrorsHandler implements ErrorHandler { handleError(error: Error) { // Do whatever you like with the error (send it to the server?) // And log it to the console console.error('It happens: ', error); } } app

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

阅读更多关于 Angular 6 Unit Tests: An error was thrown in afterAll\nReferenceError: Can't find variable: $ thrown

问题 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 { "message": "An error was thrown in afterAll\nReferenceError: Can't find variable: $ thrown", "str": "An error was thrown in afterAll\nReferenceError: Can't find variable: $ thrown" } Or on Chrome: Chrome 67.0.3396 (Windows 7 0.0.0) ERROR { "message": "An error was thrown in

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

阅读更多关于 Angular 6 View is not updated after changing a variable within subscribe

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 = 'foo'; this.someService.someObservable.subscribe( () => console.log('success'), (error) => console.log('error', error), () => { this.testVariable += '-bar'; console.log('completed', this.testVariable); // prints: foo-Hello-bar } ); this.testVariable += '-Hello'; } example.component.html {{testVariable}} But the view displays: foo-Hello . Why won't it display: foo-Hello-bar ? If I call ChangeDetectorRef.detectChanges() within

How do I turn off source maps for Angular 6 ng test?

阅读更多关于 How do I turn off source maps for Angular 6 ng test?

I am trying to turn off sourcemaps for my tests in Angular 6. I know the sourcemaps switch has been removed, e.g., ng test --sourcemaps=false . I have tried modifying my tsconfig file: { "extends": "../tsconfig.json", "compilerOptions": { ... "sourceMap": false }, as referenced by the angular.json test->configuration block: "test": { ... "options": { ... "tsConfig": "src/tsconfig.spec.json", The source maps are still being generated. You can use CLI v6.0.8 and above --source-map=false CLI v6.x --sourceMap=false CLI v1.x --sourcemaps=false Angular CLI changing this param from version to version

Navigate from Login page to Tabs in Ionic4?

阅读更多关于 Navigate from Login page to Tabs in Ionic4?

问题 I am creating an application and i want move from login Page to Tabs Page. When I try to navigate to Tabs page, its only showing Home page without Tabs. here is my Code. app-routing.module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' }, { path: 'tabs', loadChildren: './pages/tabs/tabs

How to add external js file in angular 6 library

阅读更多关于 How to add external js file in angular 6 library

I am creating an angular library (version 6) which is based on angular material for which I need to include the hammer js library. I know that in angular 6 we can add the external js library in the angular.json under the project's configuration. But this does not work in case of above library. I tried to add the external library in the following way. "my-library": { "root": "projects/my-library", "sourceRoot": "projects/my-library/src", "projectType": "library", "architect": { "build": { "builder": "@angular-devkit/build-ng-packagr:build", "options": { "tsConfig": "projects/my-library/tsconfig

Angular 6: Multiple configurations (twas environments)

阅读更多关于 Angular 6: Multiple configurations (twas environments)

Trying to get angular-cli to recognise multiple configurations in angular.json C:\_dev\myapp>ng serve --configuration development Configuration 'development' could not be found in project 'myapp'. Error: Configuration 'development' could not be found in project 'myapp'. The snippet being: "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.production.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true,