Javascript 更新到 Angular 5
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/46497743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Update to Angular 5
提问by Melchia
How to update to Angular 5? This is from my package.json:
如何更新到 Angular 5?这是来自我的 package.json:
"dependencies": {
"@angular/animations": "5.0.0",
"@angular/common": "5.0.0",
"@angular/compiler": "5.0.0",
"@angular/core": "5.0.0",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@angular/platform-browser": "5.0.0",
"@angular/platform-browser-dynamic": "5.0.0",
"@angular/router": "5.0.0",
"@types/jwt-decode": "^2.2.1",
"bootstrap": "^3.3.7",
"bootstrap-sass": "^3.3.7",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"intl": "^1.2.5",
"jquery": "^3.2.1",
"jwt-decode": "^2.2.0",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.4.0-rc.2",
"@angular/compiler-cli": "5.0.0",
"@angular/language-service": "5.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"angular-ide": "^0.9.31",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.5.3",
"protractor": "~5.1.2",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.6",
"sw-precache": "^5.2.0",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
When I run npm install I get this error
当我运行 npm install 时出现此错误
npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" npm ERR! node v6.11.2 npm ERR! npm v3.10.10 npm ERR! code ETARGET
npm ERR! notarget No compatible version found: @angular/[email protected] npm ERR! notarget Valid install targets: npm ERR! notarget 5.0.0-rc.0, 5.0.0-beta.7, 5.0.0-beta.6, 5.0.0-beta.5, 5.0.0-beta.4, 5.0.0-beta.3, 5.0.0-beta.2, 5.0.0-beta.1, 5.0.0-beta.0, 4.4.4, 4.4.3, 4.4.2, 4.4.1, 4.4.0-RC.0, 4.3.6, 4.3.5, 4.3.4, 4.3.3, 4.3.2, 4.3.1, 4.3.0, 4.3.0-rc.0, 4.3.0-beta.1, 4.3.0-beta.0, 4.2.6, 4.2.5, 4.2.4, 4.2.3, 4.2.2, 4.2.1, 4.2.0, 4.2. 0-rc.2, 4.2.0-rc.1, 4.2.0-rc.0, 4.2.0-beta.1, 4.2.0-beta.0, 4.1.3, 4.1.2, 4.1.1, 4.1.0, 4.1.0-rc.0, 4.1.0-beta.1, 4.1.0-beta.0, 4.0.3, 4.0.2, 4.0.1, 4.0.0, 4.0.0- rc.6, 4.0.0-rc.5, 4.0.0-rc.4, 4.0.0-rc.3, 4.0.0-rc.2, 4.0.0-rc.1, 4.0.0-rc.0, 4.0.0-beta.8, 4.0.0-beta.7, 4.0.0-beta.6, 4.0.0-beta.5, 4.0.0-beta.4, 4.0.0-beta.3, 4.0.0-beta.2, 4.0.0-beta.1, 4.0.0-beta.0, 2.4.10, 2.4.9, 2.4.8, 2.4.7, 2.4.6, 2.4.5, 2.4.4, 2.4.3, 2.4.2, 2.4.1, 2.4.0, 2.3.1, 2.3.0, 2.3.0-rc.0, 2.3.0-beta.1, 2. 3.0-beta.0, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.2.0-rc.0, 2.2.0-beta.1, 2.2.0-beta.0, 2.1.2, 2.1.1, 2.1.0, 2.1.0-rc.0, 2.1.0-beta.0, 2.0.2, 2.0.1, 2.0.0, 2.0.0-r c.7, 2.0.0-rc.6, 2.0.0-rc.5, 2.0.0-rc.4, 2.0.0-rc.3, 2.0.0-rc.2, 2.0.0-rc.1, 2.0.0-rc.0, 0.0.0-7, 0.0.0-6, 0.0.0-5, 0.0.0-4, 0.0.0-3, 0.0.0-2, 0.0.0-1, 0.0.0-0 npm ERR! notarget npm ERR! notarget This is most likely not a problem with npm itself. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist. npm ERR! notarget npm ERR! notarget It was specified as a dependency of 'gizza' npm ERR! notarget
npm 错误!Windows_NT 6.1.7601 npm 错误!argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "安装" npm ERR!节点 v6.11.2 npm ERR!npm v3.10.10 npm ERR!代码 ETARGET
npm 错误!notarget 未找到兼容版本:@angular/[email protected] npm ERR!notarget 有效的安装目标:npm ERR!无目标 5.0.0-rc.0, 5.0.0-beta.7, 5.0.0-beta.6, 5.0.0-beta.5, 5.0.0-beta.4, 5.0.0-beta.3, 5.0 .0-beta.2, 5.0.0-beta.1, 5.0.0-beta.0, 4.4.4, 4.4.3, 4.4.2, 4.4.1, 4.4.0-RC.0, 4.3.6 , 4.3.5, 4.3.4, 4.3.3, 4.3.2, 4.3.1, 4.3.0, 4.3.0-rc.0, 4.3.0-beta.1, 4.3.0-beta.0, 4.2 .6、4.2.5、4.2.4、4.2.3、4.2.2、4.2.1、4.2.0、4.2。0-rc.2, 4.2.0-rc.1, 4.2.0-rc.0, 4.2.0-beta.1, 4.2.0-beta.0, 4.1.3, 4.1.2, 4.1.1, 4.1.0, 4.1.0-rc.0, 4.1.0-beta.1, 4.1.0-beta.0, 4.0.3, 4.0.2, 4.0.1, 4.0.0, 4.0.0-rc. 6、4.0.0-rc.5、4.0.0-rc.4、4.0.0-rc.3、4.0.0-rc.2、4.0.0-rc.1、4.0.0-rc.0、 4.0.0-beta.8、4.0.0-beta.7、4.0.0-beta.6、4.0.0-beta.5、4.0.0-beta.4、4.0.0-beta.3、4.0。 0-beta.2, 4.0.0-beta.1, 4.0.0-beta.0, 2.4.10, 2.4.9, 2.4.8, 2.4.7, 2.4.6, 2.4.5, 2.4.4, 2.4.3, 2.4.2, 2.4.1, 2.4.0, 2.3.1, 2.3.0, 2.3.0-rc.0, 2.3.0-beta.1, 2. 3.0-beta.0, 2.2. 4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.2.0-rc.0, 2.2.0-beta.1, 2.2.0-beta.0, 2.1.2, 2.1.1, 2.1.0, 2.1.0-rc.0, 2.1.0-beta.0, 2.0.2, 2.0.1, 2.0.0, 2.0.0-r c.7, 2.0.0-rc.6, 2.0 .0-rc.5, 2.0.0-rc.4, 2.0.0-rc.3, 2.0.0-rc.2, 2.0.0-rc.1, 2.0.0-rc.0, 0.0.0 -7, 0.0.0-6, 0.0.0-5, 0.0.0-4, 0.0.0-3, 0.0.0-2, 0.0.0-1, 0.0.0-0 npm ERR!notarget npm ERR!notarget 这很可能不是 npm 本身的问题。npm 错误!notarget 在大多数情况下,您或您的依赖项之一正在请求 npm ERR!notarget 不存在的包版本。npm 错误!notarget npm ERR!notarget 它被指定为 'gizza' npm ERR 的依赖项!没有目标 0-rc.0, 2.2.0-beta.1, 2.2.0-beta.0, 2.1.2, 2.1.1, 2.1.0, 2.1.0-rc.0, 2.1.0-beta.0, 2.0.2, 2.0.1, 2.0.0, 2.0.0-r c.7, 2.0.0-rc.6, 2.0.0-rc.5, 2.0.0-rc.4, 2.0.0-rc .3, 2.0.0-rc.2, 2.0.0-rc.1, 2.0.0-rc.0, 0.0.0-7, 0.0.0-6, 0.0.0-5, 0.0.0-4 , 0.0.0-3, 0.0.0-2, 0.0.0-1, 0.0.0-0 npm ERR!notarget npm ERR!notarget 这很可能不是 npm 本身的问题。npm 错误!notarget 在大多数情况下,您或您的依赖项之一正在请求 npm ERR!notarget 不存在的包版本。npm 错误!notarget npm ERR!notarget 它被指定为 'gizza' npm ERR 的依赖项!没有目标 0-rc.0, 2.2.0-beta.1, 2.2.0-beta.0, 2.1.2, 2.1.1, 2.1.0, 2.1.0-rc.0, 2.1.0-beta.0, 2.0.2, 2.0.1, 2.0.0, 2.0.0-r c.7, 2.0.0-rc.6, 2.0.0-rc.5, 2.0.0-rc.4, 2.0.0-rc .3, 2.0.0-rc.2, 2.0.0-rc.1, 2.0.0-rc.0, 0.0.0-7, 0.0.0-6, 0.0.0-5, 0.0.0-4 , 0.0.0-3, 0.0.0-2, 0.0.0-1, 0.0.0-0 npm ERR!notarget npm ERR!notarget 这很可能不是 npm 本身的问题。npm 错误!notarget 在大多数情况下,您或您的依赖项之一正在请求 npm ERR!notarget 一个不存在的包版本。npm 错误!notarget npm ERR!notarget 它被指定为 'gizza' npm ERR 的依赖项!没有目标 0-2, 0.0.0-1, 0.0.0-0 npm 错误!notarget npm ERR!notarget 这很可能不是 npm 本身的问题。npm 错误!notarget 在大多数情况下,您或您的依赖项之一正在请求 npm ERR!notarget 一个不存在的包版本。npm 错误!notarget npm ERR!notarget 它被指定为 'gizza' npm ERR 的依赖项!没有目标 0-2, 0.0.0-1, 0.0.0-0 npm 错误!notarget npm ERR!notarget 这很可能不是 npm 本身的问题。npm 错误!notarget 在大多数情况下,您或您的依赖项之一正在请求 npm ERR!notarget 不存在的包版本。npm 错误!notarget npm ERR!notarget 它被指定为 'gizza' npm ERR 的依赖项!没有目标
I know Angular 5 is still in beta but I want to test it.
我知道 Angular 5 仍处于测试阶段,但我想对其进行测试。
EDIT: Version 5.0.0 now does exist as of Nov. 1st 2017
编辑:截至 2017 年 11 月 1 日,版本 5.0.0 现在确实存在
采纳答案by rjustin
EDIT: Version 5.0.0 now does exist as of Nov. 1st 2017
编辑:截至 2017 年 11 月 1 日,版本 5.0.0 现在确实存在
NPM is telling you 5.0.0 doesnt exist. change your package.json to one of the suggested release candidates like 5.0.0-rc.0. There is a good chance they aren't all exactly that either so read the npm error it is actually helpful in this case.
NPM 告诉你 5.0.0 不存在。将您的 package.json 更改为建议的候选版本之一,例如 5.0.0-rc.0。很有可能它们也并非完全如此,因此请阅读 npm 错误,它在这种情况下实际上很有帮助。
"dependencies": {
"@angular/animations": "5.0.0-rc.0",
"@angular/common": "5.0.0-rc.0",
"@angular/compiler": "5.0.0-rc.0",
"@angular/core": "5.0.0-rc.0",
"@angular/forms": "5.0.0-rc.0",
"@angular/http": "5.0.0-rc.0",
"@angular/platform-browser": "5.0.0-rc.0",
"@angular/platform-browser-dynamic": "5.0.0-rc.0",
"@angular/router": "5.0.0-rc.0",
"@types/jwt-decode": "^2.2.1",
"bootstrap": "^3.3.7",
"bootstrap-sass": "^3.3.7",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"intl": "^1.2.5",
"jquery": "^3.2.1",
"jwt-decode": "^2.2.0",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.4.0-rc.2",
"@angular/compiler-cli": "5.0.0",
"@angular/language-service": "5.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"angular-ide": "^0.9.31",
"codelyzer": "~3.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.5.3",
"protractor": "~5.1.2",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.6",
"sw-precache": "^5.2.0",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
回答by Nimish goel
As Now, angular 5 has been released officially on 1st Novemebr 2017, So for those who want to update your old angular applications to angular 5:
现在,angular 5 已于 2017 年 11 月 1 日正式发布,因此对于那些想要将旧的 angular 应用程序更新为 angular 5 的人:
1) The Angular team has also put a handy toolto make upgrading from any version to angular 5, as simple as possible.
1) Angular 团队还提供了一个方便的工具,使从任何版本升级到 angular 5 尽可能简单。
2) You will have to upgrade all of your angular packages to version 5.0, run the following command:
2) 您必须将所有 angular 包升级到 5.0 版,运行以下命令:
npm install @angular/animations@^5.0.0 @angular/common@^5.0.0 @angular/compiler@^5.0.0 @angular/compiler-cli@^5.0.0 @angular/core@^5.0.0 @angular/forms@^5.0.0 @angular/http@^5.0.0 @angular/platform-browser@^5.0.0 @angular/platform-browser-dynamic@^5.0.0 @angular/platform-server@^5.0.0 @angular/router@^5.0.0 zone.js@^0.8.4 @angular/upgrade@^5.0.0 [email protected] rxjs@^5.5.2
3) Angular 5 now also depends on TypeScript 2.4.2 and RxJS 5.5.2, so you'll have to upgrade those package as well.
3) Angular 5 现在也依赖于 TypeScript 2.4.2 和 RxJS 5.5.2,所以你也必须升级这些包。
npm install [email protected] --save-exact
4) If you rely on the date, currency, decimal, or percent pipes, in 5 you will see minor changes to the format. For applications using locales other than en-us you will need to import it and optionally locale_extended_fr from @angular/common/i18n_data/locale_fr and registerLocaleData(local). For more information on pipes breaking changes: https://stackoverflow.com/a/47263949/2810015
4) 如果您依赖日期、货币、小数或百分比管道,则在 5 中您将看到格式的细微变化。对于使用 en-us 以外的语言环境的应用程序,您需要从@angular/common/i18n_data/locale_fr 和 registerLocaleData(local) 导入它和可选的 locale_extended_fr。有关管道中断更改的更多信息:https: //stackoverflow.com/a/47263949/2810015
5) Use of implements instead of extends with any lifecycle events : Ensure you don't use extends OnInit, or use extends with any lifecycle event. Instead use implements .
5) 在任何生命周期事件中使用实现而不是扩展:确保您不使用 extends OnInit,或将扩展与任何生命周期事件一起使用。而是使用 implements 。
6) Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don't need to map to json anymore and remove any map(res => res.json())calls, which are no longer needed.) and now supports typed return values and interceptors.
6)从HttpModule和Http服务切换到HttpClientModule和HttpClient服务。HttpClient 简化了默认的人体工程学(您不再需要映射到 json 并删除任何map(res => res.json())不再需要的调用。)并且现在支持类型化返回值和拦截器。
7) The recommended way of importing operators in RxJS 5.5 is from rxjs/operators.
7) RxJS 5.5 中推荐的操作符导入方式是从 rxjs/operators。
import { map, filter, mergeMap, tap } from 'rxjs/operators';
I have tried to explain more here.https://onlyforcoder.blogspot.in/2017/11/angular-5-upgrade-your-project-To-Angular5.html
我试图在这里解释更多。https://onlyforcoder.blogspot.in/2017/11/angular-5-upgrade-your-project-To-Angular5.html
回答by Melchia
Edit: This is the latest Angular 5 working dependencies:
编辑:这是最新的 Angular 5 工作依赖项:
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "1.6.7",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
Just copy Paste & run npm install
只需复制粘贴并运行 npm install
回答by Diskdrive
I got the same error even when pasting the command from the Angular upgrade guide.
即使粘贴来自Angular upgrade guide的命令,我也遇到了同样的错误。
In the end, I just changed the versions to the latest and it worked.
最后,我只是将版本更改为最新版本并且它起作用了。
npm install @angular/animations@latest @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest rxjs@latest --save
npm install [email protected] --save-exact
I'm unsure why this error is occurring because even when I type in
我不确定为什么会发生这个错误,因为即使我输入
npm view @angular/core versions --json
I can see that the version actually exists. My only theory is maybe it's cause I'm on Windows and the Windows version of NPM doesn't like those version numbers...
我可以看到该版本确实存在。我唯一的理论可能是因为我在 Windows 上并且 NPM 的 Windows 版本不喜欢这些版本号......
回答by Akshay Thorve
Original Answer by @Vishal Gulati: https://stackoverflow.com/a/47132265/6877180
@Vishal Gulati 的原始答案:https://stackoverflow.com/a/47132265/6877180
Quick Overview:
快速概览:
Upgrade Angular with all its packages to the latest version.
将 Angular 及其所有软件包升级到最新版本。
npm install [email protected] --save-dev
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest --save
Upgrade CLI if needed
如果需要升级 CLI
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
回答by Sheo Dayal Singh
Here is the command to update Angular CLI in version 5.2.0
这是在 5.2.0 版中更新 Angular CLI 的命令
npm install @angular/[email protected]
npm install @angular/[email protected]
回答by Lijo
Before updating, rename your template tags to ng-template.
在更新之前,将您的模板标签重命名为 ng-template。
Update all of your dependencies to the latest Angular and the right version of TypeScript. If you are using Windows, you can use:
将所有依赖项更新到最新的 Angular 和正确版本的 TypeScript。如果您使用的是 Windows,则可以使用:
npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' [email protected] rxjs@'^5.5.2'
npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular /core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser -dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' [email protected] rxjs@'^5.5.2'
npm install [email protected] --save-exact
npm install [email protected] --save-exact
回答by Mohit Tanwani
Basically, there're few important steps to achieve that.
基本上,有几个重要的步骤可以实现这一目标。
- Upgrade Angular CLI to the latest version.
- Modify Angular 4 app dependencies and Update the dependencies.
- 将 Angular CLI 升级到最新版本。
- 修改 Angular 4 应用程序依赖项并更新依赖项。
That's it, this way you can easily upgrade your Angular 4 app to Angular 5, Read more
就是这样,通过这种方式,您可以轻松地将 Angular 4 应用程序升级到 Angular 5,阅读更多
回答by Dr. X
This problem is occur because of npm version In order to work in Angular 5 ;
出现这个问题是因为 npm 版本为了在 Angular 5 中工作;
"node": ">=6.9.5 <7.0.0",
"npm": ">=3.10.7 <4.0.0",
"yarn": ">=1.0.2 <2.0.0"

