使用 typescript 2 路径别名汇总 Angular 2

Question

我正在尝试汇总 Angular 2 应用，但我有：

无法从 xxxx\wwwroot\angular\app\app.module.js 解析“app/components/xxx/xxxxx.component”

app.module 有一个对xxxxx.component 的引用，如下所示：

import { xxxxx } from 'app/components/xxx/xxxxx.component'

所以 tsconfig.js 有：

"compilerOptions": {
  ...
  "paths": {
    "app/*": [ "./app/*" ],
    ...
  },
  "outDir": "wwwroot", 
  ...
},

如何在汇总中解析诸如 typescript 之类的路径别名？

我试过了

1) https://github.com/frostney/rollup-plugin-alias

rollup-config.js：

export default {
  entry: 'wwwroot/angular/app/main-aot.js',
  dest: 'wwwroot/dist/build.js',
  sourceMap: false,
  format: 'iife',
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      alias({
            'app': '.' // asuming "wwwroot/angular/app/" is the working dir
      }),
      uglify()
  ]
}

2) https://github.com/dot-build/rollup-plugin-includepaths

rollup-config.js：

let includePathOptions = {
    include: {},
    paths: ['../'], // asuming "wwwroot/angular/app/" is the working dir
    external: [],
    extensions: ['.js']
};

export default {
  entry: 'wwwroot/angular/app/main-aot.js',
  dest: 'wwwroot/dist/build.js',
  sourceMap: false,
  format: 'iife',
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      includePaths(includePathOptions),
      uglify()
  ]
}

但这些都不起作用。任何想法？提前谢谢！！！

Answer 1

我在 ASP.NET MVC 环境中使用 Angular 4，在我的 tsconfig.json 文件中使用“路径”时遇到了同样的问题。

我也尝试过使用rollup-plugin-alias、rollup-plugin-paths 和rollup-plugin-typescript。这些都没有奏效。但是，我发现 rollup-plugin-import-alias 对我有用。

我的 AOT tsconfig.json 文件：

{
    "compilerOptions": {
        // ...
        "baseUrl": "./",
        "paths": {
            "myCommon/*": ["./tmp/myCommonFolder/*"]
        }
        // ...
    }
}

我的rollup-config.js 文件：

import nodeResolve      from 'rollup-plugin-node-resolve';
import commonjs         from 'rollup-plugin-commonjs';
import importAlias      from 'rollup-plugin-import-alias';

export default {
    // ...
    plugins: [
        nodeResolve({jsnext: true, module: true})
        , commonjs({
            include: 'node_modules/rxjs/**'
        })
        , importAlias({
            Paths: {
                // `__dirname` is built into rollup and was needed for me to get the right path
                myCommon: __dirname + '/tmp/myCommonFolder'
            }
            , Extentions: ['js']
        })
    ]
    // ...
};

旁注：使用 JIT 时，我的 common 文件路径可以位于根目录之外的其他文件夹结构中...

"paths": {
    "myCommon/*": ["./../../../Scripts/myCommonFolder/*"]
}

但是，AOT 和 Rollup 似乎无法超出应用根目录。因此，在执行 AOT 和汇总构建过程的 gulp 任务中，我将所有内容复制到应用程序根目录中的临时文件夹中。

gulp.task('tmp:copy', function () {
    gulp.src(['Scripts/myCommonFolder/**'])
    .pipe(gulp.dest('Areas/Services/Scripts/MyAppRoot/tmp/myCommonFolder'));
});

Answer 2

您是否尝试过使用 typescript 插件进行汇总？

https://github.com/rollup/rollup-plugin-typescript

使用npm install --save-dev rollup-plugin-typescript安装

在你的 rollup-config.js 中导入 import typescript from 'rollup-plugin-typescript';

并确保将其添加到插件部分，如

plugins: [ typescript() ]

根据您的项目设置，您可能需要更改依赖项以使用本地 typescript 安装，例如

    plugins: [
    typescript({
            typescript: require('typescript')
        })
]