Angular 4+引入第三方模块遇base标签导致404错误

兄弟，我之前踩过Angular嵌MVC的类似坑，给你梳理几个大概率能解决问题的方向：

1. 先搞定MVC的静态文件访问逻辑 #

MVC默认只会从wwwroot目录对外提供静态文件，但你通过package.json安装的第三方模块存在node_modules目录里，浏览器请求时自然找不到对应资源。这里有两种处理方式：

• 推荐方案：配置Angular构建时，把第三方模块的依赖打包到wwwroot下的指定目录（比如wwwroot/assets/libs），这样MVC能正常识别并提供这些静态文件；
• 临时开发方案：在MVC的Startup.cs里配置允许访问node_modules目录（仅限开发环境，生产环境不建议这么做，有安全风险），代码示例：

app.UseStaticFiles();
if (env.IsDevelopment())
{
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(env.ContentRootPath, "node_modules")),
        RequestPath = "/node_modules"
    });
}

2. 检查Angular的模块引入与编译配置 #

有时候你在app.module.ts里引入模块的写法看起来没问题，但编译后请求路径会出错。比如你写了：

import { ThirdPartyModule } from 'third-party-package';

但Angular编译后可能会错误地从src/third-party-package去请求资源。这时候要检查tsconfig.json的baseUrl和paths配置，确保Angular优先从node_modules查找第三方包：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "*": ["node_modules/*", "src/*"]
    }
  }
}

3. 确认Angular构建的base路径与MVC布局一致 #

你已经在MVC布局里加了base标签，那一定要保证Angular构建时的--base-href参数和这个标签的内容匹配。比如布局里的base标签是<base href="/">，那构建命令应该是：

ng build --base-href /

路径不匹配的话，构建后的所有资源请求路径都会错位，第三方模块的文件自然会404。

4. 检查Visual Studio的文件部署设置 #

有时候Visual Studio默认不会把node_modules里的文件同步到运行目录，你可以右键点击第三方模块的核心文件，选择「属性」，把「复制到输出目录」改成「如果较新则复制」——不过还是那句话，更推荐把依赖打包到wwwroot的方案。

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