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

它抛出以下错误:

找不到模块'App/Models/FileName.ts'

文件结构,其中编写代码,我也尝试从同一结构导入文件:

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

任何人都可以帮我解决上述全路径考虑问题.

Answer 1

首先,确保安装了最新版本的webpack.然后您可以尝试以下更改:

在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用于加载相对于应用程序的根文件,并通过解决content在文件夹webpack.config.js,该文件夹内的文件可以通过绝对路径如上所示访问.

  (现在,路径content/horizontal/models/FileName.ts不起作用)

• 捆绑文件FileName.ts将在dist文件夹中创建,并将在浏览器中动态加载.Webpack将在浏览器中抛出错误,即它cannot load chunk 0或其他东西.这是因为,它尝试加载相对于HTML文件的其他文件,而不是相对于通过脚本标记加载的第一个JavaScript文件.

  要迁移它,您必须添加publicPath到Webpack配置.

希望,它会帮助你!