angular项目搭建以及目录分析

项目搭建

1.使用 npm/cnpm 命令安装 angular/cli （只需要安装一次）

npm install -g @angular/cli 或者  cnpm install -g @angular/cli

2. 创建项目:使用ng new 项目名称

ng new angulardemo

• 如果要跳过 npm i 安装：

ng new angulardemo --skip-install

032115301141004.jpg

3.运行项目

cd angulardemo     ng serve --open

创建项目可能遇到的错误
1、npm 安装 angular/cli 失败 解决方案：用 cnpm 安装
2、创建项目 npm i 的时候失败

• 解决方案1：ctrl+c 结束项目，cd 到项目里面，用 cnpm i 安装依赖
• 解决方案 2：创建项目的时候 --skip-install
  3、创建项目后用 npm i 或者 cnpm i 后项目没法运行 解决方案：用 yarn 替代 cnpm 和 npm
• 1 cnpm instal @angular/cli (我的 npm 会报错)；
  2 ng new 的时候阻止自动安装 ng 包，只创建 ng 目录
  3 安装 yarn npm install -g yarn / cnpm install -g yarn
  4 进入目录 my-app 使用 yarn 安装 ng 所依赖的包 yarn 注意：yarn 命令 等同于 npm install / cnpm install 使用 yarn 前提是先安装 yarn , 安装使用 cnpm install -g yarn 就可以安装

目录分析

图片.png

/*这个文件是Angular 根模块，告诉Angular如何组装应用*/


//BrowserModule，浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';  
//Angular核心模块
import { NgModule } from '@angular/core';
//根组件
import { AppComponent } from './app.component';
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/header/header.component';

/*@NgModule装饰器, @NgModule接受一个元数据对象，告诉 Angular 如何编译和启动应用*/
@NgModule({
  declarations: [    /*配置当前项目运行的的组件*/
    AppComponent, NewsComponent, HomeComponent, HeaderComponent
  ],
  imports: [  /*配置当前模块运行依赖的其他模块*/
    BrowserModule
  ],
  providers: [],  /*配置项目所需要的服务*/
  bootstrap: [AppComponent]    /* 指定应用的主视图（称为根组件） 通过引导根AppModule来启动应用  ，这里一般写的是根组件*/
})

//根模块不需要导出任何东西，   因为其它组件不需要导入根模块
export class AppModule { }