angular cli wiki 学习

[Christian-Yang]

https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

CSS Preprocessor integration CSS预处理器集成

Angular CLI supports all major CSS preprocessors: Angular CLI支持所有主要的CSS预处理程序：

sass/scss (http://sass-lang.com/) less (http://lesscss.org/) stylus (http://stylus-lang.com/)

To use these preprocessors simply add the file to your component's styleUrls: 要使用这些预处理器，只需将文件添加到组件的styleUrls：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

When generating a new project you can also define which extension you want for style files: 生成新项目时，您还可以定义要为样式文件添加哪个扩展名： ng new sassy-project --style=sass

或者在现有项目上设置默认样式： ng set defaults.styleExt scss

[Christian-Yang]

https://github.com/angular/angular-cli/wiki/stories-disk-serve

stories disk serve

Serve from Disk 从磁盘运行serve

The CLI supports running a live browser reload experience to users by running ng serve. This will compile the application upon file saves and reload the browser with the newly compiled application. This is done by hosting the application in memory and serving it via webpack-dev-server. CLI支持通过运行ng服务为用户运行实时浏览器重新加载体验。 这将在文件保存时编译应用程序，并使用新编译的应用程序重新加载浏览器。 这通过在内存中托管应用程序并通过webpack-dev-server进行服务来完成。 If you wish to get a similar experience with the application output to disk please use the steps below. This practice will allow you to ensure that serving the contents of your dist dir will be closer to how your application will behave when it is deployed. 如果您希望获得与应用程序输出到磁盘相似的体验，请使用以下步骤。 这种做法将允许您确保为您的分发服务的内容提供服务将更接近应用程序部署时的行为。

Environment Setup 环境设置

Install a web server 安装一个webserver

You will not be using webpack-dev-server, so you will need to install a web server for the browser to request the application. There are many to choose from but a good one to try is lite-server as it will auto-reload your browser when new files are output.

您不会使用webpack-dev-server，因此您需要安装浏览器的Web服务器才能请求应用程序。 有很多可供选择，但一个很好的尝试是lite-server，因为它会在输出新文件时自动重新加载浏览器。

Usage

You will need two terminals to get the live-reload experience. The first will run the build in a watch mode to compile the application to the dist folder. The second will run the web server against the dist folder. The combination of these two processes will mimic the same behavior of ng serve. 您将需要两个终端来获得实时重新加载的体验。 第一个将以监视模式运行构建，以将应用程序编译到dist文件夹。 第二个将针对dist文件夹运行Web服务器。 这两个过程的组合将模仿ng服务的相同行为。

1st terminal - Start the build

ng build --watch

2nd terminal - Start the web server

lite-server --baseDir="dist"

When using lite-server the default browser will open to the appropriate URL. 使用lite-server时，默认浏览器将打开相应的URL。

[Christian-Yang]

https://github.com/angular/angular-cli/wiki/stories-global-lib

Global Library Installation全局的类库安装

Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the apps[0].scripts and apps[0].styles properties of .angular-cli.json.

需要将一些JavaScript库添加到全局范围中，并像脚本标签一样加载。 我们可以使用.angular-cli.json.的apps[0] .scripts和apps [0] .styles属性来实现。

As an example, to use Bootstrap 4 this is what you need to do: 例如，要使用Bootstrap 4，您需要做的是：

First install Bootstrap from npm: 首先从npm安装Bootstrap： npm install bootstrap@next

Then add the needed script files to apps[0].scripts: 然后将所需的脚本文件添加到 apps[0] .scripts：

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Finally add the Bootstrap CSS to the apps[0].styles array: 最后将Bootstrap CSS添加到apps [0] .styles数组中：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app. 如果您正在运行，重新启动服务，并且Bootstrap 4应该在您的应用程序上工作。

[Christian-Yang]

Global scripts 全局脚本

You can add Javascript files to the global scope via the apps[0].scripts property in .angular-cli.json. These will be loaded exactly as if you had added them in a Githubissues.

Githubissues is a development platform for aggregating issues.