我安装了LocalStorage Package然后我收到了这条消息：
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @angular/animations@4.1.2 requires a peer of @angular/core@4.1.2 but none was installed.
npm WARN @angular/common@4.0.2 requires a peer of @angular/core@4.0.2 but none was installed.
npm WARN @angular/flex-layout@2.0.0-beta.7 requires a peer of @angular/common@^2.3.5 but none was installed.
npm WARN @angular/flex-layout@2.0.0-beta.7 requires a peer of @angular/core@^2.3.5 but none was installed.
npm WARN @angular/flex-layout@2.0.0-beta.7 requires a peer of rxjs@^5.0.1 but none was installed.
npm WARN @angular/flex-layout@2.0.0-beta.7 requires a peer of zone.js@^0.7.2 but none was installed.
npm WARN @angular/material@2.0.0-beta.4 requires a peer of @angular/core@^4.0.0 but none was installed.
npm WARN karma-jasmine@1.1.0 requires a peer of jasmine-core@* but none was installed.
+ angular-2-local-storage@1.0.1
added 2 packages, removed 580 packages and updated 1 package in 13.248s
所以删除了580个包。
另一方面，我的Angular服务器停止工作（404错误）。当我试图再次启动时，我得到了：
npm start
> angular-quickstart@1.0.0 prestart /home/haddad/projects/plannerback/client/portfolio
> npm run build
> angular-quickstart@1.0.0 build /home/haddad/projects/plannerback/client/portfolio
> tsc -p src/
node_modules/@angular/animations/src/animation_metadata.d.ts(34,33): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/common/src/directives/index.d.ts(8,26): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/directives/ng_class.d.ts(8,81): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/directives/ng_component_outlet.d.ts(8,104): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/directives/ng_for_of.d.ts(8,128): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/directives/ng_if.d.ts(8,47): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/directives/ng_plural.d.ts(8,47): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/directives/ng_style.d.ts(8,64): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/directives/ng_switch.d.ts(8,56): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/directives/ng_template_outlet.d.ts(8,73): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/location/location_strategy.d.ts(8,32): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/location/platform_location.d.ts(8,32): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/pipes/async_pipe.d.ts(8,75): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/pipes/async_pipe.d.ts(9,28): error TS2307: Cannot find module 'rxjs/Observable'.
node_modules/@angular/common/src/pipes/case_conversion_pipes.d.ts(8,31): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/pipes/date_pipe.d.ts(8,31): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/pipes/i18n_plural_pipe.d.ts(8,31): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/pipes/i18n_select_pipe.d.ts(8,31): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/pipes/json_pipe.d.ts(8,31): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/pipes/number_pipe.d.ts(8,31): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/pipes/slice_pipe.d.ts(8,31): error TS2307: Cannot find module '@angular/core'.
node_modules/@angular/common/src/platform_id.d.ts(8,42): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/common/src/platform_id.d.ts(9,41): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/common/src/platform_id.d.ts(10,45): error TS1039: Initializers are not allowed in ambient contexts.
..
..
node_modules/@angular/material/typings/snack-bar/snack-bar-container.d.ts(7,37): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/material/typings/snack-bar/snack-bar-container.d.ts(8,37): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/@angular/material/typings/snack-bar/snack-bar-ref.d.ts(2,28): error TS2307: Cannot find module 'rxjs/Observable'.
node_modules/@angular/material/typings/tabs/ink-bar.d.ts(1,47): error TS2307: Cannot find module '@angular/core'.
TS2307: Cannot find module '@angular/core'.
src/app/login.service.ts(2,31): error TS2307: Cannot find module '@angular/http'.
src/app/login.service.ts(23,12): error TS7006: Parameter 'res' implicitly has an 'any' type.
src/app/modif.component.ts(1,28): error TS2307: Cannot find module '@angular/core'.
src/app/modif.component.ts(2,25): error TS2307: Cannot find module '@angular/router'.
src/app/modif.service.ts(1,28): error TS2307: Cannot find module '@angular/core'.
src/app/modif.service.ts(2,31): error TS2307: Cannot find module '@angular/http'.
src/app/modif.service.ts(5,28): error TS2307: Cannot find module 'rxjs/Rx'.
src/app/modif.service.ts(35,10): error TS2322: Type 'MdDialogRef<{}>' is not assignable to type 'MdDialogRef<ModifComponent>'.
Type '{}' is not assignable to type 'ModifComponent'.
Property 'tache' is missing in type '{}'.
src/app/modif.service.ts(37,42): error TS7006: Parameter 'result' implicitly has an 'any' type.
src/app/navbar.component.ts(1,27): error TS2307: Cannot find module '@angular/core'.
src/app/navbar.component.ts(2,24): error TS2307: Cannot find module '@angular/router'.
src/app/signup.component.ts(1,27): error TS2307: Cannot find module '@angular/core'.
src/app/signup.component.ts(2,24): error TS2307: Cannot find module '@angular/router'.
src/app/signup.component.ts(3,31): error TS2307: Cannot find module '@angular/http'.
src/app/signup.component.ts(22,84): error TS2304: Cannot find name 'LocalStorageService'.
src/app/tache.service.ts(1,28): error TS2307: Cannot find module '@angular/core'.
src/app/tache.service.ts(2,31): error TS2307: Cannot find module '@angular/http'.
src/app/tache.service.ts(5,28): error TS2307: Cannot find module 'rxjs/Rx'.
src/app/tache.service.ts(33,12): error TS7006: Parameter 'response' implicitly has an 'any' type.
src/app/tache.service.ts(47,14): error TS7006: Parameter 'res' implicitly has an 'any' type.
src/app/tache.service.ts(66,13): error TS7011: Function expression, which lacks return-type annotation, implicitly has an 'any' return type.
src/app/tachesEnCours.component.ts(1,35): error TS2307: Cannot find module '@angular/core'.
src/app/tachesEnCours.component.ts(2,24): error TS2307: Cannot find module '@angular/router'.
src/app/tachesInit.component.ts(1,35): error TS2307: Cannot find module '@angular/core'.
src/app/tachesInit.component.ts(2,24): error TS2307: Cannot find module '@angular/router'.
src/app/tachesTerminees.component.ts(1,35): error TS2307: Cannot find module '@angular/core'.
src/app/tachesTerminees.component.ts(2,24): error TS2307: Cannot find module '@angular/router'.
src/main.ts(1,40): error TS2307: Cannot find module '@angular/platform-browser-dynamic'.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! angular-quickstart@1.0.0 build: `tsc -p src/`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the angular-quickstart@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/haddad/.npm/_logs/2017-06-30T16_02_12_287Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! angular-quickstart@1.0.0 prestart: `npm run build`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the angular-quickstart@1.0.0 prestart script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/haddad/.npm/_logs/2017-06-30T16_02_12_325Z-debug.log
以下是日志文件：
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
2 info using npm@5.0.4
3 info using node@v7.7.2
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle angular-quickstart@1.0.0~prestart: angular-quickstart@1.0.0
6 verbose lifecycle angular-quickstart@1.0.0~prestart: unsafe-perm in lifecycle true
7 verbose lifecycle angular-quickstart@1.0.0~prestart: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/haddad/projects/plannerback/client/portfolio/node_modules/.bin:/home/haddad/bin:/home/haddad/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
8 verbose lifecycle angular-quickstart@1.0.0~prestart: CWD: /home/haddad/projects/plannerback/client/portfolio
9 silly lifecycle angular-quickstart@1.0.0~prestart: Args: [ '-c', 'npm run build' ]
10 silly lifecycle angular-quickstart@1.0.0~prestart: Returned: code: 2 signal: null
11 info lifecycle angular-quickstart@1.0.0~prestart: Failed to exec prestart script
12 verbose stack Error: angular-quickstart@1.0.0 prestart: `npm run build`
12 verbose stack Exit status 2
12 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:283:16)
12 verbose stack at emitTwo (events.js:106:13)
12 verbose stack at EventEmitter.emit (events.js:194:7)
12 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
12 verbose stack at emitTwo (events.js:106:13)
12 verbose stack at ChildProcess.emit (events.js:194:7)
12 verbose stack at maybeClose (internal/child_process.js:899:16)
12 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
13 verbose pkgid angular-quickstart@1.0.0
14 verbose cwd /home/haddad/projects/plannerback/client/portfolio
15 verbose Linux 4.4.0-81-generic
16 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
17 verbose node v7.7.2
18 verbose npm v5.0.4
19 error code ELIFECYCLE
20 error errno 2
21 error angular-quickstart@1.0.0 prestart: `npm run build`
21 error Exit status 2
22 error Failed at the angular-quickstart@1.0.0 prestart script.
22 error This is probably not a problem with npm. There is likely additional logging output above.
23 verbose exit [ 2, true ]
的package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/animations": "^4.1.2",
"@angular/common": "^4.1.2",
"@angular/compiler": "^4.1.2",
"@angular/core": "^4.1.2",
"@angular/flex-layout": "^2.0.0-beta.7",
"@angular/forms": "^4.1.2",
"@angular/http": "^4.1.2",
"@angular/material": "^2.0.0-beta.4",
"@angular/platform-browser": "^4.1.2",
"@angular/platform-browser-dynamic": "^4.1.2",
"@angular/router": "^4.1.2",
"angular-2-local-storage": "^1.0.1",
"core-js": "^2.4.1",
"rxjs": "^5.0.1",
"systemjs": "^0.20.14",
"typings": "^2.1.1",
"zone.js": "^0.8.12"
},
"devDependencies": {
"@angular/cli": "^1.2.0",
"@types/jasmine": "^2.5.53",
"@types/node": "^8.0.7",
"canonical-path": "0.0.2",
"concurrently": "^3.2.0",
"jasmine-core": "^2.6.4",
"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",
"lite-server": "^2.2.2",
"lodash": "^4.16.4",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"tslint": "^3.15.1",
"typescript": "^2.3.4"
},
"repository": {},
"main": "karma-test-shim.js"
}
Typings.json
{
"name": "webpack.typescript.react",
"version": false,
"dependencies": {},
"ambientDependencies": {
"react": "registry:dt/react#0.14.0+20160314090524",
"react-dom": "registry:dt/react-dom#0.14.0+20160314090524"
}
}
编辑： @androbin回答后我添加了新错误：
node_modules/rxjs/Subject.d.ts(16,22): error TS2415: Class 'Subject<T>' incorrectly extends base class 'Observable<T>'.
Types of property 'lift' are incompatible.
Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
Type 'Observable<T>' is not assignable to type 'Observable<R>'.
Type 'T' is not assignable to type 'R'.
node_modules/rxjs/observable/dom/WebSocketSubject.d.ts(24,22): error TS2415: Class 'WebSocketSubject<T>' incorrectly extends base class 'AnonymousSubject<T>'.
Types of property 'lift' are incompatible.
Type '<R>(operator: Operator<T, R>) => WebSocketSubject<R>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<T>'.
Type 'WebSocketSubject<R>' is not assignable to type 'Observable<T>'.
Types of property 'operator' are incompatible.
Type 'Operator<any, R>' is not assignable to type 'Operator<any, T>'.
Type 'R' is not assignable to type 'T'.
src/app/boots.ts(8,55): error TS2345: Argument of type '(typeof RouterModule | typeof TacheService | typeof ModifService)[]' is not assignable to parameter of type 'CompilerOptions | CompilerOptions[]'.
Type '(typeof RouterModule | typeof TacheService | typeof ModifService)[]' is not assignable to type 'CompilerOptions[]'.
Type 'typeof RouterModule | typeof TacheService | typeof ModifService' is not assignable to type 'CompilerOptions'.
Type 'typeof RouterModule' has no properties in common with type 'CompilerOptions'.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! angular-quickstart@1.0.0 build: `tsc -p src/`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the angular-quickstart@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/haddad/.npm/_logs/2017-07-01T09_21_48_406Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! angular-quickstart@1.0.0 prestart: `npm run build`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the angular-quickstart@1.0.0 prestart script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/haddad/.npm/_logs/2017-07-01T09_21_48_436Z-debug.log
答案 0 :(得分：0)
不要混用<div>和scroll*依赖项。
由于您需要const divs = document.querySelectorAll( "div" ),
outer_div = divs[ 0 ],
outer_div_styles = window.getComputedStyle( outer_div ),
inner_div_styles = window.getComputedStyle( divs[ 1 ] ),
outer_div_width = parseInt( outer_div_styles.width ),
outer_div_height = parseInt( outer_div_styles.height ),
dimention_ratio = {
x: ( parseInt( inner_div_styles.width ) - outer_div_width ) / outer_div_width,
y: ( parseInt( inner_div_styles.height ) - outer_div_height ) / outer_div_height
},
half_odw = outer_div_width / 2,
half_odh = outer_div_height / 2,
expandCoords = function( e ) { // zero to width/height
var X = e.pageX,
Y = e.pageY;
if ( X < half_odw ) {
X -= 1;
} else if ( X > half_odw ) {
X += 1;
}
if ( Y < half_odh ) {
Y -= 1;
} else if ( Y > half_odh ) {
Y += 1;
}
return { x: X, y: Y };
};
outer_div.addEventListener( "mousemove", function( evt ) {
evt = expandCoords( evt );
outer_div.scrollLeft = evt.x * dimention_ratio.x;
outer_div.scrollTop = evt.y * dimention_ratio.y;
}, false );，因此您必须更新其他角度原生包（body {
overflow: hidden;
margin: 0;
}
.outer {
width: 100vw; /* the width of the viewport */
height: 100vh; /* the height of the viewport */
overflow: hidden; /* overflow mustn't be visible */
}
.inner {
width: 1000vw; /* 10 times the width of its parent */
height: 500vh; /* 5 times the height of its parent */
box-shadow: inset 0 0 20px 20px green;
background: radial-gradient( white, black );
}，<div class="outer"><div class="inner"></div></div>，<FrameLayout
android:id="@+id/show_fragment"
android:layout_width="match_parent"
android:layout_height="0dp"><!--modify 0dp to some you need-->
</FrameLayout>
，＆＃39; platform-browser＆＃39;）至{ {1}}版本。但肯定会要求将所有其他软件包更新为支持angular4的版本。
还尝试删除@angular/*-4文件夹并重新安装所有依赖项。
答案 1 :(得分：0)
您应该install npm-check。这是一个非常有用的应用程序。运行它以更新您的依赖项。
小心，最新的Angular仅支持打字稿2.3.4。
如果不起作用，请尝试删除package-lock.json和node_modules，然后运行npm-check查看最新的包。