Angularアプリケーションは、Angular 8.3.5へのアップグレード後にアプリケーションモジュール/コンポーネントをロードしません。

Question

Angular 4最近アップグレードしようとしたプロジェクトAngular 8。 Angular Webサイトで移行ガイドをたどり、構文の一部を変更し、プロジェクトの構築を妨げるすべてを行いました。スタイルがローカルに正しく読み込まれず、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

これは私のWebpack設定です：

const { resolve } = require('path');
const rxPaths = require('rxjs/_esm5/path-mapping');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const { AngularCompilerPlugin } = require('@ngtools/webpack');
const { IndexHtmlWebpackPlugin } = require('@angular-devkit/build-angular/src/angular-cli-files/plugins/index-html-webpack-plugin');

module.exports = {

  mode: 'development',

  devtool: 'eval',

  entry: {
    main: './src/main.ts',
    polyfills: './src/polyfills.ts',
    styles: './src/styles.scss'
  },

  output: {
    path: resolve('./dist/'),
    filename: '[name].js',
  },

  resolve: {
    extensions: ['.ts', '.js'],
    alias: rxPaths()
  },

  node: false,

  performance: {
    hints: false,
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: '@ngtools/webpack'
      },
      {
        test: /\.js$/,
        exclude: /(ngfactory|ngstyle).js$/,
        enforce: 'pre',
        use: 'source-map-loader'
      },
      {
        test: /\.html$/,
        use: 'raw-loader'
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['sass-loader'],
        // use: ['to-string-loader, css-loader, sass-loader'],
        exclude: [resolve('./src/styles.scss')]
      },
      {
        test: /\.s[ac]ss$/i,
        // use: ['sass-loader'],
        include: [resolve('./src/styles.scss')]
      },
      {
        test: /\.(eot|svg|cur)$/,
        loader: 'file-loader',
        options: {
          name: `[name].[ext]`,
          limit: 10000
        }
      },
      {
        test: /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
        loader: 'url-loader',
        options: {
          name: `[name].[ext]`,
          limit: 10000
        }
      },

      // This hides some deprecation warnings that Webpack throws

      {
        test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
        parser: { system: true },
      }
    ]
  },

  plugins: [
    new IndexHtmlWebpackPlugin({
      input: 'index.html',
      output: 'index.html',
      inject: 'body',
      entrypoints: [
        'styles',
        'polyfills',
        'main'
      ]
    }),

    new AngularCompilerPlugin({
      mainPath: resolve('./src/main.ts'),
      sourceMap: true,
      nameLazyFiles: true,
      tsConfigPath: resolve('./src/tsconfig.app.json')
      // ,
      // skipCodeGeneration: true
    }),

    new ProgressPlugin(),

    new CircularDependencyPlugin({
      exclude: /[\\\/]node_modules[\\\/]/
    }),

    new CopyWebpackPlugin([
      {
        from: 'src/assets',
        to: 'assets'
      },
      {
        from: 'src/favicon.ico'
      }
    ])
  ]
};

Webpack構成でuse []とコメントした理由は、postcss-loader例外がスローされていたことと、Githubの問題で、デフォルトのsass-loaderとWebpackで競合が発生することが判明したため、削除する必要があることに注意してください。

これはangular.jsonのビルド構成です

        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "replaceDuplicatePlugins": true
            },
            "outputPath": "./dist/",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/config",
              "src/favicon.ico"
            ],
            "styles": [
              "./src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/metismenu/dist/metisMenu.js",
              "node_modules/vis/dist/vis.min.js",
              "vendor/js/jvectormap/jquery-jvectormap-2.0.2.min.js",
              "vendor/js/jvectormap/jquery-jvectormap-us-mill.js",
              "vendor/js/iCheck/icheck.js",
              "node_modules/toastr/toastr.js"
            ]
          },
          "configurations": {
            "dev": {
              "optimization": true,
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
            },
            "local": {
              "optimization": true,
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "production": {
              "optimization": true,
              "sourceMap": false,
              "extractCss": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "styles": [
                "./src/styles.scss"
              ]
            }
          }
        },

これがAngular.jsonのサーブ設定です

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

@importステートメントを使用して、styles.scssのすべてのスタイルをインポートしました。確信が持てないことの1つは、Highchartsを使用していて、ビルド中に警告が表示されることです。

WARNING in ./node_modules/angular2-highcharts/dist/index.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/index.ts': Error: Can't resolve '../src/index.ts'

これら以外は、プロジェクトにコンパイル/実行時エラーはありません。

私の問題を読んでいただきありがとうございます。ヒントやヒントを教えてください。

Update：プロジェクトの構造は次のようになります。

|   .editorconfig
|   .gitignore
|   angular.json
|   browserslist
|   karma.conf.js
|   package-lock.json
|   package.json
|   protractor.conf.js
|   README.md
|   tsconfig.json
|   tslint.json
|   webpack.config.js
|          
+---src
|   |   favicon.ico
|   |   index.html
|   |   index.js
|   |   main.ts
|   |   polyfills.ts
|   |   styles.scss
|   |   test.ts
|   |   tsconfig.app.json
|   |   tsconfig.spec.json
|   |   typings.d.ts
|   |   webpack.config.common.js
|   |   
|   +---app       
|   +---assets
|   |   |
|   |   +---images
|   |   \---styles
|   |       |   style.scss
|   |       |   
|   |               
|   +---config
|   |       dev-config.js
|   |       local-config.js
|   |       prod-config.js
|   |       qa-config.js
|   |       
|   +---environments
|   |       environment.dev.ts
|   |       environment.prod.ts
|   |       environment.qa.ts
|   |       environment.ts
 

Answer 1

ファイルindex.tsがプロジェクトから欠落しているようです。ファイルindex.js拡張子がtsからjsに変更されたようで、それをtsとして探しています。

Srcフォルダーのindex.tsでindex.js拡張子を変更してみてください。

Answer 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;
     } 
-->

更新：

1. Angular CLIを使用して作成すると、app.module.tsは次のようになります。

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

すべてのアプリケーションには開始場所が必要です。 Angularには、アプリケーションがAppModuleから始まるという規則があります。 AppModuleはroutモジュールです。したがって、Angularが開始時にルートモジュール（AppModule）を作成するときに、AppComponentを開始点（bootstrap）をDOMに挿入します。

bootstrapアプリケーションが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で使用されているセレクターを再確認してください。

2. angular.jsonファイルのserveセクションで、projectNameをプロジェクトの名前に設定してみてください。たとえば、プロジェクトの名前が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"
       }
     }
   },
   

3. 上記の場合、アクションはアプリケーションを実行しません。次に、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/core@latest
   npm install @angular/http@latest
   npm install
   ng serve
   

いくつかの質問：

1. 手動でWebpack.configを作成しましたか？それを使用する理由は何ですか？該当する場合は、Webpack configの使用と調整を回避できます。 AngularデフォルトではCLIはこのファイルを作成しません。webpackファイルを取得するには、ng-ejectコマンドを手動で書き込む必要があります。

2. index.htmlとapp.module.tsを投稿できますか？

3. アプリケーションをローカルで実行すると、アプリケーションは機能しますか？コマンドng serveを実行するとどうなりますか？

Answer 3

私はこのような問題を以前にこのように解決しました：

ステップ1：node_modulesを削除する

ステップ2：npm i

ステップ3（機能しない場合）：npm rebuild node-sass

私の場合、それはうまくいきました。

これがお役に立てば幸いです。