Angular2 的material中 引用了 hammerjs,遇到Could not find HammerJS错误,正确的步骤如下:

需要在如下位置增加 对material 和 hammerjs的引用

1. package.json

  1. {
  2. "name": "housekeeping-ui",
  3. "version": "1.0.0",
  4. "description": "housekeeping-ui with node.js and angular2",
  5. "scripts": {
  6. "build": "tsc -p src/",
  7. "build:watch": "tsc -p src/ -w",
  8. "build:e2e": "tsc -p e2e/",
  9. "serve": "lite-server -c=bs-config.json",
  10. "serve:e2e": "lite-server -c=bs-config.e2e.json",
  11. "prestart": "npm run build",
  12. "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
  13. "pree2e": "npm run build:e2e",
  14. "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
  15. "preprotractor": "webdriver-manager update",
  16. "protractor": "protractor protractor.config.js",
  17. "pretest": "npm run build",
  18. "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
  19. "pretest:once": "npm run build",
  20. "test:once": "karma start karma.conf.js --single-run",
  21. "lint": "tslint ./src/**/*.ts -t verbose"
  22. },
  23. "keywords": [],
  24. "author": "",
  25. "license": "MIT",
  26. "dependencies": {
  27. "@angular/common": "~2.4.0",
  28. "@angular/compiler": "~2.4.0",
  29. "@angular/core": "~2.4.0",
  30. "@angular/forms": "~2.4.0",
  31. "@angular/http": "~2.4.0",
  32. "@angular/material": "^2.0.0-beta.2",
  33. "@angular/platform-browser": "~2.4.0",
  34. "@angular/platform-browser-dynamic": "~2.4.0",
  35. "@angular/router": "~3.4.0",
  36. "angular-in-memory-web-api": "~0.2.4",
  37. "core-js": "^2.4.1",
  38. "hammerjs": "^2.0.8",
  39. "rxjs": "5.0.1",
  40. "systemjs": "0.19.40",
  41. "zone.js": "^0.7.4"
  42. },
  43. "devDependencies": {
  44. "concurrently": "^3.2.0",
  45. "lite-server": "^2.2.2",
  46. "typescript": "~2.0.10",
  47. "canonical-path": "0.0.2",
  48. "tslint": "^3.15.1",
  49. "lodash": "^4.16.4",
  50. "jasmine-core": "~2.4.1",
  51. "karma": "^1.3.0",
  52. "karma-chrome-launcher": "^2.0.0",
  53. "karma-cli": "^1.0.1",
  54. "karma-jasmine": "^1.0.2",
  55. "karma-jasmine-html-reporter": "^0.2.2",
  56. "protractor": "~4.0.14",
  57. "rimraf": "^2.5.4",
  58. "@types/node": "^6.0.46",
  59. "@types/jasmine": "2.5.36"
  60. },
  61. "repository": {}
  62. }

2. app.module.ts

  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { MaterialModule} from '@angular/material';
  4. import 'hammerjs' ;
  5.  
  6. import { AppComponent } from './app.component';
  7.  
  8. @NgModule({
  9. imports: [ BrowserModule, MaterialModule ],
  10. declarations: [ AppComponent ],
  11. bootstrap: [ AppComponent ]
  12.  
  13. })
  14. export class AppModule { }

3.system.config.js

  1. /**
  2. * System configuration for Angular samples
  3. * Adjust as necessary for your application needs.
  4. */
  5. (function (global) {
  6. System.config({
  7. paths: {
  8. // paths serve as alias
  9. 'npm:': 'node_modules/'
  10. },
  11. // map tells the System loader where to look for things
  12. map: {
  13. // our app is within the app folder
  14. app: 'app',
  15.  
  16. // angular bundles
  17. '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  18. '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  19. '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  20. '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  21. '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  22. '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  23. '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  24. '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  25.  
  26. // other libraries
  27. 'rxjs': 'npm:rxjs',
  28. 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
  29. '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
  30. 'hammerjs': 'npm:hammerjs/hammer.js'
  31. },
  32. // packages tells the System loader how to load when no filename and/or no extension
  33. packages: {
  34. app: {
  35. defaultExtension: 'js'
  36. },
  37. rxjs: {
  38. defaultExtension: 'js'
  39. }
  40. }
  41. });
  42. })(this);

