Не найдено метаданных NgModule для AppModule после обновления с Angular 5 до Angular 7 - PullRequest
Новая
       12

Не найдено метаданных NgModule для AppModule после обновления с Angular 5 до Angular 7

3 голосов
/ 24 марта 2019

Наша команда разработчиков недавно обновила проект Angular 5 до Angular 7. Я загрузил репозиторий и пытаюсь создать исходный код, однако когда я запускаю команду ng build , я получаю ОШИБКА в метаданных NgModule не найдена для 'AppModule' .

enter image description here

Если я запускаю команду ng --version , она показывает следующее:

  • Угловой CLI: 7.3.6
  • Узел: 11.10.0
  • ОС: win32 x64
  • Угловой: 7.2.10

app.module.ts файл: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminComponent } from './layout/admin/admin.component';
import { AdminComponent1 } from './layout/admin1/estimate.component';
import { AuthComponent } from './layout/auth/auth.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SharedModule } from './shared/shared.module';
import { MenuItems } from './shared/menu-items/menu-items';
import { BreadcrumbsComponent } from './layout/admin/breadcrumbs/breadcrumbs.component';
import { ServicesProvider } from '../providers/services';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AuthGuardService } from './activate-guard';
import { AuthLoginService } from './deactivate-guard';
import { SupperAdmin } from './supperadmin-guard';
import { NgProgressModule } from 'ngx-progressbar';
import {SimpleNotificationsModule} from 'angular2-notifications';
import { ConfigService } from '../assets/config/ConfigService';


@NgModule({
  declarations: [
    AppComponent,
    AdminComponent,
    AdminComponent1,
    AuthComponent,
    BreadcrumbsComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    SharedModule,
    NgProgressModule,
    SimpleNotificationsModule.forRoot(),
    BrowserModule,


  ],
  providers: [MenuItems, ServicesProvider, AuthGuardService, SupperAdmin, AuthLoginService,  NgProgressModule, ConfigService],
  bootstrap: [AppComponent]
})
export class AppModule { }

и main.ts файл: 

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

И index.htmlследующим образом: 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Welcome</title>
  <base href="/">
  <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js"
async defer></script> -->
  <!-- <script src="../src/assets/js/pdf.js"></script>
  <script src="../src/assets/js/pdf.worker.js"></script> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="Visual Estimator" />
  <meta name="keywords" content="visualestimator" />
  <meta name="author" content="phoenixcoded" />
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
  <meta http-equiv="Pragma" content="no-cache"/>
  <meta http-equiv="Expires" content="0"/>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <style>
  </style>
  <!-- Google font-->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/ng2-toastr@4.1.2/ng2-toastr.css" rel="stylesheet" />
</head>

<body>
  <app-root>
    <div class="theme-loader">
      <div class="loader-track">
        <div class="preloader-wrapper">
          <div class="spinner-layer spinner-blue">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <div class="spinner-layer spinner-red">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>

          <div class="spinner-layer spinner-yellow">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>

          <div class="spinner-layer spinner-green">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </app-root>
</body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script>
<script>
</script>
</html>

