角度应用不'；t升级到Angular 8.3.5后加载应用程序模块/组件_Angular_Webpack_Angular8_Webpack Style Loader_Angular Upgrade

角度应用不'；t升级到Angular 8.3.5后加载应用程序模块/组件

angular webpack

角度应用不'；t升级到Angular 8.3.5后加载应用程序模块/组件,angular,webpack,angular8,webpack-style-loader,angular-upgrade,Angular,Webpack,Angular8,Webpack Style Loader,Angular Upgrade,我们有一个angular4项目，我最近尝试升级到angular8。我遵循Angular网站中的迁移指南，更改了一些语法，以及阻止项目构建的所有内容。我面临的问题是，我的风格没有在本地正确加载，而且根本没有在Azure上加载。我找到了Webpack并尝试对其进行配置，添加了样式加载器、sass加载器和css加载器。现在，当我在本地运行时，我可以在浏览器的“网络”选项卡中看到所有样式都已正确加载，但它只加载默认的index.html文件，而不引导应用程序当我在Azure上部署应用程序时，它会加

我们有一个

angular4

项目，我最近尝试升级到

angular8

。我遵循Angular网站中的迁移指南，更改了一些语法，以及阻止项目构建的所有内容。我面临的问题是，我的风格没有在本地正确加载，而且根本没有在Azure上加载。我找到了

Webpack

并尝试对其进行配置，添加了样式加载器、sass加载器和css加载器。现在，当我在本地运行时，我可以在浏览器的“网络”选项卡中看到所有样式都已正确加载，但它只加载默认的index.html文件，而不引导应用程序

当我在Azure上部署应用程序时，它会加载其他组件，但没有加载任何样式。我花了三个星期的时间进行迁移，但还没有什么进展

工具/插件版本：

角度CLI:8.3.5 节点：10.15.1 操作系统：win32 x64 角度：8.2.7 ... 动画、通用、编译器、编译器cli、核心、表单 ... 语言服务、平台浏览器、平台浏览器动态 ... 平台服务器、路由器软件包版本 ----------------------------------------------------------- @角度devkit/architect 0.803.5 @角度开发套件/构建角度0.803.5 @角度开发工具包/构建优化器0.803.5 @角度开发套件/构建网页包0.803.5 @角度devkit/核心8.3.5 @角度devkit/示意图8.3.5 @角度/cdk 8.2.0 @角度/cli 8.3.5 @angular/http 5.2.11 @角度/材料8.2.0 @ngtools/webpack 8.3.5 @示意图/角度8.3.5 @示意图/更新0.803.5 rxjs 6.5.3 打字稿3.5.3

webpack 4.40.2项目中缺少index.ts文件。似乎index.js文件扩展名已从ts更改为js，它正在将其作为ts进行查找

尝试使用src文件夹中的index.ts更改index.js扩展名。

如果我理解正确，主要问题是没有应用样式

您正在根据以下配置行使用引导文件：

“node\u modules/Bootstrap/dist/js/Bootstrap.min.js”

，但尚未将此样式导入最终捆绑包。因此，尝试将其写入

angular.json

文件：

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.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;
     } 
-->

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

此外，您需要导入

bootstrap

样式，以便在应用程序中使用它们到

style.scss

文件中：

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.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;
     } 
-->

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

每个应用程序都应该有一个起点。在Angular中，我们有一个约定，即我们的应用程序应该从

AppModule

开始<代码>应用模块是我们的路由模块。因此，我们告诉Angular，当它在开始时创建根模块（

AppModule

）时，我们希望将

AppComponent

设置为DOM的起点（

bootstrap

）

将引导应用程序进入

main.ts

文件的代码：

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.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;
     } 
-->

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

上面的代码使用即时编译

让我展示一下

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>

通过在

index.html

中替换组件的选择器，可以更改显示的默认页面

仔细检查

app.component.html的选择器和index.html中使用的选择器

在angular.json 文件的service 部分，尝试将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" } } }, 如果以上操作无法运行您的应用程序。然后我建议您使用angularcli 创建新的品牌应用程序，并比较index.html 文件和app.module.ts 文件。用于创建新品牌应用程序以比较现有应用程序的命令（尤其是，package.json 和angular.json 文件）：一些问题：您是否手动创建了Webpack.config ？使用它的理由是什么？如果适用，您可以避免使用和调整Webpack config 。默认情况下，As Angular CLI不会创建此文件。您应该手动编写ng eject 命令以获取网页包文件你能发布你的index.html 和app.module.ts 吗当您在本地运行应用程序时，应用程序是否工作？我的意思是当您运行命令ng serve 我以前解决过这样的问题： 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" } } }, 步骤1：删除node_模块第二步：npm i 步骤3（如果不起作用）：npm重建节点sass 就我的情况而言，效果很好我希望这能对您有所帮助。几天前我也遇到了同样的问题。我还在寻找它。请张贴您的项目结构。期待看到solution@MustafaMohammadi难道你不认为你在这里漏掉了什么“改变了一些语法”？我解决了这种问题（将angular 4升级到angular 7），直到Forestyles现在可以正确加载（正如我在网络选项卡中看到的）。当前的问题是，当我运行应用程序时，它只加载默认的index.html文件。无法启动AppModule。具体来说，它应该重定向到登录页面或仪表板，但事实并非如此。当我在浏览器中输入localhost/login时，文档将在网络选项卡中加载，但组件不会加载。只是停留在默认索引中。htmlOn Azure，是的，没有加载样式。关于引导，我已经按照angular doc的建议导入了styles.scss文件。非常感谢您抽出时间回答这个问题。我一定要全部尝尝。但其中大部分已经过检查。本周我很忙，将尽快发布更新。@MustafaMohammadi欢迎您！我相信这会对你有所帮助！：）不幸的金枪鱼