发表于： 2017-06-26 23:19:46
1 835
今天完成的事情：
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.
收获：
如上。
返回列表
评论