Question

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

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

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

新的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"

旧的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 { }

Answer 1

这是关于Typescript 2.1.x的一些重大变化，只是降级到2.0.x现在解决了这个问题（直到上游发布修复）。

Answer 2

使您的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 install”。如果在此之前清理node_modules文件夹，那就更好了。之后运行“npm -g angular-cli @ latest”。更多在angular-cli.json文件属性中，“assets”现在应该是数组而不是标量：现在应该添加“资产”：[“资产”]和默认部分：

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

在所有这些准备工作之后 - 构建应该有效......

Answer 3

如另一个答案所述，目前不支持TypeScript 2.1。

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

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

这将提供覆盖许多文件。由于您无论如何都应该使用git，因此如果要求覆盖，建议您覆盖angular-cli.json和package.json以及其他特定于框架的文件（src/test.ts和src/tsconfig.json等。例如，您不需要覆盖app/个文件。

一旦完成，请查看git中的diff并恢复它可能已删除的所有NPM包或脚本。

然后删除node_modules，并运行npm install。

从Angular 2.2.3升级到2.4.0

3 个答案: