Приложение Angular не загружает модуль приложения/компоненты после обновления до Angular 8.3.5

У нас есть проект Angular 4, который я недавно пытался обновить до Angular 8. Я следовал руководству по миграции на веб-сайте Angular, изменил некоторые синтаксисы и все, что мешало созданию проекта. Я столкнулся с проблемой того, что мои стили не загружались должным образом локально и совсем не были в Azure. Я нашел Webpack и попытался настроить его, добавил style-loader, sass-loader и css-loader. Теперь, когда я работаю локально, я вижу на вкладке сети в браузере, что все стили загружаются правильно, но он загружает только файл index.html по умолчанию, а не загружает приложение.

Когда я развертываю приложение в Azure, оно загружает другие компоненты, но ни один из стилей не загружается. Я потратил 3 недели на миграцию, пока ничего обещающего.

Версия инструментов/плагинов:

Angular CLI: 8.3.5
Node: 10.15.1
OS: win32 x64
Angular: 8.2.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.5
@angular-devkit/build-angular     0.803.5
@angular-devkit/build-optimizer   0.803.5
@angular-devkit/build-webpack     0.803.5
@angular-devkit/core              8.3.5
@angular-devkit/schematics        8.3.5
@angular/cdk                      8.2.0
@angular/cli                      8.3.5
@angular/http                     5.2.11
@angular/material                 8.2.0
@ngtools/webpack                  8.3.5
@schematics/angular               8.3.5
@schematics/update                0.803.5
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.40.2

Ответы

Ответ 1

Файл index.ts отсутствует в проекте, похоже, что расширение файла index.js было изменено с ts на js, и он ищет его как ts.

Попробуйте изменить расширение index.js с помощью index.ts в папке src.

Ответ 2

Если я правильно понял, главная проблема заключается в том, что стили не применяются.

Вы используете файлы Bootstrap в соответствии с этой строкой вашей конфигурации: "node_modules/bootstrap/dist/js/bootstrap.min.js", однако вы не импортировали эти стили в окончательный комплект. Поэтому попробуйте записать это в файл angular.json:

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.scss"
],

Кроме того, вам необходимо импортировать стили bootstrap, чтобы использовать их в своем приложении в файле style.scss:

/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/dist/css/bootstrap.css";

<!-- 
     h1, h2, h3 {
         margin-bottom: 1.5rem;
     } 
-->

UPDATE:

  1. Наш app.module.ts должен выглядеть следующим образом после создания через Angular CLI:

    @NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Каждое приложение должно иметь стартовое место. В Angular у нас есть соглашение, что наше приложение должно начинаться с AppModule. AppModule является нашим модулем маршрутизации. Поэтому мы сообщаем Angular, что когда он создает наш корневой модуль (AppModule) при запуске, мы хотим установить AppComponent в качестве отправной точки (bootstrap) в DOM.

Код, который загрузит ваше приложение, помещается в файл 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.error(err));

В приведенном выше коде используется компиляция Just in Time.

Позвольте мне показать, как выглядит index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Frontend</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Где <app-root></app-root> - селектор для app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Frontend';
  test = {};
}

Вы можете изменить отображаемую страницу по умолчанию, заменив селектором вашего компонента в index.html.

Дважды проверьте ваш селектор app.component.html и селектор, используемый в вашем index.html.

  1. Попробуйте установить для projectName ваше имя проекта в разделе serve файла angular.json. Например, если ваш проект называется superappl, вы должны написать так:

    serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "browserTarget": "superappl:build",
    "customWebpackConfig": {
      "path": "./webpack.config.js"
    }
  },
  "configurations": {
    "local":{
      "browserTarget": "superappl:build:local"
    }
    ,
    "dev": {
      "browserTarget": "superappl:build:dev"
    },
    "production": {
      "browserTarget": "superappl:build:production"
    }
  }
},

  2. Если вышеуказанные действия не запустят ваше приложение. Затем я предлагаю вам создать новое фирменное приложение, используя Angular CLI, и сравнить ваш файл index.html и файлы app.module.ts. Команды для создания нового фирменного приложения для сравнения существующего приложения (особенно файлов package.json и angular.json):

    npm install -g @angular/cli
ng new angular-newapp --skip-install
npm install @angular/[email protected]
npm install @angular/[email protected]
npm install
ng serve

Некоторые вопросы:

  1. Вы создали вручную Webpack.config? Какова причина, чтобы использовать это? Вы можете избежать использования и настройки Webpack config, если это применимо к вам. Так как Angular CLI по умолчанию не создает этот файл. Вы должны вручную написать команду ng-eject, чтобы получить файл веб-пакета.

  2. Можете ли вы опубликовать свои index.html и app.module.ts?

  3. Работает ли ваше приложение, когда вы запускаете приложение локально? Я имею в виду, когда вы запускаете команду ng serve?

Ответ 3

Я решил эту проблему раньше, как это:

ШАГ 1: Удалить node_modules

ШАГ 2: npm i

ШАГ 3 (если он не работает): npm rebuild node-sass

В моем случае это работало нормально.

Я надеюсь, что это поможет вам.