如何使用RequireJS加载通过ng命令构建的Angular4项目？

我明白你想把原本用ng serve运行的Angular 4应用改成用RequireJS加载的需求——确实这方面的资料比较少，我来一步步给你梳理可行的实现步骤：

1. 安装RequireJS并配置入口 #

首先在你的Angular项目中安装RequireJS：

npm install requirejs --save

然后修改项目根目录的index.html，移除Angular CLI自动生成的所有脚本引用（比如runtime.js、polyfills.js这些），替换成RequireJS的加载脚本，并指定主入口文件：

<script src="node_modules/requirejs/require.js" data-main="src/main-require.js"></script>

2. 创建RequireJS配置文件 #

在src目录下新建main-require.js，这是RequireJS的主配置文件，用来定义模块路径和启动Angular应用：

require.config({
  baseUrl: './',
  // 配置各依赖模块的路径，确保指向对应的UMD包
  paths: {
    '@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
    '@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
    '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js', // 如果用到表单模块
    '@angular/router': 'node_modules/@angular/router/bundles/router.umd.js', // 如果用到路由
    'rxjs': 'node_modules/rxjs/bundles/rxjs.umd.js',
    'app': 'dist/app' // 指向Angular编译后的应用代码目录
  },
  // 处理非AMD规范的库（如果有的话）
  shim: {
    'rxjs': { exports: 'rxjs' }
  }
});

// 加载并启动Angular应用
require([
  '@angular/platform-browser-dynamic',
  'app/app.module'
], function(platformBrowserDynamic, AppModule) {
  platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(AppModule.AppModule);
});

3. 调整TypeScript编译配置 #

修改tsconfig.json，将模块编译格式改为AMD（RequireJS支持的模块规范）：

{
  "compilerOptions": {
    "module": "amd",
    "target": "es5",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

4. 编译Angular应用 #

运行Angular的构建命令，将代码编译为AMD模块：

ng build --prod

（如果不需要生产环境优化，也可以直接用ng build）

5. 测试运行 #

用一个静态HTTP服务器（比如http-server，先安装npm install http-server -g）启动项目：

http-server ./

访问服务器地址（默认是http://localhost:8080），检查RequireJS是否能正确加载所有模块并启动Angular应用。

关键注意事项 #

• 依赖包选择：必须使用Angular的UMD格式包（即bundles目录下的.umd.js文件），UMD规范兼容AMD，能被RequireJS正确识别。
• 路径准确性：根据你的项目实际结构调整paths中的路径，比如如果ng build的输出目录不是dist，要对应修改。
• 模板处理：Angular CLI默认会将组件的templateUrl内联到编译后的代码中，所以不需要额外处理模板加载；如果手动配置了模板，要确保模板路径能被RequireJS正确访问。
• 第三方库兼容：如果项目中用到非AMD规范的第三方库，需要在shim中配置其依赖和导出，确保RequireJS能正确加载。

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