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

Question

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

无法解析“app/components/xxx/xxxxx”。来自xxxx\wwwroot\angular\app\app的组件。单元js

应用程序。模块引用了xxxxx。组件如下所示：

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

汇总配置。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

汇总配置。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

你试过使用typescript插件进行汇总吗？

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

使用npm安装进行安装——保存开发汇总插件类型脚本

在汇总配置中导入。js从“汇总插件类型脚本”导入类型脚本

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

插件：[typescript（）]

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

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

Answer 2

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

我还尝试使用rollup-plugin-alias、rollup-plugin-path和rollup-plugin-typecript。这些都不起作用。但是，我发现rollup-plugin-import-alias对我有用。

我的AOTtsconfig.json文件：

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

我的汇总配置。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时，公共文件的路径可以位于根目录之外的其他文件夹结构中。。。

"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'));
});