发表于: 2017-06-26 23:19:46

1 837


今天完成的事情:


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">


"styles": [
"styles.scss",
"../node_modules/datatables.net-dt/css/jquery.dataTables.css",
"../node_modules/material-design-lite/material.min.css",
"https://fonts.googleapis.com/icon?family=Material+Icons"
],
"scripts": [
"../node_modules/tinymce/tinymce.js",
"../node_modules/tinymce/themes/modern/theme.js",
"../node_modules/tinymce/plugins/advlist/plugin.js",
"../node_modules/tinymce/plugins/autolink/plugin.js",
"../node_modules/tinymce/plugins/lists/plugin.js",
"../node_modules/tinymce/plugins/link/plugin.js",
"../node_modules/tinymce/plugins/image/plugin.js",
"../node_modules/tinymce/plugins/charmap/plugin.js",
"../node_modules/tinymce/plugins/print/plugin.js",
"../node_modules/tinymce/plugins/preview/plugin.js",
"../node_modules/tinymce/plugins/hr/plugin.js",
"../node_modules/tinymce/plugins/anchor/plugin.js",
"../node_modules/tinymce/plugins/pagebreak/plugin.js",
"../node_modules/tinymce/plugins/searchreplace/plugin.js",
"../node_modules/tinymce/plugins/wordcount/plugin.js",
"../node_modules/tinymce/plugins/visualblocks/plugin.js",
"../node_modules/tinymce/plugins/visualchars/plugin.js",
"../node_modules/tinymce/plugins/code/plugin.js",
"../node_modules/tinymce/plugins/codesample/plugin.js",
"../node_modules/tinymce/plugins/fullscreen/plugin.js",
"../node_modules/tinymce/plugins/insertdatetime/plugin.js",
"../node_modules/tinymce/plugins/media/plugin.js",
"../node_modules/tinymce/plugins/nonbreaking/plugin.js",
"../node_modules/tinymce/plugins/save/plugin.js",
"../node_modules/tinymce/plugins/table/plugin.js",
"../node_modules/tinymce/plugins/contextmenu/plugin.js",
"../node_modules/tinymce/plugins/directionality/plugin.js",
"../node_modules/tinymce/plugins/emoticons/plugin.js",
"../node_modules/tinymce/plugins/template/plugin.js",
"../node_modules/tinymce/plugins/paste/plugin.js",
"../node_modules/tinymce/plugins/textcolor/plugin.js",
"../node_modules/tinymce/plugins/colorpicker/plugin.js",
"../node_modules/tinymce/plugins/textpattern/plugin.js",
"../node_modules/tinymce/plugins/imagetools/plugin.js",
"../node_modules/jquery/dist/jquery.js",
"../node_modules/jquery-ui-dist/jquery-ui.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/datatables.net/js/jquery.dataTables.js",
"../node_modules/material-design-lite/material.min.js"
],


如果是jquery的话还不能直接使用jquery,因为Angular是使用TypeScript语言开发的,而jquery本质是JavaScript,TypeScript是不能直接使用的。我们需要先安装类型描述文件,让TypeScript认识jquery。


安装类型描述文件 

通过命令:npm install @types/name –save-dev

安装完成后,修改tsconfig.json文件,将jquery添加到types数组中。

{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@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.


收获:

如上。


返回列表 返回列表
评论

    分享到