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模块的加载阶段-应用在此时还没有启动 ...
随机推荐
- java的自定义异常类
编写自定义异常类的模式 编写自定义异常类实际上是继承一个Exception标准异常类,用新定义的异常处理信息覆盖原有信息的过程.常用的编写自定义异常类的模式如下: public classCustom ...
- OO的片段,继承与组合,继承的优点与目的,虚机制在构造函数中不工作
摘自C++编程思想: ------------------------------ 继承与组合:接口的重用 ------------------------------- 继承和组合都允许由已存在的类 ...
- redis09---redis 服务器端命令
redis 服务器端命令 db0,db1,db2是数据库,外层是服务器,服务器下面有20个数据库. :>time ) "" //多少秒 ) "" //多少 ...
- 学习js所必须要知道的一些
1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...
- linq to xml There are multiple root elements.
添加xml结点的时候 var temp2 = temp1.Element("staticContent"); if (temp2 != null) { string str = & ...
- Java 远程调用之Hessian简例
1. [代码]1.服务接口(Hello.java) package server; public interface Hello { String hello(String name);}2. [代码 ...
- maven实战(5)-- settings.xml的配置
哈哈 查看maven的官方文档最权威:http://maven.apache.org/settings.html
- SPOJ:K-Query Online(归并树)
Given a sequence of n numbers a1, a2, ..., an and a number of k-queries. A k-query is a triple (i, j ...
- c++11实现DLL帮助类
用过DLL的人都会发现,在C++中调用dll中的函数有点繁琐,调用过程如下:在加载dll后还要定义一个对应的函数指针类型,接着调用GetProcAddress获取函数地址,再转成函数指针,最后调用函数 ...
- InstallShield 12 豪华版+破解版 下载
InstallShield 12 豪华版+破解版 下载 2009-07-09 19:18:30| 分类: 默认分类|字号 订阅 InstallShield 12 豪华版+破解版 下载 下载方 ...