Angular 2：System.import()：不使用完整路径

Question

我正在使用以下两种不同的代码来导入文件运行时，其中一种工作正常，而另一种则抛出错误。

工作：

 System.import('../../FileName.ts').then(classObj => {          
        console.log(classObj);            
 });

不工作：

 System.import('App/Models/FileName.ts').then(classObj => {          
        console.log(classObj);            
 });

它抛出以下错误：

Can not find module 'App/Models/FileName.ts'

文件结构，其中编写了代码，我也尝试从相同的结构导入文件：

(1) 代码：ActivityModel.ts (2) 导入：ApplicationModel.ts

任何人都可以帮助我解决上述完整路径考虑问题。

Answer 1

将此添加到您的 tsconfig

"baseUrl": "."

替换“.”带有描述在哪里可以找到导入的基本文件夹的路径。在我的例子中，tsconfig 与我的 app 文件夹在同一个文件夹中，所以我只是将它设置为“。”

Answer 2

首先，确保你有最新版本的 webpack installed.Then 你可以尝试进行以下更改：

在webpack.config.js文件中更改以下代码，

resolve: {
        extensions: ['.ts', '.js', 'css'],
        "modules": [
            "./node_modules",
            "content"
        ]
    },

和

 output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].js',
            publicPath: 'dist/',
        }

在.ts文件更改中，

System.import('horizontal/models/FileName.ts').then(classObj => {          
        console.log(classObj);            
 });

resolver用于加载相对于应用根目录的文件，通过解析 webpack.config.js 中的 content 文件夹，其中的文件如上所示，可以通过绝对路径访问文件夹。

（现在，像 content/horizontal/models/FileName.ts 这样的路径将不起作用）
FileName.ts 的捆绑文件将在 dist 文件夹中创建，并且将在浏览器中加载 dynamically.Webpack 将抛出错误在浏览器中，它 cannot load chunk 0 之类的。这是因为，它会尝试加载与您的 HTML 相关的其他文件文件，而不是相对于您通过加载的第一个 JavaScript 文件脚本标签。

要迁移这个，你必须添加一个 publicPath 到你的 Webpack 配置.

希望，它会有所帮助！

Angular 2 : System.import() : Not working with full path