angular - 带有 typescript 2路径别名的Rollup Angular 2

Question

我正在尝试汇总一个 Angular 2 应用程序，但我有:

Could not resolve 'app/components/xxx/xxxxx.component' from xxxx\wwwroot\angular\app\app.module.js

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 时，我的公共(public)文件路径可以位于根目录之外的其他文件夹结构中...

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

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

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