0

I am trying to create a very basic SharePoint Hosted App with Angular2.

App deployed successfully but it does not render the html properly. And I am stuck at this initial level only. refer below output:

enter image description here

And below is my component code :

import { Component } from 'angular2/core';
@Component({
    selector: 'my-app',
    template: `<h1> test sharepoint app!!! </h1>`
})
export class AppComponent { }

below is a snippet of my selector:

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <my-app></my-app>

</asp:Content>

I am just trying to render this one line of template.

5
  • 1
    Is this a SharePoint issue or an Angular issue? If you do this in a vanilla Angular app without SharePoint, does it behave differently? May 25 '17 at 13:22
  • With this same component and <my-app></my-app> selector code works perfectly when I write Angular2 App without SharePoint.. May 25 '17 at 13:25
  • sorry I forget to mention that I am getting fnRef.apply is not a function error in my console. May 25 '17 at 13:27
  • I never tried Angular(2) in SP, switched to Vue. What you can try and test (to see if SPs parser is causing trouble) is to save a normal (no ASPX code!) HTML file (like Derek says in the first comment) to your DocLib (and name it .aspx, because SP can't handle .html extension) and open that... that way SP should just behave as a IIS server May 25 '17 at 13:50
  • I updated the angular2-polyfills.js reference file to the beta-12 version. And re-deployed my App. The issue is resolved and also I no longer see the error message of fnRef.apply is not a function. May 26 '17 at 5:32
0

The following code working for me you can refer if you think it helps.

HTML

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
      System.import('main.js').catch(function(err){ console.error(err); });
</script>
<app-root></app-root>

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

The below 2 files are in app folder

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {AppComponent} from './app.component';


@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: '<h1>Hello World, {{title}}</h1>'
})

export class AppComponent {
    protected title:string = "Venkat Konjeti";    
}

I am using this code in my sample SPFx web part. I hope the references and code might helpful to trace your problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.