sebastienlevert

//...}

@NgModule({
  imports: [BrowserModule],
  declarations: [MockData],
  providers: [
    { provide: ListsService, useFactory: ListsServiceFactory }
  ],
  entryComponents: [MockData]
})

sebastienlevert

import { Component, NgModule, Input, ViewEncapsulation } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { ListsService } from '../../../services/lists.service';
import { List } from '../../../models/list';
import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
import { MockListsService } from '../../../services/mock/lists.service';

@Component({

sebastienlevert

import { WebPartContext } from '@microsoft/sp-webpart-base';
import { Injectable } from '@angular/core';
import { IListsService } from './../interfaces/lists.service';
import { List } from '../../models/list';

@Injectable()
export class MockListsService implements IListsService {
  /**
   * Builds a Mocked list of lists
   */

sebastienlevert

import { WebPartContext } from '@microsoft/sp-webpart-base';
import { Injectable } from '@angular/core';
import { IListsService } from './interfaces/lists.service';
import { List } from './../models/list';
import { SPHttpClient, HttpClientResponse } from '@microsoft/sp-http'


@Injectable()
export class ListsService implements IListsService {
  /**

sebastienlevert

import { List } from "../../models/list";
import { WebPartContext } from '@microsoft/sp-webpart-base';

/**
 * Interface for Lists Service
 */
export interface IListsService {
  /**
   * Gets all the lists from the current Site
   */

sebastienlevert

<div class="helloWorld">
  <div class="container">
    <div class="row">
      <div class="column">
        <span class="title">Welcome to SharePoint!</span>
        <ul>
          <li *ngFor="let list of lists | async">
            {{ list.Title }}
          </li>
        </ul>

sebastienlevert

import { Component, NgModule, Input, ViewEncapsulation } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { SPHttpClient, HttpClientResponse, IGraphHttpClientOptions } from '@microsoft/sp-http'

@Component({
  selector: 'list-rest',
  templateUrl: './list-rest.html',
  styleUrls: [ './list-rest.scss' ],

sebastienlevert

//web components ES5 shim
import './../../../elements/wc-shim.js';
import { registerAsCustomElements } from '@angular/elements';
import { platformBrowser } from '@angular/platform-browser';

import { ListRest, ListRestModule } from './list-rest';
import { ListRestModuleNgFactory } from './list-rest.ngfactory';

registerAsCustomElements(
  [ ListRest ],

sebastienlevert

import "zone.js";

(function () {
  //...
  }());

sebastienlevert

{
  //...
  "dependencies": {
    //...
    "zone.js": "0.8.18"
  },
  //...
}