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

Question

I am using below two different code to import a file runtime, one of them is working fine while other one throw error.

Working:

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

Not Working:

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

It throw below error :

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

File Structure in which code is written and i also trying to import file from same structure:

(1) Code : ActivityModel.ts (2) Importing : ApplicationModel.ts

Any one can help me to resolve above full path consideration issue.

Seems like your FileName.ts is outside 2 folder so absolute path(App/Models/FileName.ts) won't work. you need to provide relative path (../../FileName.ts). — Jijo Cleetus
– Jijo Cleetus, Commented Feb 23, 2017 at 7:11
I know that, but in dynamic that not predefined file path, it can be any file from any folder, so i have full path. — Sandip - Frontend Developer
– Sandip - Frontend Developer, Commented Feb 23, 2017 at 7:12
@SandipPatel Did you set the baseURL config property of SystemJS? — Dinistro
– Dinistro, Commented Feb 23, 2017 at 7:43

Darshita · Accepted Answer · 2017-07-11 06:45:39Z

First of all, make sure you have latest version of webpack installed.Then you can try with following changes :

In webpack.config.js file change the following piece of code,

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

And

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

In .ts file change,

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

The resolver is used to load files relative to the app root and by resolving content folder in webpack.config.js, file within that folder can be accessed by absolute path as shown above.

(Now,path like content/horizontal/models/FileName.ts won't work)
The bundle file of FileName.ts will be created in dist folder and will be loaded in the browser dynamically.Webpack will throw an error in the browser, that it cannot load chunk 0 or something. This is because, it tries to load the other files relative to the your HTML file and not relative to the first JavaScript file you loaded via the script tag.

To migrate this, you have to add a publicPath to your Webpack config.

Hope,It wil help!

James Considine · Accepted Answer · 2017-02-23 16:30:02Z

0

Add this to your tsconfig

"baseUrl": "."

Replace the "." with a path that describes where to find the base folder for your imports. In my case, tsconfig was in the same folder as my app folder, so I simply set it to "."

answered Feb 23, 2017 at 16:30

James Considine

3232 silver badges13 bronze badges

1 Comment

Sandip - Frontend Developer Over a year ago

No luck, still same issue

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related