Search code examples
angularplunker

Angular2 app won't load in Plunker


Pop quiz! I built an Anguar2 example in Plunker mirroring a routing problem that I am facing so that I could post the question to StackOverflow, but I can't get the darn thing to run in Plunker. The index page loads without errors, but my app component never renders on the page. I'll give you bragging rights if you can spot my configuration problem so I can post my real question. Thanks in advance.

Here is my example http://plnkr.co/edit/2imWa2?p=preview

All the code is in Plunker. This is the config file I took from this working Angular 2 example (http://plnkr.co/edit/FNBFPE?p=preview) to try to set-up the app, but I don't think it plays well with my set-up.

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
     app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: 'src/app.ts',
      defaultExtension: 'ts'
    }
  }
});

Solution

  • I used another template https://plnkr.co/edit/NIbxKB?p=preview I don't know if this is what you want but this way it's working.

    Here is also a Plunker that is from an Angular team member http://plnkr.co/edit/mk8wPfoqS66Qsuu2yN4F?p=preview. It shows how you can provide ROUTER_DIRECTIVES globally.

    bootstrap(App, [
      ROUTER_PROVIDERS,
      provide(LocationStrategy, {useClass: HashLocationStrategy}),
      provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})
    ]).catch(err => console.error(err));