第三方库(ng2-page-scroll)在Angular-Cli项目中不起作用

发布时间：2020-12-17 17:07:35 所属栏目：安全来源：网络整理

导读：我尝试在我的Angular-Cli项目中安装“ ng2-page-scroll”(它使用Angular 2 rc5),但是在我尝试在我的主页组件中使用它后遇到了一个问题： import { Component,OnInit} from '@angular/core';import { ROUTER_DIRECTIVES } from '@angular/router';import { Pa

我尝试在我的Angular-Cli项目中安装“ ng2-page-scroll”(它使用Angular 2 rc5),但是在我尝试在我的主页组件中使用它后遇到了一个问题：

import { Component,OnInit} from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { PageScroll } from 'ng2-page-scroll'; // this works

@Component({
  moduleId: module.id,selector: 'app-homepage',directives: [ROUTER_DIRECTIVES,PageScroll],// this doesn't
  templateUrl: 'homepage.component.html',styleUrls: ['homepage.component.css']
})

export class HomepageComponent implements OnInit {

  constructor() {}

  ngOnInit() {}
}

这是错误：

Failed to load resource: the server responded with a status of 404 (Not Found)
zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/ng2-page-scroll/src/ng2-page-scroll.directive
        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/ng2-page-scroll/src/ng2-page-scroll.directive as "./src/ng2-page-scroll.directive" from http://localhost:4200/vendor/ng2-page-scroll/ng2-page-scroll.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/ng2-page-scroll/src/ng2-page-scroll.directive(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM1515:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.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:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM1515:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.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:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM1515:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.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:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM1515:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.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
zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/ng2-page-scroll/src/ng2-page-scroll.directive(…)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM1515:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.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:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM1515:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.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:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM1515:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.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:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM1515:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.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
http://localhost:4200/vendor/ng2-page-scroll/src/ng2-page-scroll-manager Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:4200/vendor/ng2-page-scroll/src/ng2-page-scroll-config Failed to load resource: the server responded with a status of 404 (Not Found)

根据我的理解,它似乎没有在“vendor / ng2-page-scroll / src / *”中找到“ng2-page-scroll.directive”,但文件已经存在.

这是我的文件结构：

> dist / vendor / ng2-page-scroll / ng2-page-scroll.js
> dist / vendor / ng2-page-scroll / src / ng2-page-scroll.directive.js
> dist / vendor / ng2-page-scroll / src / ng2-page-scroll.directive.js.map

在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)','bootstrap/dist/**/*.min.+(js|css)','ng2-page-scroll/**/*.+(js|js.map)'
    ]
  });
};

我还配置了system-config.ts：

/** Map relative paths to URLs. */
const map: any = {
  'ng2-page-scroll' : 'vendor/ng2-page-scroll/ng2-page-scroll.js'
};

/** User packages configuration. */
const packages: any = {
  'ng2-page-scroll':{
    format: 'cjs'
    // defaultExtension: 'js'
  }
};

先谢谢你们！

解决方法

从ng2-page-scroll示例看,system-config.ts中的代码应该是：

/** Map relative paths to URLs. */
const map: any = {
  'ng2-page-scroll' : 'vendor/ng2-page-scroll'
};

/** User packages configuration. */
const packages: any = {
  'ng2-page-scroll':{
    main: 'ng2-page-scroll.js',defaultExtension: 'js'
  }
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!