AngularJS2 ng2-idle

Question

Просто интересно, удалось ли кому-либо получить ng2-idle, работая с AngularJS2? Реализация этого в AngularJS1 была легкой, но такой головной болью в AngularJS2.

Может кто-нибудь увидеть, где я иду не так? Я использую angularJS2 с помощью Visual Studio 2015.

я установил NG2-простаивает через НПМ:

npm install --save @ng-idle/core @ng-idle/keepalive 

Installer добавлены необходимые файлы в мой файл package.json (@ нг-простаивает/ядро ​​& @ ng- холостой ход/KeepAlive):

{ 
    "name": "angular-quickstart", 
    "version": "1.0.0", 
    "description": "QuickStart package.json from the documentation, supplemented with testing support", 
    "scripts": { 
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 
    "docker-build": "docker build -t ng2-quickstart .", 
    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart", 
    "pree2e": "npm run webdriver:update", 
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first", 
    "lint": "tslint ./app/**/*.ts -t verbose", 
    "lite": "lite-server", 
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"", 
    "test-once": "tsc && karma start karma.conf.js --single-run", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "webdriver:update": "webdriver-manager update" 
    }, 
    "keywords": [], 
    "author": "", 
    "licenses": [ 
    { 
     "type": "MIT", 
     "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 
    } 
    ], 
    "dependencies": { 
    "@angular/common": "~2.1.1", 
    "@angular/compiler": "~2.1.1", 
    "@angular/core": "~2.1.1", 
    "@angular/forms": "~2.1.1", 
    "@angular/http": "~2.1.1", 
    "@angular/material": "^2.0.0-alpha.9-3", 
    "@angular/platform-browser": "~2.1.1", 
    "@angular/platform-browser-dynamic": "~2.1.1", 
    "@angular/router": "~3.1.1", 
    "@angular/upgrade": "~2.1.1", 
    "@ng-idle/core": "^2.0.0-beta.2", 
    "@ng-idle/keepalive": "^2.0.0-beta.2", 
    "ag-grid": "^6.2.x", 
    "ag-grid-ng2": "^6.2.x", 
    "angular-in-memory-web-api": "~0.1.13", 
    "angular2-cool-storage": "^1.1.0", 
    "angular2-moment": "^1.0.0-beta.rc.1", 
    "bootstrap": "^3.3.7", 
    "core-js": "^2.4.1", 
    "moment": "^1.8.3", 
    "ng2-bootstrap": "^1.1.16", 
    "reflect-metadata": "^0.1.8", 
    "rxjs": "5.0.0-beta.12", 
    "systemjs": "0.19.39", 
    "underscore": "^1.8.3", 
    "zone.js": "^0.6.26" 
    }, 
    "devDependencies": { 
    "concurrently": "^3.1.0", 
    "lite-server": "^2.2.2", 
    "typescript": "^2.0.3", 
    "canonical-path": "0.0.2", 
    "http-server": "^0.9.0", 
    "tslint": "^3.15.1", 
    "lodash": "^4.16.2", 
    "jasmine-core": "~2.5.2", 
    "karma": "^1.3.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-htmlfile-reporter": "^0.3.4", 
    "karma-jasmine": "^1.0.2", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "protractor": "^4.0.9", 
    "rimraf": "^2.5.4", 
    "@types/core-js": "^0.9.34", 
    "@types/node": "^6.0.45", 
    "@types/jasmine": "^2.5.35", 
    "@types/selenium-webdriver": "^2.53.32" 
    }, 
    "repository": {} 
} 

Я затем добавить их в моем приложении через 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', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.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', 
     'ag-grid-ng2': 'node_modules/ag-grid-ng2', 
     'ag-grid': 'node_modules/ag-grid', 
     'ag-grid-enterprise': 'node_modules/ag-grid-enterprise', 
     '@angular/material': 'npm:@angular/material/material.umd.js', 
     'angular2-cool-storage': 'npm:angular2-cool-storage', 
     'underscore': 'npm:underscore', 
     'moment': 'npm:moment', 
     'ng2-bootstrap': 'npm:ng2-bootstrap', 
     '@ng-idle/core': 'npm:@ng-idle/core', 
     '@ng-idle/keepalive': 'npm:@ng-idle/keepalive', 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { main: './main.js', defaultExtension: 'js' }, 
     rxjs: { defaultExtension: 'js' }, 
     'angular-in-memory-web-api': { main: './index.js', defaultExtension: 'js' }, 
     lib: { format: 'register', defaultExtension: 'js' }, 
     'ag-grid-ng2': { defaultExtension: "js" }, 
     'ag-grid': { defaultExtension: "js" }, 
     'angular2-cool-storage': { main: './cool-storage.js', defaultExtension: 'js' }, 
     'underscore': { main: './underscore.js', defaultExtension: 'js' }, 
     'moment': { main: './moment.js', defaultExtension: 'js' }, 
     'ng2-bootstrap': { main: './ng2-bootstrap.js', defaultExtension: 'js' }, 
     '@ng-idle/core': { defaultExtension: 'js' }, 
     '@ng-idle/keepalive': { defaultExtension: 'js' }, 
     map: { 
      'ag-grid-ng2': 'node_modules/ag-grid-ng2', 
      'ag-grid': 'node_modules/ag-grid' 
     } 
    } 
    }); 
})(this); 

