# angularStudy

**Repository Path**: lomospace/angularStudy

## Basic Information

- **Project Name**: angularStudy
- **Description**: Angular4 学习 notes
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-11-26
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Angular4

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.2.0.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).



### Angular4 学习笔记

```bash
ng new angular4
cd angular4

#start
ng start #本地预览
#or
npm run build #本地预览
```

> `.spec.ts`文件是用来进行单元测试的.


因为Angular2以上 官方推荐使用`ts`, 所以在使用`jQuery` 和 `Bootstrap` 时需要注意：

```bash
npm install jquery --save
npm install bootstrap --save

#在TypeScript中尝试使用$符号的时候,编辑器仍然不能识
#需要 安装JQuery的类型描述文件
npm install @types/jquery --save-dev
npm install @types/bootstrap --save-dev
```

安装完这2个类型描述文件后。在`package.json`文件中增加了一下2项：
```json
// devDependencies
"@types/bootstrap": "^3.3.36",
"@types/jquery": "^3.2.16",
```

> 安装这2个模块的作用是为了 方便在 `.ts`文件中使用， 让 `typeScript` 识别 `jQuery` 和 `Bootstrap` 语法.

**Angular2以上都是用模块化、组件化思想开发**

对此，Google已有强大支持，如：生成导航栏：
```bash
#在项目的 根目录下：
ng g component navbar
```

按照教程，这个简单的单页应用，还需其它几个小组件。
同理生成其它几个组件：

```bash
ng g component search #搜索🔍

ng g component product #产品相关

ng g component stars #星星✨

ng g component footer #footer
```

当我们需要删除或者修改某个组件名式，需要手动删除app文件夹下对应的文件下还有`app.module.ts`中引入的这个组件（在这个文件中删除或修改名字），否则打包编译时会报错，像如下所示：
```bash
ERROR in /Users/lomo/Sites/sites/angular4/src/app/app.module.ts (9,31): Cannot find module './foot/foot.component'.

ERROR in Error encountered resolving symbol values statically. Could not resolve ./foot/foot.component relative to /Users/lomo/Sites/sites/angular4/src/app/app.module.ts., resolving symbol AppModule in /Users/lomo/Sites/sites/angular4/src/app/app.module.ts, resolving symbol AppModule in /Users/lomo/Sites/sites/angular4/src/app/app.module.ts

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve './foot/foot.component' in '/Users/lomo/Sites/sites/angular4/src/app'
 @ ./src/app/app.module.ts 14:0-54
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
```

> 注意，生成的每个组件文件夹📂下的 `xx.component.ts`里的 `selector`, 如
```ts
selector: 'app-search',
```
即: 我们创建的组件所对应的css元素选择器(也就是标签的名字) 所对应的标签元素就为这个。

至此，完成这个小小单页应用项目的基本骨架。

接下来这些骨架如何拼接，组织？

Angular应用启动，src下的app作为入口，所以模块拼接在 `app.component.html`中。


### 打包编译问题：

```bash
ng build -prod

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/lomo/Sites/sites/angular4/src'
 @ ./src/main.ts 3:0-74
 @ multi ./src/main.ts
```

`package.json`中angular-cli版本：

```json
"@angular/cli": "1.2.0",
"@angular/compiler-cli": "^4.0.0",
```

解决方案：

```bash
rm -rf node_modules
npm install --save-dev @angular/cli@latest

npm install #然后重新编译即可
```


问题2

```bash
#ng build -prod 时:
Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/lomo/Sites/sites/angular4/node_modules/html-webpack-plugin/lib/compiler.js:11:26)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/lomo/Sites/sites/angular4/node_modules/html-webpack-plugin/index.js:7:21)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
```

解决方案：

```bash
npm remove webpack -g
npm i webpack --save-dev

```

问题3：

打发布包的资源路径404问题。
将`src/index.html`中的 `<base href="/">` 该为 `<base href="./">` 即可。