发表于: 2017-06-26 23:19:46
1 838
今天完成的事情:
angular引入第三方库:
Material Desing Lite是Google为web开发的一套基于Material Design的样式库。有人已经帮我们封装成了比较好用的组件模块了,组件模块的好处是可以使模板写起来更简洁,而且易于扩展。
打开powershell管理员模式在项目路径底下输入npm install angular2-mdl --save
–save 就是将要安装的依赖写到package.json的dependencies 对象中去
–save-dev是将要安装的依赖写到package.json的devDependencies 对象中去
在根目录package.json这个文件列出了项目所使用的第三方依赖包。我们在创建新项目的时候默认会给我们下载一些包,这些是Angular自带的,存放在node_modules目录中。
package.json中有dependencies对象和devDependencies。 devDependencies 里面的插件只用于开发环境,不用于生产环境,而 dependencies 是需要发布到生产环境的。
根目录angular-cli.json这个文件是 Angular命令行工具的配置文件,我们来修改它:
styles中就是我们要引入的css 文件
scripts中就是我们要引入的js 文件
再引入该文件的路径,依赖包是放在node_modules目录中的。
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css"><script src="/node_modules/material-design-lite/material.min.js"></script><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
如果是jquery的话还不能直接使用jquery,因为Angular是使用TypeScript语言开发的,而jquery本质是JavaScript,TypeScript是不能直接使用的。我们需要先安装类型描述文件,让TypeScript认识jquery。
安装类型描述文件
通过命令:npm install @types/name –save-dev
安装完成后,修改tsconfig.json文件,将jquery添加到types数组中。
明天计划的事情:
继续学习angular
问题:
依赖包一定要在项目目录下安装,不要全局安装。命令行工具必须要管理员权限。node.js不要装c盘啊!
还有一个大坑:
The problems occurs when trying to export a file not present on the disk.
While import error show a clear error message:
import { MissingFile } from './MissingFile';
ERROR in /app/src/app/components/somecomponent/index.ts (6,29): Cannot find module './MissingFile'.)
webpack: Failed to compile.
The error during export does not help :
export { MissingFile } from './MissingFile';
webpack: Compiling...
86% hashingcrypto.js:74
this._handle.update(data, encoding);
^
TypeError: Data must be a string or a buffer
at TypeError (native)
at Hash.update (crypto.js:74:16)
at HarmonyExportImportedSpecifierDependency.updateHash (/app/node_modules/webpack/lib/dependencies/HarmonyExportImportedSpecifierDependency.js:144:8)
at /app/node_modules/webpack/lib/DependenciesBlock.js:33:5
at Array.forEach (native)
at NormalModule.DependenciesBlock.updateHash (/app/node_modules/webpack/lib/DependenciesBlock.js:32:20)
at NormalModule.Module.updateHash (/app/node_modules/webpack/lib/Module.js:162:41)
at NormalModule.updateHash (/app/node_modules/webpack/lib/NormalModule.js:327:30)
at modules.forEach.m (/app/node_modules/webpack/lib/Chunk.js:253:31)
at Array.forEach (native)
at Chunk.updateHash (/app/node_modules/webpack/lib/Chunk.js:253:16)
at Compilation.createHash (/app/node_modules/webpack/lib/Compilation.js:989:10)
at sealPart2 (/app/node_modules/webpack/lib/Compilation.js:580:9)
at next (/app/node_modules/tapable/lib/Tapable.js:138:11)
at Compilation.<anonymous> (/app/node_modules/webpack/lib/ProgressPlugin.js:110:5)
at next (/app/node_modules/tapable/lib/Tapable.js:140:14)
at ExtractTextPlugin.<anonymous> (/app/node_modules/extract-text-webpack-plugin/index.js:297:5)
at /app/node_modules/async/dist/async.js:356:16
at iteratorCallback (/app/node_modules/async/dist/async.js:936:13)
at /app/node_modules/async/dist/async.js:840:16
at /app/node_modules/extract-text-webpack-plugin/index.js:281:6
at /app/node_modules/async/dist/async.js:356:16
at iteratorCallback (/app/node_modules/async/dist/async.js:936:13)
at /app/node_modules/async/dist/async.js:840:16
at /app/node_modules/extract-text-webpack-plugin/index.js:278:13
at /app/node_modules/async/dist/async.js:3025:16
at eachOfArrayLike (/app/node_modules/async/dist/async.js:941:9)
at eachOf (/app/node_modules/async/dist/async.js:991:5)
at Object.eachLimit (/app/node_modules/async/dist/async.js:3089:3)
at /app/node_modules/extract-text-webpack-plugin/index.js:252:11
at /app/node_modules/async/dist/async.js:3025:16
at eachOfArrayLike (/app/node_modules/async/dist/async.js:941:9)
at eachOf (/app/node_modules/async/dist/async.js:991:5)
at Object.eachLimit (/app/node_modules/async/dist/async.js:3089:3)
at ExtractTextPlugin.<anonymous> (/app/node_modules/extract-text-webpack-plugin/index.js:249:10)
at Compilation.applyPluginsAsyncSeries (/app/node_modules/tapable/lib/Tapable.js:142:13)
at Compilation.seal (/app/node_modules/webpack/lib/Compilation.js:545:8)
at /app/node_modules/webpack/lib/Compiler.js:474:16
at /app/node_modules/tapable/lib/Tapable.js:225:11
at _addModuleChain (/app/node_modules/webpack/lib/Compilation.js:452:11)
at processModuleDependencies.err (/app/node_modules/webpack/lib/Compilation.js:423:13)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
这个报错怎么解决呢?如下:
Here is a workaround to help you to find the wrong import.
Let's say you have some wrong import somewhere in your code:
export { Some } from './missing-file';
You can improve the error message by manually editing the following file: node_modules/webpack/lib/dependencies/HarmonyExportImportedSpecifierDependency.js and insert some log at line 144:
updateHash(hash) { super.updateHash(hash); const hashValue = this.getHashValue(this.importDependency.module); if (this.importDependency.module != null){ // console.log('Module resource: ', this.importDependency.module.resource);
}else{ console.log('\nFile not found: ', this.importDependency);
} hash.update(hashValue);
}
So you get this more explicit message:
86% hashing
File not found: HarmonyImportDependency {
module: null,
request: './missing-file',
userRequest: './missing-file',
range: [ 562, 600 ],
importedVar: '__WEBPACK_IMPORTED_MODULE_8__missing_file__',
loc: SourceLocation { index: -1 } }
crypto.js:74
this._handle.update(data, encoding);
^
TypeError: Data must be a string or a buffer
at TypeError (native)
at Hash.update (crypto.js:74:16)
at HarmonyExportImportedSpecifierDependency.updateHash (/app/node_modules/webpack/lib/dependencies/H
最后:
Finally, search for './missing-file' string in your project to find which file contains the wrong import.
收获:
如上。
评论