4.index.html 添加 Material+Icons

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Angular QuickStart</title>
  5. <base href="/">
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="stylesheet" href="styles.css">
  9.  
  10. <!-- Polyfill(s) for older browsers -->
  11. <script src="node_modules/core-js/client/shim.min.js"></script>
  12.  
  13. <script src="node_modules/zone.js/dist/zone.js"></script>
  14. <script src="node_modules/systemjs/dist/system.src.js"></script>
  15.  
  16. <script src="systemjs.config.js"></script>
  17.  
  18. <!--Angular2 Material+Icons -->
  19. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  20.  
  21. <script>
  22. System.import('main.js').catch(function(err){ console.error(err); });
  23. </script>
  24. </head>
  25.  
  26. <body>
  27. <my-app>Loading AppComponent content here ...</my-app>
  28. </body>
  29. </html>

至此,修改 app.component.ts即可测试通过了。

angular 2 angular quick start Could not find HammerJS的更多相关文章

  1. ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频

    视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...

  2. angular+selecte2(angular ng-repeat渲染)

    一.页面代码 <select id="sponsorId" select2 ng-model="sponsorSelectedObj" ng-change ...

  3. [Angular 2] Angular 2 Smart Components vs Presentation Components

    Both Smart Components and Presentation Components receive data from Services in entirely different w ...

  4. Intergate flot with Angular js ——Angular 图形报表

    下面这篇文章最终的结论就是 Flot 插件 结合 Angular 的Directive 来处理 图表的绘制 给出github上的一个demo源码.https://gist.github.com/fly ...

  5. Angular - - ngRoute Angular自带的路由

    ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信 ...

  6. @angular/cli (angular脚手架) 如何降级

    1.卸载 npm uninstall -g @angular/cli 2.清除缓存 npm cache verify 3.查看是否卸载成功 ng v //如果显示ng 不是内部或外部的指令 则证明卸载 ...

  7. [Angular] Use Angular components in AngularJS applications with Angular Elements

    When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...

  8. 简话Angular 08 Angular ajax

    一句话: 它们Angular框架声明周期的各个阶段,常规约定各专注于特定功能,经过处理也可以互相替换 1.功能细分简解 $http 类似JQuery ajax,支持promise $http.json ...

  9. 简话Angular 07 Angular config-run-service-factory-provider-constant-value

    一句话: 它们Angular框架声明周期的各个阶段,常规约定各专注于特定功能,经过处理也可以互相替换 1.功能细分简解 config Angular module模块的加载阶段-应用在此时还没有启动 ...

随机推荐

  1. IE8与vs2005冲突 添加MFC类向导错误解决方法—— internet explorer脚本错误

    IE8 与 VS2005 冲突问题解决方法 问题表现为: MFC类向导添加类时,出现“当前页面的脚本发生错误”,进入MFC类向导后上方有一个小黄条“此网站的某个加载项运行失败.请检查"Int ...

  2. SpringMVC -- 第一个简单的程序

    学习springMVC,我们来记录下第一个HelloWord的程序 首先.我们组织须要的jar包 commons-logging-1.1.3.jar spring-aop-4.1.7.RELEASE. ...

  3. Educational Codeforces Round 9 E. Thief in a Shop NTT

    E. Thief in a Shop   A thief made his way to a shop. As usual he has his lucky knapsack with him. Th ...

  4. monitor and move the log content to our big data system

    Apache Flume HDFS Sink Tutorial | HowToProgram https://howtoprogram.xyz/2016/08/01/apache-flume-hdfs ...

  5. (C)strcpy ,strncpy与strlcpy

    1. 背景 好多人已经知道利用strncpy替代strcpy来防止缓冲区越界. 但是如果还要考虑运行效率的话,也许strlcpy是一个更好的方式. 2. strcpy strcpy 是依据 /0 作为 ...

  6. MongoDB3.6.3 windows安装配置、启动

    1.官网下载MongoDB的安装包 2.安装中一直Next即可安装成功,不过需要注意的是: 可以自定义安装,选择安装路径 值得注意的还有,安装中因为下载compass十分缓慢.把下面默认选中的勾去掉 ...

  7. Parameter 'username' not found. Available parameters are [1, 0, param1, param2]

    只要把dao层的***Mapper.java代码的参数加上@param 才可以 修改前的代码 public User selectLogin(String username,String passwo ...

  8. OpenMediaVault Redmine 安装

    /******************************************************************** * OpenMediaVault Redmine 安装 * ...

  9. [Selenium] IOS 之 appium

    从 Selenium 的官方文档来看,推荐用户使用 ios-driver 或 appium 而不是官方发布的 iPone Driver. 他们的地址分别是: http://ios-driver.git ...

  10. 空间数据索引RTree完全解析及Java实现

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/MongChia1993/article/details/69941783 第一部分 空间数据的背景介 ...