[英]Importing angular2-cookie in angular2 rc5 project
I'm trying to import the angular2 cookie module in angular2 rc5 project I just started. 我正在尝试在刚开始的angular2 rc5项目中导入angular2 cookie模块。
I installed the module with npm 我用npm安装了模块
npm install angular2-cookie
edited my angular-cli-build.js file : 编辑了我的angular-cli-build.js文件:
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)',
'materialize-css/bin/materialize.css',
'materialize-css/bin/materialize.js',
'socket.io-client/socket.io.js',
'angular2-cookie/**/*.+(ts|js|js.map)'
]
});
};
ran ng build 运行构建
the angular2-cookie folder is created in my dist/vendor folder 在我的dist / vendor文件夹中创建了angular2-cookie文件夹
my system-config.ts looks like this 我的system-config.ts看起来像这样
"use strict";
// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
};
/** User packages configuration. */
const packages: any = {
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/forms',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
/** @cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
"socket.io-client": "node_modules/socket.io-client/socket.io.js",
"angular2-cookie": 'vendor/angular2-cookie'
},
packages: cliSystemConfigPackages,
"socket.io-client": {"defaultExtension": "js"},
'angular2-cookie' : { defaultExtension: 'js',main: 'core.js'}
});
// Apply the user's configuration.
System.config({ map, packages });
I managed to import it and add some code in my component file 我设法将其导入并在组件文件中添加了一些代码
import {CookieService} from 'angular2-cookie/core';
but for some reason when I try to ng serve the application , it failed to load with the following errors 但是由于某些原因,当我尝试ng服务该应用程序时,它无法加载并出现以下错误
zone.js:101 GET http://localhost:4200/vendor/angular2-cookie/core 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM308:3fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1735ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous function) @ system.src.js:3333(anonymous function) @ system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function) @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
2016-09-01 10:48:02.373 zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/angular2-cookie/core
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)
at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
Error loading http://localhost:4200/vendor/angular2-cookie/core as "angular2-cookie/core" from http://localhost:4200/app/app.component.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/angular2-cookie/core(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
2016-09-01 10:48:02.378 zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/angular2-cookie/core(…)
looks like the angular2 cookie folder is not accessible (or not properly served) , but can't find why. 看来angular2 cookie文件夹不可访问(或无法正确提供),但找不到原因。
my package.json dependencies : 我的package.json依赖项:
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"angular2-cookie": "^1.2.2",
"async": "^2.0.1",
"clone": "^1.0.2",
"es6-shim": "0.35.1",
"express": "^4.14.0",
"materialize-css": "^0.97.7",
"moment": "^2.14.1",
"redis": "^2.6.2",
"reflect-metadata": "0.1.3",
"rethinkdb": "^2.3.2",
"rxjs": "^5.0.0-beta.6",
"socket.io": "^1.4.8",
"socket.io-client": "^1.4.8",
"systemjs": "0.19.37",
"typings": "^1.3.1",
"zone.js": "0.6.17"
},
"devDependencies": {
"angular-cli": "1.0.0-beta.10",
"codelyzer": "0.0.20",
"ember-cli-inject-live-reload": "1.4.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "0.5.5",
"tslint": "3.11.0",
"typescript": "1.8.10",
"typings": "1.3.1"
}
}
You need to set map and packages in these objects. 您需要在这些对象中设置地图和数据包。 Do not modify anything below these lines. 请勿在这些行下方修改任何内容。
/** Map relative paths to URLs. */
const map: any = {
'angular2-cookie': 'vendor/angular2-cookie'
};
/** User packages configuration. */
const packages: any = {
'angular2-cookie': {main: 'core.js', defaultExtension: 'js'},
};
Note that currently angular2-cookie
doesn't work with rc6, but the new version is on the way. 请注意,目前angular2-cookie
不适用于angular2-cookie
,但是新版本正在开发中。 I think it will be released today or tomorrow. 我认为它将在今天或明天发布。
You did mapping in your config file "angular2-cookie": 'vendor/angular2-cookie'
, so you need to call import {CookieService} from 'angular2-cookie';
您确实在配置文件"angular2-cookie": 'vendor/angular2-cookie'
映射了"angular2-cookie": 'vendor/angular2-cookie'
,因此您需要import {CookieService} from 'angular2-cookie';
调用import {CookieService} from 'angular2-cookie';
Should work, otherwise check this folder /vendor/angular2-cookie/
, and check is there a core.js
file which you setted as default for this module in the System.config 'angular2-cookie' : { defaultExtension: 'js',main: 'core.js'}
. 应该可以,否则请检查此文件夹/vendor/angular2-cookie/
,并检查是否在System.config'angular2 'angular2-cookie' : { defaultExtension: 'js',main: 'core.js'}
将此模块设置为默认的core.js
文件'angular2-cookie' : { defaultExtension: 'js',main: 'core.js'}
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.