【问题标题】:Importing angular2-cookie in angular2 rc5 project在 angular2 rc5 项目中导入 angular2-cookie
【发布时间】:2017-01-09 04:02:28
【问题描述】:

我正在尝试在我刚开始的 angular2 rc5 项目中导入 angular2 cookie 模块。

我用 npm 安装了模块

npm install angular2-cookie

编辑了我的 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)'
   ]
 });
};

运行构建

angular2-cookie 文件夹是在我的 dist/vendor 文件夹中创建的

我的 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 });

我设法将它导入并在我的组件文件中添加了一些代码

import {CookieService} from 'angular2-cookie/core';

但由于某种原因,当我尝试为应用程序提供服务时,它无法加载并出现以下错误

             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(…)

看起来 angular2 cookie 文件夹不可访问(或未正确提供),但找不到原因。

我的 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"
                        }
                    }

【问题讨论】:

    标签: javascript node.js angular typescript angular2-cookie


    【解决方案1】:

    您需要在这些对象中设置地图和包。不要修改这些行以下的任何内容。

    /** 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'},
    };
    

    请注意,目前angular2-cookie 不适用于 rc6,但新版本正在开发中。我想它会在今天或明天发布。

    【讨论】:

    • 这是我在 system-config.ts 中的确切配置,请检查我的问题,由于某种原因它对我有用,但我无法弄清楚原因。
    • 这不是精确的配置。您的地图和包裹对象是空的。此外,您不应该编辑 Everything underneath this line is managed by the CLI. 下方的任何内容。
    • 好的,终于明白了! .哇哦,模块加载器上的错误配置浪费了很多时间。我怀念用
    • 这是使用预发布前沿库的缺点。但我也认为,这些重大变化不应该出现在候选版本中,而应该出现在 alpha 和 beta 版本中。我只检查了 aurelia 的入门页面,看起来不错。我认为最重要的是,社区支持(第三方库、SO 用户等)将如何围绕 aurelia 增长,看到这一点,我们只需要等待。
    • 你说得对,我从事上一个项目(在 angular 1.x 上)已经 2 年多了,对此我感到非常高兴。现在我正在开始一个新项目,正如我所见angular2 不再处于测试阶段,我想我可以使用它(我可以接受小问题/故障),但我不是超级喜欢破坏 RC 状态的变化:)。希望正式发布后会更好。
    【解决方案2】:

    您在配置文件"angular2-cookie": 'vendor/angular2-cookie' 中进行了映射, 所以你需要打电话给import {CookieService} from 'angular2-cookie';

    应该可以,否则检查此文件夹/vendor/angular2-cookie/,并检查是否有一个core.js 文件,您在System.config 'angular2-cookie' : { defaultExtension: 'js',main: 'core.js'} 中将此模块设置为该模块的默认值。

    【讨论】:

    • 当然,在 dist/vendor/angular2-cookie 文件夹中有一个 core.js 文件。是的,我可以调用 import {CookieService} from 'angular2-cookie';没有任何问题(打字稿文件编译文件),问题只是@执行。
    • 那么日志是什么,当您执行import {CookieService} from 'angular2-cookie'; 时?
    • 没什么特别的,ts文件编译成.js,只有执行时出现问题——我在Visual Studio代码中的组件文件截图:没有错误。 accessdev.s3.amazonaws.com/temp/angular-cookie.png
    • @NicoAD,尝试在导入结束时删除/core,因为您已经在映射中设置了它
    • 现在我收到 TypeScript 错误错误:Typescript 发现以下错误:/mypath/tmp/broccoli_type_script_compiler-input_base_path-gkTiv8yF.tmp/0/src/app/app.component.ts (4, 29 ): 找不到模块 'angular2-cookie'。
    猜你喜欢
    • 1970-01-01
    • 2016-12-23
    • 1970-01-01
    • 2017-01-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-12-19
    • 2017-01-23
    相关资源
    最近更新 更多