Angular 4.X 踩坑集錦

GitHub地址：github.com/JerryMissTo… ，歡迎關注

使用ngIf或者ngSwitch出錯

在html文件中使用ngIf或者ngSwitch時，會解析出錯，錯誤提示以下：

Error: Template parse errors:
Can't bind to 'ngSwitch' since it isn't a known property of 'div'.複製代碼

這個是由於沒有在此Component所在的Module中導入CommonModule，雖然你可能在AppModule中導入過了，可是仍是須要導入一次，代碼以下：

import { CommonModule } from '@angular/common';
@NgModule(
    {
        declarations: [ ],
        imports: [
            CommonModule
        ],
        exports: [ ],
        providers: [ ]
    }
)
export class MainModule { }複製代碼

多級依賴注入器

Angular 4.X擁有多級依賴注入系統，在一個注入器的範圍內，依賴都是單例的。它使用冒泡機制，當一個組件申請得到一個依賴時，Angular 先嚐試用該組件本身的注入器來知足它。 若是該組件的注入器沒有找到對應的提供商，它就把這個申請轉給它父組件的注入器來處理。 若是那個注入器也沒法知足這個申請，它就繼續轉給它的父組件的注入器。

舉個例子，從登陸頁點擊登陸按鈕進入主頁，LoginComponent和MainComponent都注入了LoginService。

登陸：

//login.service.ts
// 這個是登陸服務
import { Injectable } from '@angular/core';

@Injectable()
export class LoginService {
    isLoggedIn: boolean = false;
    login(){
        this.isLoggedIn=true;
    }
}複製代碼

// login.component.ts
//登陸界面，只有一個登陸按鈕，點擊後登陸會把LoginService中的isLoggedIn變爲true

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LoginService } from '../login/login.service';
@Component({
  selector: 'app-login',
  template:`<button (click)=login()>Login </button>`,
  providers: [LoginService]
})
export class LoginComponent implements OnInit {

  constructor(private router: Router, private loginService: LoginService) { }

  login() {
    this.loginService.login();
    console.log(this.loginService.isLoggedIn); //結果爲true
    this.router.navigate(['/main']);
  }
}複製代碼

// main.component.ts
// 這個是登錄後的主界面

import { Component} from '@angular/core';
import { LoginService } from '../login/login.service';

@Component({
  selector: 'app-main',
  template: `<h1>HOME</h1>`,
  providers: [LoginService]
})
export class MainComponent implements OnInit {

  private userType: string ;
  constructor(private loginService: LoginService) {
    console.log(this.loginService.isLoginIn); //結果爲false
  }
}複製代碼

從上面的例子能夠看出來，在不一樣的地方注入一樣的Service，可是會使用不一樣的實例，因此會致使結果可能不一樣，須要注意。

pipe使用報錯，出現cross module問題

在app.module.ts中的declarations引入後，在子模塊的 *.component.ts中使用會報錯。把pipe在子模塊中聲明使用便可。

不一樣文件夾下Module同名致使webpack打包失敗

假如兩個文件夾下分別有FristModule、SecondModule兩個模塊，他們都有名爲HomeModule的子模塊，webpack打包的時候會出錯，log爲：ERROR in Duplicated path in loadChildren detected ......Webpack cannot distinguish on context and would fail to load the proper one.。能夠在FirstModule的router中經過絕對路徑的形式來規避此問題。例子代碼以下：

export const firstRoutes = [{
    path: '',
    children: [
        {path: '', redirectTo: 'home', pathMatch: 'full'},
        {path: 'home', loadChildren: 'app/first/home/home.module#HomeModule'},
        {path: '**', redirectTo: 'home'}
    ]
}];複製代碼

export const secondRoutes = [{
    path: '',
    children: [
        {path: '', redirectTo: 'home', pathMatch: 'full'},
        {path: 'home', loadChildren: 'app/second/home/home.module#HomeModule'},
        {path: '**', redirectTo: 'home'}
    ]
}];複製代碼

設置全局的CSS樣式

咱們一般會有本身的CSS樣式庫來保證視覺效果的統一，能夠把css樣式寫在app文件夾下的styles.css中，確保.angular-cli.json的"styles": [ "styles.css"]保持對應，而後在*.component.html的控件中直接使用，無需在index.html中經過<link>標籤引入，也無需其餘的任何操做。

cannot find *.module的可能狀況

一、router中loadChildren中的路徑不對
二、router中寫入某componenet的路徑，可是沒有在對應的Module的declarations中聲明

打包報錯：Supplied parameters do not match any signature of call target

這個是因爲寫代碼不嚴謹形成的，具體可參考：blog.csdn.net/crper/artic…

ng build部署後base文件路徑問題

經過ng build --prod打包以後，會停留在loading，log提示找不到css，js等文件，這個是由index.html中base路徑設置引發的，修改成相對路徑就能夠:< base href="./">

刷新出現404錯誤

這個是與Angular的 刷新策略相關，在app.module設置以下：

import { HashLocationStrategy, LocationStrategy } from '@angular/common';
providers: [
        LoginService,
        { provide: LocationStrategy, useClass: HashLocationStrategy }
    ],複製代碼