И файл angular.json : 

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mega-able": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/marker-icon.png",
              "src/marker-icon-2x.png"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "node_modules/bootstrap/scss/bootstrap.scss",
              "node_modules/font-awesome-scss/scss/font-awesome.scss",
              "src/assets/images/zommer/leaflet/dist/leaflet.css",
              "src/assets/images/zommer/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.css",
              "src/assets/images/zommer/leaflet-toolbar/dist/leaflet.toolbar.css",
              "src/assets/images/zommer/leaflet-draw/dist/leaflet.draw-src.css",
              "src/scss/style.scss"
            ],
            "scripts": [
              "src/assets/images/zommer/jquery.min.js",
              "src/assets/images/zommer/bootstrap.min.js",
              "src/assets/images/zommer/leaflet/dist/leaflet-src.js",
              "src/assets/images/zommer/leaflet/dist/leaflet.rotatedMarker.js",
              "src/assets/images/zommer/leaflet-toolbar/dist/leaflet.toolbar-src.js",
              "src/assets/images/zommer/leaflet-draw/dist/leaflet.draw-src.js",
              "src/assets/images/zommer/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.js",
              "src/assets/images/zommer/color.js",
              "src/assets/images/zommer/pdf.js",
              "src/assets/images/zommer/pdf.worker.js",
              "src/assets/images/zommer/leafletfunction.js"
            ]
          },
          "configurations": {
            "prod": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "mega-able:build"
          },
          "configurations": {
            "prod": {
              "browserTarget": "mega-able:build:prod"
            },
            "production": {
              "browserTarget": "mega-able:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "mega-able:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "src/assets/images/zommer/jquery.min.js",
              "src/assets/images/zommer/bootstrap.min.js",
              "src/assets/images/zommer/leaflet/dist/leaflet-src.js",
              "src/assets/images/zommer/leaflet/dist/leaflet.rotatedMarker.js",
              "src/assets/images/zommer/leaflet-toolbar/dist/leaflet.toolbar-src.js",
              "src/assets/images/zommer/leaflet-draw/dist/leaflet.draw-src.js",
              "src/assets/images/zommer/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.js",
              "src/assets/images/zommer/color.js",
              "src/assets/images/zommer/pdf.js",
              "src/assets/images/zommer/pdf.worker.js",
              "src/assets/images/zommer/leafletfunction.js"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "node_modules/bootstrap/scss/bootstrap.scss",
              "node_modules/font-awesome-scss/scss/font-awesome.scss",
              "src/assets/images/zommer/leaflet/dist/leaflet.css",
              "src/assets/images/zommer/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.css",
              "src/assets/images/zommer/leaflet-toolbar/dist/leaflet.toolbar.css",
              "src/assets/images/zommer/leaflet-draw/dist/leaflet.draw-src.css",
              "src/scss/style.scss"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/marker-icon.png",
              "src/marker-icon-2x.png"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "mega-able-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "mega-able:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "mega-able",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

Ниже приведены все различные вещи, которые я пробовал на основе поисковых запросов Google.Все команды запускались из окна Git Bash, если не указано иное:

  1. npm install -g @ angular / cli
  2. npm install @ angular / cli
  3. ngupdate @ angular / cli
  4. ng update
  5. ng update @ angular / cli @ angular / core
  6. ng build

Та же проблема ометаданные NgModule все еще присутствовали.Затем я попробовал следующее:

  1. npm удалить веб-пакет
  2. npm установить –save-dev @ angular / cli @ latest
  3. очистка кэша npm –force
  4. npm install
  5. npm install –save-dev @ angular / cli @ latest
  6. ng build

Проблема сохраняется.Далее:

  1. Вручную удалила папку node_modules
  2. npm install
  3. ng build

Проблема не устранена.Далее:

  1. npm i -g @ angular / cli @ latest
  2. Удаленная вручную папка node_modules
  3. очистка кэша npm –force
  4. кэширование npmпроверить
  5. npm установить
  6. npm удалить веб-пакет
  7. npm установить –save-dev –save-точный @ angular / cli @ latest
  8. ng build

Проблема сохраняется.Далее:

  1. Вручную удалил папку node_modules
  2. Вручную удалил файл package-lock.json
  3. npm install
  4. ng build

Проблема сохраняется.Далее:

  1. npm удалить веб-пакет
  2. npm установить –save-dev @ angular / cli @ latest
  3. ng build

Проблемасохранялось.Далее:

  1. очистка кэша npm –force
  2. установка npm
  3. установка npm –save-dev @ angular / cli @ latest
  4. ng build

Проблема сохраняется.Далее:

  1. Вручную удалил папку node_modules
  2. Вручную удалил файл package-lock.json
  3. Очистка кэша npm –force
  4. npm install
  5. npm install –save-dev @ angular / cli @ latest

Проблема сохраняется.Далее:

  1. Открыт проект в Visual Studio с кодом
  2. В окне терминала запущено ng s
  3. Подтверждена ошибка компиляции
  4. Открыт app.component.ts file
  5. Добавил пробел, удалил его и сохранил
  6. Проект автоматически перекомпилирован
  7. Успешный доступ к сайту на http://localhost:4200
  8. Закрыто VisualStudio Code
  9. Из окна Git Bash запустился n * serve
  10. Не удалось скомпилировать проект
  11. Повторно открыл код Visual Studio
  12. Запустил службу из окна терминала- ошибка не исчезла
  13. Восстановлен файл app.component.ts
  14. Успешный доступ к сайту по http://localhost:4200
  15. Перезапущенный код Visual Studio
  16. Выполнение сборкииз окна терминала в коде Visual Studio - ошибка возвращена
  17. Восстановлен файл app.component.ts
  18. Повторная сборка команды ng - ошибка сохранилась

Я нахожусь напотеря чегоеще можно попробовать на этом этапе, и команда разработчиков не будет работать до вторника на выходных, так что любая помощь или предложения будут с благодарностью приняты, поскольку у меня ограниченные временные рамки. Заранее благодарю за любую помощь.

Ответы [ 4 ]

1 голос
/ 24 марта 2019

Думаю, вы уже читали эту статью: https://github.com/angular/angular-cli/issues/8798

Если нет, прочитайте ее и обратите внимание, что TS также изменил файл package.json вручную, чтобы решить его проблему.

Поскольку мы не увидели фактического сообщения об ошибке в вашей сборке, мы не можем сделать вывод, если проблема имеет то же обстоятельство, что и в ссылке.Поэтому я хочу решить вашу проблему следующим образом:

  1. Удалить папку npm_modules
  2. Переместить файл package.json в резервную папку (на случай, если она нам понадобится).назад) - поэтому он не должен существовать в папке вашего проекта, так как он будет сгенерирован, когда вы выполните следующие шаги
  3. Выполните установку npm
  4. Do ng build
  5. Do ngserve

После вышесказанного или, если вы снова включите его, я предлагаю посмотреть разницу между вашим старым package.json и новым файлом package.json и сообщить нам, что вы заметили, поскольку это всегда хорошовернуть.

0 голосов
/ 24 марта 2019

Мне удалось решить проблему, обновив файл tsconfig.app.json , добавив в него свойство files и указав в массиве app/app.module.ts.

0 голосов
/ 24 марта 2019

Это должен быть @NgModule, а не просто NgModule.

@NgModule({
      declarations: [
        AppComponent,
        AdminComponent,
        AdminComponent1,
        AuthComponent,
        BreadcrumbsComponent,
      ],
      imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        AppRoutingModule,
        SharedModule,
        NgProgressModule,
        SimpleNotificationsModule.forRoot(),
        BrowserModule,


      ],
      providers: [MenuItems, ServicesProvider, AuthGuardService, SupperAdmin, AuthLoginService,  NgProgressModule, ConfigService],
      bootstrap: [AppComponent]
    })

Метаданные используются для украшения класса, чтобы он мог настроить ожидаемое поведение класса.Мы используем синтаксис Typescript и присоединяем классы с метаданными, используя функцию декоратора.Чтобы сделать класс компонентом, мы добавляем декоратор @Component, как показано в следующем коде: 

@Component({...})
export class FirstComponent {...}
0 голосов
/ 24 марта 2019

У вас есть несколько запятых в ваших объявлениях @NgModule's и массивах импорта.Удалите их и посмотрите, решит ли это это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...