Angular 4.X 踩坑集锦-CSDN博客

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的可能情况

1、router中loadChildren中的路径不对
2、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 }
    ],复制代码