Angular 5+Webpack中my-app标签始终显示Loading…，无法加载app.component？

先看你给出的index.html代码：

<!DOCTYPE html> 
<html> 
<head> 
  <base href="/"> 
  <title>Angular With Webpack</title> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
  {{2+2}} 
  <my-app>Loading...</my-app> 
</body> 
</html>

这俩问题其实是两个独立但又有关联的原因，我给你逐个拆解：

1. {{2+2}}表达式未被解析 #

Angular的模板插值表达式只在Angular组件的模板范围内生效，index.html的<body>标签属于Angular应用接管的DOM之外的区域——Angular编译器只会处理根组件（也就是<my-app>内部）的模板内容，对于外部的插值语法，它完全不会识别，所以会原封不动地显示在页面上。

如果想测试插值表达式，你应该把{{2+2}}写到app.component.html里，而不是直接放在index.html的body里。

2. <my-app>始终显示“Loading…” #

这个现象说明你的Angular应用根本没有成功启动，所以Angular没有替换掉<my-app>标签内的默认内容。常见的触发原因有这些：

• 入口文件未正确引导模块：检查你的main.ts（Webpack配置的入口文件），有没有写这行核心代码：

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
  

  如果没写或者写错了，Angular就没法启动应用。

• AppModule配置错误：打开app.module.ts，确认@NgModule的bootstrap数组里包含了AppComponent，同时declarations数组里也声明了它：

  @NgModule({
    declarations: [
      AppComponent // 必须声明
    ],
    imports: [
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent] // 必须引导这个组件
  })
  export class AppModule { }
  

  少了任何一项，Angular都不知道该把哪个组件渲染到<my-app>标签里。

• Webpack配置缺失关键loader：Angular 5需要特定的loader来处理组件的模板和样式，比如angular2-template-loader、raw-loader，如果Webpack配置里没加这些，AppComponent的代码会无法被正确编译打包，导致应用启动失败。另外，也要确认你配置了ts-loader来处理TypeScript代码。

• 打包产物未引入index.html：检查index.html里有没有通过<script>标签引入Webpack输出的js文件（通常是main.js或者类似的文件名）。如果没引入，Angular的代码根本没机会在浏览器里执行，自然不会替换<my-app>的内容。

内容的提问来源于stack exchange，提问作者Петро Сич