Javascript 从Angular 2.2.3升级到2.4.0

我刚刚使用将Angular项目从Angular 2.2.3升级到2.4.0。使用angular cli编译时，我收到此警告。不过，应用程序本身似乎运行良好

>ng build
--snip--
ERROR in AppModule is not an NgModule

问题是它没有给我任何关于这个问题可能是什么的信息。如果需要任何其他代码或信息，我可以提供

New package.json:

"dependencies": {
    "@angular/common": "2.4.0",
    "@angular/compiler": "2.4.0",
    "@angular/core": "2.4.0",
    "@angular/forms": "2.4.0",
    "@angular/http": "2.4.0",
    "@angular/platform-browser": "2.4.0",
    "@angular/platform-browser-dynamic": "2.4.0",
    "@angular/router": "3.4.0",
    "bootswatch": "^3.3.7",
    "core-js": "^2.4.1",
    "express": "^4.14.0",
    "font-awesome": "^4.7.0",
    "mongoose": "^4.7.4",
    "morgan": "^1.7.0",
    "rxjs": "5.0.1",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.7.4"

Old package.json

"dependencies": {
    "@angular/common": "2.2.3",
    "@angular/compiler": "2.2.3",
    "@angular/core": "2.2.3",
    "@angular/forms": "2.2.3",
    "@angular/http": "2.2.3",
    "@angular/platform-browser": "2.2.3",
    "@angular/platform-browser-dynamic": "2.2.3",
    "@angular/router": "3.2.3",
    "bootswatch": "^3.3.7",
    "core-js": "^2.4.1",
    "express": "^4.14.0",
    "font-awesome": "^4.7.0",
    "mongoose": "^4.7.1",
    "morgan": "^1.7.0",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
}

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routes } from './app.router';

import { AppComponent } from './app.component';
import { BoardIndexComponent } from './board-index/board-index.component';
import { ViewForumComponent } from './view-forum/view-forum.component';
import { ViewTopicComponent } from './view-topic/view-topic.component';
import { PostingComponent } from './posting/posting.component';

import { DatabaseService } from './services/database.service';

@NgModule({
  declarations: [ // Components and directives 
    AppComponent,
    BoardIndexComponent,
    ViewForumComponent,
    ViewTopicComponent,
    PostingComponent
  ],
  imports: [ // Module dependencies
    BrowserModule,
    FormsModule,
    HttpModule,
    routes
  ],
  providers: [DatabaseService], // Services
  bootstrap: [AppComponent] // Root component
})
export class AppModule { }

---

使package.json文件与此类似

 "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/compiler-cli": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/router": "3.4.1",
    "@angular/upgrade": "2.4.1",
    "@angular/material": "2.0.0-beta.0",
    "bootstrap": "^3.3.7",
    "concurrently": "^3.1.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.0.2",
    "systemjs": "^0.19.41",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/chai": "^3.4.34",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.5.38",
    "@types/selenium-webdriver": "2.53.38",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "~2.0.0-beta.4",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.7.0",
    "karma": "1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-remap-istanbul": "^0.4.0",
    "protractor": "4.0.14",
    "ts-node": "1.7.2",
    "tslint": "4.2.0",
    "typescript": "2.0.10"
  }

然后再次运行“npm安装”。如果在此之前清理node_modules文件夹，效果会更好。之后运行“npm-g”-cli@latest". 更多 在angular-cli.json文件中，属性“资产”现在应该是数组而不是标量： “资产”：[“资产”]和默认值部分现在应添加：

"defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": true,
      "template": true
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }

大概是这样的：

{
  "project": {
    "version": "1.0.0-beta.24",
    "name": "testcli"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "indexcli.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "",
      "mobile": false,
      "styles": [],
      "scripts": [
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": true,
      "template": true
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

---

在所有这些准备工作之后-ng build应该可以工作了…

这是关于Typescript 2.1.x的一些突破性更改，只是降级到2.0.x现在就解决了问题（直到向上游发布修复程序）。

如另一个答案中所述，Typescript 2.1目前不受支持

如果使用Angular CLI，升级项目的正确方法如下：

npm uninstall --global angular-cli npm cache clean npm install --global angular-cli ng init npm卸载--全局角度cli npm缓存清理 npm安装--全局角度cli ng init 这将提供覆盖许多文件的功能。由于您无论如何都应该使用git，建议您让它覆盖

angular cli.json

和

package.json

以及其他特定于框架的文件（

src/test.ts

和

src/tsconfig.json

等，如果要求覆盖的话。但是您不需要覆盖

app/

文件

完成后，检查git中的差异，并恢复可能已删除的任何NPM包或脚本

---

然后删除节点_模块，并运行

npm安装

确保已将angular cli版本更新为beta 24（全局和本地）。使用angular将此问题持续存在-cli@1.0.0-β.24，本地和全局。我建议您只需运行

ng init

，然后按d键查看差异并实现差异，我自己做了，我为我工作。再看看这个是的：“typescript”：package.json中的“2.0.x”为我解决了这个问题。你不需要做所有这些事情，正如@oidualc所说，他的答案是只降低类型脚本的级别。只有在angular 2.4.1中，他们才解决了aot编译的问题，最好使用2.4.2，即使在使用类型脚本2.1.4时，一切都能顺利进行。是否有一个参考说明了哪些版本与哪些内容相匹配。ie：什么版本的路由器与angular 2.1.1等一起使用？询问原因我的一些插件不能与angular的较新版本一起使用，因此需要降级是的，命令行中有：“ng--version”显示此类信息（当然，如果安装了angular cli）。但您应该在angular cli项目目录中执行此操作