angular 2 angular quick start Could not find HammerJS
Angular2 的material中 引用了 hammerjs,遇到Could not find HammerJS错误,正确的步骤如下:
需要在如下位置增加 对material 和 hammerjs的引用
1. package.json
- {
- "name": "housekeeping-ui",
- "version": "1.0.0",
- "description": "housekeeping-ui with node.js and angular2",
- "scripts": {
- "build": "tsc -p src/",
- "build:watch": "tsc -p src/ -w",
- "build:e2e": "tsc -p e2e/",
- "serve": "lite-server -c=bs-config.json",
- "serve:e2e": "lite-server -c=bs-config.e2e.json",
- "prestart": "npm run build",
- "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
- "pree2e": "npm run build:e2e",
- "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
- "preprotractor": "webdriver-manager update",
- "protractor": "protractor protractor.config.js",
- "pretest": "npm run build",
- "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
- "pretest:once": "npm run build",
- "test:once": "karma start karma.conf.js --single-run",
- "lint": "tslint ./src/**/*.ts -t verbose"
- },
- "keywords": [],
- "author": "",
- "license": "MIT",
- "dependencies": {
- "@angular/common": "~2.4.0",
- "@angular/compiler": "~2.4.0",
- "@angular/core": "~2.4.0",
- "@angular/forms": "~2.4.0",
- "@angular/http": "~2.4.0",
- "@angular/material": "^2.0.0-beta.2",
- "@angular/platform-browser": "~2.4.0",
- "@angular/platform-browser-dynamic": "~2.4.0",
- "@angular/router": "~3.4.0",
- "angular-in-memory-web-api": "~0.2.4",
- "core-js": "^2.4.1",
- "hammerjs": "^2.0.8",
- "rxjs": "5.0.1",
- "systemjs": "0.19.40",
- "zone.js": "^0.7.4"
- },
- "devDependencies": {
- "concurrently": "^3.2.0",
- "lite-server": "^2.2.2",
- "typescript": "~2.0.10",
- "canonical-path": "0.0.2",
- "tslint": "^3.15.1",
- "lodash": "^4.16.4",
- "jasmine-core": "~2.4.1",
- "karma": "^1.3.0",
- "karma-chrome-launcher": "^2.0.0",
- "karma-cli": "^1.0.1",
- "karma-jasmine": "^1.0.2",
- "karma-jasmine-html-reporter": "^0.2.2",
- "protractor": "~4.0.14",
- "rimraf": "^2.5.4",
- "@types/node": "^6.0.46",
- "@types/jasmine": "2.5.36"
- },
- "repository": {}
- }
2. app.module.ts
- import { NgModule } from '@angular/core';
- import { BrowserModule } from '@angular/platform-browser';
- import { MaterialModule} from '@angular/material';
- import 'hammerjs' ;
- import { AppComponent } from './app.component';
- @NgModule({
- imports: [ BrowserModule, MaterialModule ],
- declarations: [ AppComponent ],
- bootstrap: [ AppComponent ]
- })
- export class AppModule { }
3.system.config.js
- /**
- * System configuration for Angular samples
- * Adjust as necessary for your application needs.
- */
- (function (global) {
- System.config({
- paths: {
- // paths serve as alias
- 'npm:': 'node_modules/'
- },
- // map tells the System loader where to look for things
- map: {
- // our app is within the app folder
- app: 'app',
- // angular bundles
- '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
- '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
- '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
- '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
- '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
- '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
- '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
- '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
- // other libraries
- 'rxjs': 'npm:rxjs',
- 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
- '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
- 'hammerjs': 'npm:hammerjs/hammer.js'
- },
- // packages tells the System loader how to load when no filename and/or no extension
- packages: {
- app: {
- defaultExtension: 'js'
- },
- rxjs: {
- defaultExtension: 'js'
- }
- }
- });
- })(this);
4.index.html 添加 Material+Icons
- <!DOCTYPE html>
- <html>
- <head>
- <title>Angular QuickStart</title>
- <base href="/">
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="styles.css">
- <!-- Polyfill(s) for older browsers -->
- <script src="node_modules/core-js/client/shim.min.js"></script>
- <script src="node_modules/zone.js/dist/zone.js"></script>
- <script src="node_modules/systemjs/dist/system.src.js"></script>
- <script src="systemjs.config.js"></script>
- <!--Angular2 Material+Icons -->
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- <script>
- System.import('main.js').catch(function(err){ console.error(err); });
- </script>
- </head>
- <body>
- <my-app>Loading AppComponent content here ...</my-app>
- </body>
- </html>
至此,修改 app.component.ts即可测试通过了。
angular 2 angular quick start Could not find HammerJS的更多相关文章
- ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频
视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...
- angular+selecte2(angular ng-repeat渲染)
一.页面代码 <select id="sponsorId" select2 ng-model="sponsorSelectedObj" ng-change ...
- [Angular 2] Angular 2 Smart Components vs Presentation Components
Both Smart Components and Presentation Components receive data from Services in entirely different w ...
- Intergate flot with Angular js ——Angular 图形报表
下面这篇文章最终的结论就是 Flot 插件 结合 Angular 的Directive 来处理 图表的绘制 给出github上的一个demo源码.https://gist.github.com/fly ...
- Angular - - ngRoute Angular自带的路由
ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信 ...
- @angular/cli (angular脚手架) 如何降级
1.卸载 npm uninstall -g @angular/cli 2.清除缓存 npm cache verify 3.查看是否卸载成功 ng v //如果显示ng 不是内部或外部的指令 则证明卸载 ...
- [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 ...
- 简话Angular 08 Angular ajax
一句话: 它们Angular框架声明周期的各个阶段,常规约定各专注于特定功能,经过处理也可以互相替换 1.功能细分简解 $http 类似JQuery ajax,支持promise $http.json ...
- 简话Angular 07 Angular config-run-service-factory-provider-constant-value
一句话: 它们Angular框架声明周期的各个阶段,常规约定各专注于特定功能,经过处理也可以互相替换 1.功能细分简解 config Angular module模块的加载阶段-应用在此时还没有启动 ...
随机推荐
- IE8与vs2005冲突 添加MFC类向导错误解决方法—— internet explorer脚本错误
IE8 与 VS2005 冲突问题解决方法 问题表现为: MFC类向导添加类时,出现“当前页面的脚本发生错误”,进入MFC类向导后上方有一个小黄条“此网站的某个加载项运行失败.请检查"Int ...
- SpringMVC -- 第一个简单的程序
学习springMVC,我们来记录下第一个HelloWord的程序 首先.我们组织须要的jar包 commons-logging-1.1.3.jar spring-aop-4.1.7.RELEASE. ...
- 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 ...
- 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 ...
- (C)strcpy ,strncpy与strlcpy
1. 背景 好多人已经知道利用strncpy替代strcpy来防止缓冲区越界. 但是如果还要考虑运行效率的话,也许strlcpy是一个更好的方式. 2. strcpy strcpy 是依据 /0 作为 ...
- MongoDB3.6.3 windows安装配置、启动
1.官网下载MongoDB的安装包 2.安装中一直Next即可安装成功,不过需要注意的是: 可以自定义安装,选择安装路径 值得注意的还有,安装中因为下载compass十分缓慢.把下面默认选中的勾去掉 ...
- Parameter 'username' not found. Available parameters are [1, 0, param1, param2]
只要把dao层的***Mapper.java代码的参数加上@param 才可以 修改前的代码 public User selectLogin(String username,String passwo ...
- OpenMediaVault Redmine 安装
/******************************************************************** * OpenMediaVault Redmine 安装 * ...
- [Selenium] IOS 之 appium
从 Selenium 的官方文档来看,推荐用户使用 ios-driver 或 appium 而不是官方发布的 iPone Driver. 他们的地址分别是: http://ios-driver.git ...
- 空间数据索引RTree完全解析及Java实现
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/MongChia1993/article/details/69941783 第一部分 空间数据的背景介 ...