安装Angular CLI

npm install -g @angular/cli

1

生成初始程序

ng new my-app

1

必须有一个程序名，没办法生成到当前文件夹

运行

cd my-app
ng serve --open

12

使用 bootstrap

npm i bootstrap

1

在 angular.json 修改 projects > my-app > architect > build > options > styles 节点

最前面加上 "node_modules/bootstrap/dist/css/bootstrap.css",

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.css",
    "node_modules/@fortawesome/fontawesome-free/css/all.css",
    "src/styles.scss"
],

12345

或者使用 ng-bootstrap

ng add @ng-bootstrap/ng-bootstrap

1

这样就不需要手动去添加样式了

使用 fontawesome

npm i @fortawesome/fontawesome-free

1

引用 css 同上

引用其他包的样式和脚本

"assets": [
    "src/favicon.ico",
    "src/assets"
],
"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.css",
    "node_modules/@fortawesome/fontawesome-free/css/all.css",
    "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
    "node_modules/ngx-toastr/toastr.css",
    "src/styles.scss"
],
"scripts": [
    "node_modules/pace-js/pace.min.js"
]

1234567891011121314

css

在 angular.json 修改 projects > my-app > architect > build > options > styles 节点加上 css 文件相对路径

js

在 angular.json 修改 projects > my-app > architect > build > options > scripts 节点加上 js 文件相对路径

其他文件例如图片

在 angular.json 修改 projects > my-app > architect > build > options > assets 节点加上文件相对路径

转载请保留原文链接： https://zodream.cn/blog/id/135.html