angular6 | 易学教程

Angular 6 project displays 404 error after refresh

阅读更多关于 Angular 6 project displays 404 error after refresh

Refreshing my angular page gives me a 404 server error, it does the same if I manually navigate to directory in the search bar. I am hosting through an IIS Server. This problem only occurs whenever I build my angular project with ng build --prod and then upload it to my web server. Many people say you should use the hash method, but I don't want a hash to be displayed inside my url, and it's a very old method. Some people also say I should change my <base> tag in my <head> , but that hasn't worked. Here's my <head> tag from my index.html if it is helpful. <head>  <meta

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'site-notice'

阅读更多关于 Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'site-notice'

问题 Im totaly confused about this error. I have a very basic simple routing: const routes: Routes = [ { path: '', component: FrameDefaultComponent, pathMatch: 'full', children: [ {path: '', component: SiteCalculatorComponent}, {path: 'site-notice', component: SiteSiteNoticeComponent} ] }, ]; When i click the menu entrie for site-notice in the menu that looks like this: menuEntries = [ { title: 'Calculator', url: '/' }, { title: 'Site Notice', url: '/site-notice' } ]; Then i get the following

Golden Layout with Angular 6 using typescript?

阅读更多关于 Golden Layout with Angular 6 using typescript?

问题 I am using golden layout with Angular 6, following this tutorial. I'm getting an error on GoldenLayoutModule.forRoot(config) config not assignable to parameter of type GoldenLayoutConfiguration . import { AppComponent } from './app.component'; import { GoldenLayoutModule, GoldenLayoutConfiguration } from '@embedded-enterprises/ng6-golden-layout'; import * as $ from 'jquery'; // It is required to have JQuery as global in the window object. window['$'] = $; // const config:

Angular 6 using angular2-jwt

阅读更多关于 Angular 6 using angular2-jwt

问题 After the migration of my app from Angular 4^ to Angular 6 (newest version) I got a very weird error in my Auth service. Specific, the angular2-jwt package is causing a killer error when I try to "serve" or "build" the app in production environment. In the other hand, the same code runs perfectly well on "dev" environment. OS -> MacOS 10.13.6 The error I got when execute ng serve --configuration production : ERROR in : Error: Internal error: unknown identifier [{"filePath":"/Users/paulo

Passing for variable to ng-content

阅读更多关于 Passing for variable to ng-content

How do I pass an ngFor variable to the ng-content template. Example, the containing-component: <ul> <li *ngFor="let item of itemsArray"> <ng-content></ng-content> </li> </ul> The nested content-component: <div> <span *ngIf="item.type_one"></span> <span *ngIf="item.type_two"></span> </div> Example, both: <containing-component> <content-component> </content-component> </containing-component> You can not use ng-content as dynamic template. Use ng-template instead <ul> <li *ngFor="let item of itemsArray"> <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"> </ng-container>

How to inject snackBarRef into a component with openFromComponent

阅读更多关于 How to inject snackBarRef into a component with openFromComponent

问题 The latest Material documentation says the following.. If you want to close a custom snack-bar that was opened via openFromComponent, from within the component itself, you can inject the MatSnackBarRef. but they don't show you how to do it. In their example, they nest a component within the same .ts file as the calling module, and they don't show the ref being passed in. But since I want to use a more centralized approach, I have created a new module using... ng g component components

How get checked value from radio button angular

阅读更多关于 How get checked value from radio button angular

I need to get value from radio button in angular. Suppose to have this html code: <label class="radio-inline"> <input class="form-check-input" type="radio" [(ngModel)]="dog" name="gob" value="i" [checked]="true" (change)="onItemChange(item)"/>Dog </label> <label class="radio-inline"> <input class="form-check-input" type="radio" [(ngModel)]="cat" name="cat" value="p" (change)="onItemChange(item)"/>Cat </label> In my ts page I need to get the value of radio button like dog.value My purpose is: Set default cheched to first radio button Get the value when I click on radio button Anyone can help me

ngx-translate not showing any text in lazy-loaded module

阅读更多关于 ngx-translate not showing any text in lazy-loaded module

问题 We are using Angular 6 in our application. We recently started to prepare our app fro lazy-loading. Application has multiple lazy-loaded routes. We want to use a single language file for all routes (don't need to separate it into chunks. But load all translations on bootstrap). First thing I tried was just to import and configure ngx-translate in AppModule (forRoot) and nowhere else. For that purpose I created a configuration file for TranslateModule with the following code: import {

Angular 6: i18n: How to update an existing .xlf file that has already been translated?

阅读更多关于 Angular 6: i18n: How to update an existing .xlf file that has already been translated?

问题 In Angular 6, now that I think I comprehend how to make the i18n files and utilize them (e.g. https://angular.io/guide/i18n), I am wondering about maintenance of said files. If I go in and change the html, as I understand it, I would have to regenerate the messages.xml file using the ng xi18n command, which then implies that I would be required to retranslate the file into the other languages or, at the very least, do some kind of visual matching so I can move the content of some div tag to

Google Authentication in Angular 6

阅读更多关于 Google Authentication in Angular 6

I have created a project in angular 6 which exhibits google authentication using angular-6-social-login . Following is the install command: npm install --save angular-6-social-login After this, i made the following changes to the app.module.ts file: import {SocialLoginModule,AuthServiceConfig,GoogleLoginProvider} from "angular-6-social-login"; // Configs export function getAuthServiceConfigs() { let config = new AuthServiceConfig( [ { id: GoogleLoginProvider.PROVIDER_ID, provider: new GoogleLoginProvider("Your-Google-Client-Id") } ]; ); return config; } @NgModule({ imports: [ ...