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 }
    ],复制代码