Ich frage mich nur, ob jemand es geschafft hat, ng2-idle mit AngularJS2 zu arbeiten? Die Implementierung in AngularJS1 war ein Kinderspiel, aber solche Kopfschmerzen in AngularJS2.AngularJS2 ng2-idle
Kann jemand sehen, wo ich falsch liege? Ich verwende angularJS2 über Visual Studio 2015
I NG2-idle über NPM installiert:
npm install --save @ng-idle/core @ng-idle/keepalive
Installer hinzugefügt benötigten Dateien auf meine package.json Datei (@ ng-idle/Kern & @ ng- Frei/Keep-Alive):
{
"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": {}
}
ich diese in meine Anwendung über die system.config.js Datei dann hinzufügen:
/**
* 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);
Alles perfekt bis jetzt. App läuft gut, keine Fehler. Jetzt versuche ich die NG2-idle-Code in meine app.module.ts Datei zu injizieren, mit der NgIdleModule.forRoot() -Aufruf:
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 { }
Ich betreibe die App und ich erhalte den folgenden Fehler:
GET http://localhost/angularjs_2/node_modules/@ng-idle/core/ 403 (Forbidden)
Wer weiß, was ich hier falsch mache? Ich folge dem Codebeispiel auf GIT Zeile für Zeile. Aber ich komme hier nicht vorbei.
Vielen Dank im Voraus.
nach oben Ausgabe Festsetzung i unten Störung erhalten unten Störung zu erhalten: Fehler: (SystemJS) ctorParameters. Karte ist keine Funktion \t Typeerror: ctorParameters.map ist keine Funktion \t bei ReflectionCapabilities.parameters (http: // localhost: 65321/assets/js/angular2/core.umd.js: 1780: 49) Wenn eine 1 kann helfen –