npm install -g @angular/cli
ng new my-app
npm ERR! path E:\aGit-project\myapp\node_modules\.staging\typescript-53141799\lib\tsserverlibrary.js
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink 'E:\aGit-project\myapp\node_modules\.staging\typescript-53141799\lib\tsserverlibrary.js'
npm ERR! { Error: EPERM: operation not permitted, unlink 'E:\aGit-project\myapp\node_modules\.staging\typescript-53141799\lib\tsserverlibrary.js'
npm ERR! cause:
npm ERR! { Error: EPERM: operation not permitted, unlink 'E:\aGit-project\myapp\node_modules\.staging\typescript-53141799\lib\tsserverlibrary.js'
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'E:\\aGit-project\\myapp\\node_modules\\.staging\\typescript-53141799\\lib\\tsserverlibrary.js' },
npm ERR! stack: 'Error: EPERM: operation not permitted, unlink \'E:\\aGit-project\\myapp\\node_modules\\.staging\\typescript-53141799\\lib\\tsserverlibrary.js\'',
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'E:\\aGit-project\\myapp\\node_modules\\.staging\\typescript-53141799\\lib\\tsserverlibrary.js',
npm ERR! parent: 'myapp' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\zj\AppData\Roaming\npm-cache\_logs\2019-03-08T14_47_30_775Z-debug.log
Package install failed, see above.
报错
卸载@anglar/cli
npm uninstall -g @angular/cli
清除缓存
npm cache clean --force
重新安装angular
npm install -g @angular/cli
发现还是不行,后来看了一下报错信息,发现在git目录下,所以报没有权限,所以在新的干净目录下重新创建即可
运行项目:
ng serve
打开浏览器:
src是开发最常用到的目录,以下是其结构:
app/app.component.{ts,html,css,spec.ts} 整个应用的根组件
assets/* 存放图片文件夹
environments/* 定义全局的环境变量,将用户开发和产品环境
index.html 主要的的html文件, serve的时候会读取此文件,并且载入css,js文件,通常不需要更改此文件
main.ts 主要的入口文件,在编译运行时,会读取此文件,编译模式包括JIT compiler(开发环境) 和 AOTCompiler(产品环境 –aot)
polyfills.ts 不同的浏览器对个别API的支持程度不同,需要加入前缀,保证在特定的浏览器能够正常运行,在此文件中,会引入zong.js
test.ts 单元测试的入口文件
tsconfig.{app spec}.json
根目录下的目录结构:
e2e/ 独立于应用的点对点测试文件夹,包含独立的配置文件
.angular-cli.json Angular CLI命令配置文件
.editorconfig 编辑工具的基础配置文件,保证每个人在自己的编辑工具中能够拥有相同的基础配置,比如字符,缩进等等
karma.conf.js karma 单元测试配置文件,应用于ng test命令
package.json 整个应用程序依赖库的配置文件
protractor.conf.js 针对于protractor点对点测试的配置文件, 执行命令 ng e2e
tslint.json 代码检查配置文件,执行ng lint, 团队代码更加规范化
tsconfig.json 针对于IDE的type script编译配置文件, IDE会根据这个配置文件提供帮助
新建一个名叫login的组件
ng generate component login
修改app.component.html,加入刚才的组件
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<app-login></app-login>
<router-outlet></router-outlet>
打开浏览器:
模块就是提供相对独立功能的功能块,每块聚焦于一个特定业务领域。Angular内建的很多库是以模块形式提供的,比如FormsModule封装了表单处理,HttpModule封装了Http的处理等等。
每个Angular应用至少有一个模块类 —— 根模块,我们将通过引导根模块来启动应用。按照约定,根模块的类名叫做AppModule,被放在 app.module.ts
文件中。我们这个例子中的根模块位于 src\app\app.module.ts
参考:
手机扫一扫
移动阅读更方便
你可能感兴趣的文章