Все отлично до сих пор. Приложение работает нормально, никаких ошибок. Теперь я пытаюсь привнести NG2-простаивает код в свой файл app.module.ts, используя NgIdleModule.forRoot() вызов:

import { NgModule, Directive, HostBinding, Input } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { RouterModule } from '@angular/router'; 
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; 

import { AppComponent } from './app.component'; 
import { Page1Component } from './components/page1.component'; 
import { Page2Component } from './components/page2.component'; 
import { PageNotFoundComponent } from './components/pagenotfound.component'; 
import { MainPageComponent } from './components/mainpage.component'; 
import { QuickReturnComponent } from './components/quickreturn.component'; 

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

import { HttpModule, JsonpModule } from '@angular/http'; 
import { FormsModule } from '@angular/forms'; 

import {AgGridModule} from 'ag-grid-ng2/main'; 
import { Configuration } from './shared/app.configuration'; 

import { MaterialModule } from '@angular/material'; 
import { CoolStorageModule } from 'angular2-cool-storage'; 

import { CollapseModule } from 'ng2-bootstrap/ng2-bootstrap'; 

import { NgIdleKeepaliveModule } from '@ng-idle/keepalive'; 
import { NgIdleModule } from '@ng-idle/core' 

@Directive({ 
    selector: '[layout]' 
}) 
export class LayoutDirective { 
    @Input() layout: string; 
    @HostBinding('style.display') display = 'flex'; 

    @HostBinding('style.flex-direction') 
    get direction() { 
     return (this.layout === 'column') ? 'column' : 'row'; 
    } 
} 
@Directive({ 
    selector: '[flex]' 
}) 
export class FlexDirective { 
    @Input() shrink: number = 1; 
    @Input() grow: number = 1; 
    @Input() flex: string; 

    @HostBinding('style.flex') 
    get style() { 
     return `${this.grow} ${this.shrink} ${this.flex === '' ? '0' : this.flex}%`; 
    } 
} 

@NgModule({ 
    imports: [BrowserModule, HttpModule, JsonpModule, FormsModule, AgGridModule.withNg2ComponentSupport(), AppRoutingModule, MaterialModule.forRoot(), CoolStorageModule, CollapseModule, NgIdleModule.forRoot() ], 
    declarations: [AppComponent, FlexDirective, LayoutDirective, Page1Component, Page2Component, PageNotFoundComponent, MainPageComponent, QuickReturnComponent ], 
    providers: [Configuration, { provide: LocationStrategy, useClass: HashLocationStrategy }], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

я запустить приложение, и я получаю следующее сообщение об ошибке:

GET http://localhost/angularjs_2/node_modules/@ng-idle/core/ 403 (Forbidden) 

Кто-нибудь знает, что я делаю неправильно здесь? Я следую примеру кода GIT по строкам. Но я не могу пройти мимо.

Заранее спасибо.

Answer 1

Я исправил проблему :) Думаю, я разместил бы ответ здесь, если у кого-то еще будет такая же проблема.

Я изменил свой systemjs.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', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.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', 
     'ag-grid-ng2': 'node_modules/ag-grid-ng2', 
     'ag-grid': 'node_modules/ag-grid', 
     'ag-grid-enterprise': 'node_modules/ag-grid-enterprise', 
     '@angular/material': 'npm:@angular/material/material.umd.js', 
     'angular2-cool-storage': 'npm:angular2-cool-storage', 
     'underscore': 'npm:underscore', 
     'moment': 'npm:moment', 
     'ng2-bootstrap': 'npm:ng2-bootstrap', 
     '@ng-idle/core': 'npm:@ng-idle/core/bundles/core.umd.js', 
     '@ng-idle/keepalive': 'npm:@ng-idle/keepalive/bundles/keepalive.umd.js', 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { main: './main.js', defaultExtension: 'js' }, 
     rxjs: { defaultExtension: 'js' }, 
     'angular-in-memory-web-api': { main: './index.js', defaultExtension: 'js' }, 
     lib: { format: 'register', defaultExtension: 'js' }, 
     'ag-grid-ng2': { defaultExtension: "js" }, 
     'ag-grid': { defaultExtension: "js" }, 
     'angular2-cool-storage': { main: './cool-storage.js', defaultExtension: 'js' }, 
     'underscore': { main: './underscore.js', defaultExtension: 'js' }, 
     'moment': { main: './moment.js', defaultExtension: 'js' }, 
     'ng2-bootstrap': { main: './ng2-bootstrap.js', defaultExtension: 'js' }, 
     //'@ng-idle/core': { main: './idle.js', defaultExtension: 'js' }, 
     //'@ng-idle/keepalive': { main: './keepalive.js', defaultExtension: 'js' }, 
     map: { 
      'ag-grid-ng2': 'node_modules/ag-grid-ng2', 
      'ag-grid': 'node_modules/ag-grid' 
     } 
    } 
    }); 
})(this);