web-dev-qa-db-fra.com

Angular Application ne charge pas le module d'application / composants après la mise à niveau vers Angular 8.3.5

Nous avons un Angular 4 projet que j'ai récemment essayé de mettre à niveau vers Angular 8. J'ai suivi le guide de migration dans Angular, changé certaines des syntaxes et tout ce qui empêchait la construction du projet. J'ai rencontré le problème que mes styles ne se chargeaient pas correctement localement et pas du tout sur Azure . J'ai trouvé Webpack et j'ai essayé de le configurer, j'ai ajouté style-loader, sass-loader et css-loader. Maintenant, lorsque je suis en cours d'exécution localement, je peux voir dans l'onglet réseau du navigateur que tous les styles se chargent correctement, mais il charge uniquement le fichier index.html par défaut et ne démarre pas l'application.

Lorsque je déploie l'application sur Azure, elle charge d'autres composants, mais aucun des styles ne se charge. J'ai passé 3 semaines sur la migration, rien de prometteur pour le moment.

Version Outils/Plugins:

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

Voici ma configuration 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'
      }
    ])
  ]
};

Veuillez noter que la raison pour laquelle j'ai commenté l'utilisation de [] dans la configuration de Webpack était qu'il lançait une exception postcss-loader et qu'un problème sur Github a révélé qu'un conflit se produirait avec le chargeur par défaut sass et Webpack et que vous devriez les supprimer.

Voici la configuration de construction dans 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"
              ]
            }
          }
        },

Et voici la configuration de service dans 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"
            }
          }
        },

J'ai importé tous les styles dans styles.scss à l'aide des instructions @import. Une seule chose dont je ne suis pas sûr, c'est que j'utilise Highcharts et que je reçois des avertissements pendant la génération.

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'

À part cela, il n'y a pas d'erreur de compilation/d'exécution dans le projet.

Merci d'avoir pris le temps de lire mon problème. J'apprécie tout indice/conseil.

Mise à jour: Voici à quoi ressemble la structure du projet:

|   .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
angularwebpackangular8webpack-style-loaderangular-upgrade
16
Mustafa Mohammadi

Le fichier index.ts est manquant dans le projet, il semble que l'extension du fichier index.js ait été modifiée de ts à js et il le recherche sous le nom de ts.

Essayez de changer l'extension index.js avec index.ts dans le dossier src.

3
Hitech Hitesh

Si j'ai bien compris, le principal problème est que les styles ne sont pas appliqués.

Vous utilisez des fichiers Bootstrap selon cette ligne de votre configuration: "node_modules/bootstrap/dist/js/bootstrap.min.js", mais vous n'avez pas importé ces styles dans le groupe final. Essayez donc d'écrire ceci dans angular.json fichier:

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

De plus, vous devez importer des styles bootstrap pour les utiliser dans votre application dans style.scss fichier:

/* 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;
     } 
-->

MISE À JOUR:

  1. Notre app.module.ts devrait ressembler à ceci après avoir créé via Angular CLI:

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

Chaque application doit avoir un point de départ. Dans Angular, nous avons une convention, que notre application doit commencer à AppModule. AppModule est notre module de déroute. Nous disons donc à Angular que lors de la création de notre module racine (AppModule) au démarrage, nous voulons définir AppComponent comme point de départ (bootstrap) dans le DOM.

Le code qui sera bootstrap votre application placée dans main.ts fichier:

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));

Le code ci-dessus utilise la compilation Just in Time.

Permettez-moi de montrer comment index.html regards:

<!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>

Où <app-root></app-root> est un sélecteur pour 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 = {};
}

Vous pouvez modifier la page par défaut à afficher en la remplaçant par le sélecteur de votre composant dans le index.html.

Vérifiez de nouveau votre sélecteur de app.component.html et sélecteur utilisés dans votre index.html.

  1. Essayez de définir projectName sur votre nom de projet dans la section serve de angular.json fichier. Par exemple, si votre projet est nommé comme superappl, alors vous devriez écrire comme ceci:

    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. Si les actions ci-dessus n'exécutent pas votre application. Ensuite, je vous suggère de créer une nouvelle application de marque en utilisant Angular CLI et comparez votre index.html fichier et app.module.ts des dossiers. Commandes pour créer une nouvelle application de marque pour comparer votre application existante (en particulier, package.json et angular.json des dossiers):

    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

Quelques questions:

  1. Avez-vous créé manuellement Webpack.config? Quelle est la raison de l'utiliser? Vous pouvez éviter d'utiliser et de régler Webpack config si cela vous concerne. As Angular CLI par défaut ne crée pas ce fichier. Vous devez écrire manuellement ng-eject commande pour obtenir le fichier webpack.

  2. Pouvez-vous publier votre index.html et app.module.ts?

  3. Votre application fonctionne-t-elle lorsque vous exécutez votre application localement? Je veux dire lorsque vous exécutez la commande ng serve?
3
StepUp

J'ai résolu ce genre de problème auparavant comme ceci:

ÉTAPE 1: supprimez node_modules

ÉTAPE 2: npm i

ÉTAPE 3 (si cela ne fonctionne pas): npm rebuild node-sass

Dans mon cas, cela a bien fonctionné.

J'espère que cela t'aidera.

0
Amir Christian