Setting up Angular 2 Getting Started Tutorial App on Sharepoint

Question

I'm trying to load a sample Angular 2 app into a Sharepoint web page. Looking at Angular's Getting Started live Plunker example,

There are only 3 files needed: (Ignore the styles.css file.)

• index.html
• app\\maint.ts
• app\\app.components.ts

I added an app folder and these same files onto my webpart but the app doesn't seem to load. It is not finding the .ts (typescript) file.

If I view the index.html page, there is an error that is being thrown in the JS: Error: XHR error (404 NOT FOUND) loading https://domain.com/Webparts/app/app.component.ts Error loading https://domain.com/Webparts/app/app.component.ts as "./app.component" from https://domain.com/Webparts/app/main.ts Stack trace:

I have the app folder created and the app.component.ts file underneath that. But for some reason, the page can't find that file.

Any ideas? I have tried uploading the *.js.map and the *.js files that Typescript generates. But no luck.

Answer 1

Looks like I had a path that was wrong. You just need the .JS files for the application to run if you specify it in the system.config like this. (Don't need the TypeScript files on the server.)

System.config({
       packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
System.import('app/main')
     .then(null, console.error.bind(console));