使用Webpack构建Angular时模块导入异常问题求助

针对你手动用Webpack搭建Angular项目时遇到的BrowserModule指令（NgIf/NgFor）、NgSelectModule组件无法识别的问题，以下是具体修复步骤：

1. 修正模板编译逻辑 #

你当前用raw-loader加载模板并通过require直接赋值给template，这种方式跳过了Angular编译器对模板的解析，导致模块导出的指令无法和模板关联。

修改Webpack规则：替换原.template.html的loader为@ngtools/webpack

{
  test: /\.template\.html$/,
  exclude: /node_modules/,
  use: '@ngtools/webpack'
}

修改组件模板引入：把template: require(...)改为templateUrl，让Angular自动处理编译

@Component({
    selector: 'app-root',
    templateUrl: './app.component.template.html', // 指向你的组件模板文件
})

2. 扩大@ngtools/webpack的处理范围 #

当前配置只让@ngtools/webpack处理app目录下的文件，但Angular核心模块和第三方模块（如@ng-select/ng-select）的代码也需要Ivy链接器处理才能被正确识别。

调整Webpack的ts/js规则：

{
    test: /\.[jt]sx?$/,
    loader: '@ngtools/webpack',
    exclude: /node_modules\/(?!(@angular|@ng-select)\/)/, // 允许处理@angular和@ng-select下的文件
    include: [path.resolve(__dirname, 'app')]
}

同时调整babel-loader的范围：避免重复处理已被@ngtools处理的模块

{
    test: /\.[cm]?js$/,
    exclude: /node_modules\/(@angular|@ng-select)/,
    use: {
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
        compact: false,
        plugins: ['@angular/compiler-cli/linker/babel'],
      },
    },
}

3. 导入FormsModule支持ngModel #

ngModel不属于BrowserModule或NgSelectModule，必须单独导入FormsModule才能使用：

import { FormsModule } from '@angular/forms';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        NgSelectModule,
        FormsModule, // 添加到imports数组
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

4. 调整tsconfig的编译模式 #

compilationMode: partial是为增量编译设计的，JIT模式下不需要这个配置，直接移除：

"angularCompilerOptions": {
  "enableI18nLegacyMessageIdFormat": false,
  "strictInjectionParameters": true,
  "strictInputAccessModifiers": true,
  "strictTemplates": true
  // 删除 "compilationMode": "partial"
}

5. 拆分页面模板与组件模板 #

你当前的app.template.html包含了完整的HTML文档结构，这不符合Angular组件模板的要求（组件模板应该是<app-root>内部的内容）：

• 把原app.template.html改名为index.html，作为项目的入口页面
• 新建app.component.template.html，写入组件实际内容，比如：

<div *ngIf="true">NgIf 生效了！</div>
<ng-select [(ngModel)]="selected" [items]="source"></ng-select>

• 修改app.component.ts的templateUrl指向这个新文件

完成以上所有修改后，重新构建项目，导入模块的指令和组件就能被正确识别了。

内容的提问来源于stack exchange，提问作者David Hubner