Question

我是Angular 2的新手。

我正在从Angular.io浏览英雄应用程序。我正在修改它以使用Angular 2。

我已经制作了一个按钮，点击后会弹出窗口。现在我正在实现弹出窗口，然后我遇到了这个依赖项“--ng2-opd-popup。”

我正在将它添加到项目中，以便我可以使用弹出窗口，但在这里事情变坏了。

我执行了以下步骤来添加依赖项：

在package.json中输入了“ng2-opd-popup”：“^ 1.1.21”，
跑命令 - npm install ng2-opd-popup --save。
从'ng2-opd-popup'中的app.module.ts。导入{PopupModule}导入;
运行服务器：

但它给出了错误：

我的包JSON

{
  "name": "angular-io-example",
  "version": "1.0.0",
  "private": true,
  "description": "Example project from an angular.io guide.",
  "scripts": {
    "test:once": "karma start karma.conf.js --single-run",
    "build": "tsc -p src/",
    "serve": "lite-server -c=bs-config.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "build:watch": "tsc -p src/ -w",
    "build:upgrade": "tsc",
    "serve:upgrade": "http-server",
    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
    "serve:aot": "lite-server -c bs-config.aot.json",
    "build:babel": "babel src -d src --extensions \".es6\" --source-maps",
    "copy-dist-files": "node ./copy-dist-files.js",
    "i18n": "ng-xi18n",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "~4.3.1",
    "@angular/common": "~4.3.1",
    "@angular/compiler": "~4.3.1",
    "@angular/compiler-cli": "~4.3.1",
    "@angular/core": "~4.3.1",
    "@angular/forms": "~4.3.1",
    "@angular/http": "~4.3.1",
    "@angular/platform-browser": "~4.3.1",
    "@angular/platform-browser-dynamic": "~4.3.1",
    "@angular/platform-server": "~4.3.1",
    "@angular/router": "~4.3.1",
    "@angular/tsc-wrapped": "~4.3.1",
    "@angular/upgrade": "~4.3.1",
    "angular-in-memory-web-api": "~0.3.2",
    "core-js": "^2.4.1",
    "ng2-opd-popup": "^1.1.21",
    "rxjs": "^5.1.0",
    "systemjs": "0.19.39",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/angular": "^1.5.16",
    "@types/angular-animate": "^1.5.5",
    "@types/angular-cookies": "^1.4.2",
    "@types/angular-mocks": "^1.5.5",
    "@types/angular-resource": "^1.5.6",
    "@types/angular-route": "^1.3.2",
    "@types/angular-sanitize": "^1.3.3",
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.45",
    "babel-cli": "^6.16.0",
    "babel-preset-angular2": "^0.0.2",
    "babel-preset-es2015": "^6.16.0",
    "canonical-path": "0.0.2",
    "concurrently": "^3.0.0",
    "http-server": "^0.9.0",
    "jasmine": "~2.4.1",
    "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",
    "karma-phantomjs-launcher": "^1.0.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.2",
    "phantomjs-prebuilt": "^2.1.7",
    "protractor": "~5.1.0",
    "rollup": "^0.41.6",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-node-resolve": "2.0.0",
    "rollup-plugin-uglify": "^1.0.1",
    "source-map-explorer": "^1.3.2",
    "tslint": "^3.15.1",
    "typescript": "~2.3.2"
  },
  "repository": {}
}

以下是我的app.module.ts： -

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';

import { AppRoutingModule } from './app-routing.module';

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

import { AppComponent }         from './app.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService }          from './hero.service';
import { ProfileService }       from './profile.service';
import { HeroSearchComponent }  from './hero-search.component';
import { PopupModule }          from 'ng2-opd-popup';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    PopupModule.forRoot(),
    HttpModule,
    //InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent,
    HeroSearchComponent
  ],
  providers: [ HeroService ,ProfileService],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

我的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/animations': 'npm:@angular/animations/bundles/animations.umd.js',
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
      '@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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.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',
      'ng2-opd-popup' : 'npm:ng2-opd-popup'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

如何添加依赖项ng2-opd-popup以便应用程序可以在项目中使用它？我花了几个小时谷歌搜索，我现在无法解决任何问题。

输出npm install ng2-opd-popup

H:\Heros>npm install ng2-opd-popup --save
angular-io-example@1.0.0 H:\Heros
`-- ng2-opd-popup@1.1.21
  +-- UNMET PEER DEPENDENCY @angular/common@2.3.0
  +-- UNMET PEER DEPENDENCY @angular/compiler@2.2.4
  +-- @angular/compiler-cli@2.3.0
  | `-- @angular/tsc-wrapped@0.4.2
  |   `-- tsickle@0.2.6
  +-- UNMET PEER DEPENDENCY @angular/core@2.3.0
  +-- @angular/forms@2.3.0
  +-- @angular/http@2.3.0
  +-- UNMET PEER DEPENDENCY @angular/platform-browser@2.3.0
  +-- @angular/platform-browser-dynamic@2.3.0
  +-- @angular/router@3.2.4
  +-- UNMET PEER DEPENDENCY rxjs@5.0.0-rc.4
  `-- zone.js@0.7.8

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","ar
ch":"x64"})
npm WARN enoent ENOENT: no such file or directory, open 'H:\Heros\node_modules\angular2-modal\package.json'
npm WARN @angular/platform-browser-dynamic@2.3.0 requires a peer of @angular/compiler@2.3.0 but none was installed.
npm WARN @angular/compiler-cli@2.3.0 requires a peer of @angular/compiler@2.3.0 but none was installed.
npm WARN @angular/router@3.2.4 requires a peer of @angular/core@2.2.4 but none was installed.
npm WARN @angular/router@3.2.4 requires a peer of @angular/common@2.2.4 but none was installed.
npm WARN @angular/router@3.2.4 requires a peer of @angular/platform-browser@2.2.4 but none was installed.
npm WARN @angular/router@3.2.4 requires a peer of rxjs@5.0.0-beta.12 but none was installed.
npm WARN @angular/compiler@2.2.4 requires a peer of @angular/core@2.2.4 but none was installed.

Angular2依赖项增加了问题

0 个答案: