Upgrading from Angular 2.2.3 to 2.4.0

问题:

I've just upgraded my Angular project from Angular 2.2.3 to 2.4.0 using npm-check-updates. Upon compilation using angular-cli, I am receiving this warning. The application itself seems to run fine, though.

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

The problem is that it is not giving me any information on what the issue could possibly be. If any other code or information is needed, I can provide that.

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"
}

app.module.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 { }

回答1:

Make your package.json file similar to this

 "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"
  }

and run "npm install" once again.Even more better if you clean node_modules folder before that. After that run "npm -g angular-cli@latest". More over in angular-cli.json file property "assets" should now be array instead of scalar: "assets": ["assets"] and defaults section should now be added :

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

Something like this:

{
  "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
    }
  }
}

After all these preparations - ng build should work ...

回答2:

It's about some breaking change with Typescript 2.1.x, just downgrading to 2.0.x fixes the problem for now (until a fix is published upstream).

回答3:

As mentioned in another answer, TypeScript 2.1 is not supported at the moment.

If you are using Angular CLI, the right way to upgrade your project is as follows:

npm uninstall --global angular-cli
npm cache clean
npm install --global angular-cli
ng init

This will offer to override many files. Since you should be using git anyway, you are encouraged to let it override angular-cli.json and package.json and other framework specific files (src/test.ts and src/tsconfig.json etc if asked to override. But you don't need to override app/ files for example).

Once it's finished, review the diff in git and restore any NPM packages or scripts it might have removed.

Then delete node_modules, and run npm install.