Angular4 in single html file

Question

I am using this as an example: JSFiddle - angular2 example My goal is to use angular4 in a single html file and create a single page application without webpack and pipes.

And this is my code, which is currently not working.

<!DOCTYPE html>
<html>
   <head>
      <script type="text/javascript" src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
      <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/zone.min.js"></script>
      <script type="text/javascript" src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>
      <script type="text/javascript" src="https://unpkg.com/@angular/[email protected]/bundles/core.umd.js"></script>
      <script type="text/javascript" src="https://unpkg.com/@angular/[email protected]/bundles/common.umd.js"></script>
      <script type="text/javascript" src="https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
      <script type="text/javascript" src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
      <script type="text/javascript" src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
      <script type="text/typescript">
         let { Component, NgModule } = ng.core;
         @Component({
            selector: 'my-app',
            template: `
            <h1>Hello, {{ name }}</h1>
            <button (click)="increment()">Click {{ counter }}</button>
            `,
         })
         class HomeComponent {
         counter = 0;
         name = 'Angular 2'

         increment() {
         this.counter++;
         }
         }

         const { BrowserModule } = ng.platformBrowser;

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

         const { platformBrowserDynamic } = ng.platformBrowserDynamic;
         platformBrowserDynamic().bootstrapModule(AppModule);
      </script>
   </head>
   <body>
      <my-app></my-app>
   </body>
</html>

you are wring typescript code in browser script the script tag dosent understand the @component and @Module metadata. you need to compile it to java script for it to work — Rahul Singh
– Rahul Singh, Commented Nov 24, 2017 at 10:28

Ant Kutschera · Accepted Answer · 2019-03-24 19:44:08Z

Like @nikksan says, he just needed to add the transpiler, which can be done by adding the following scripts to the end of the file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.4000/typescript.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/basarat/typescript-script@master/transpiler.js"></script>

Updated to Angular 7, it looks like this:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/zone.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/bundles/rxjs.umd.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@angular/[email protected]/bundles/core.umd.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@angular/[email protected]/bundles/common.umd.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
</head>
<body>
<my-app></my-app>
<script type="text/typescript">
let { Component, NgModule } = ng.core;
@Component({
selector: 'my-app',
template: `
    <h1>Hello, {{ name }}</h1>
    <button (click)="increment()">Click {{ counter }}</button>
`,
})
class HomeComponent {
    counter = 0;
    name = 'Angular 2'

    increment() {
        this.counter++;
    }
}

const { BrowserModule } = ng.platformBrowser;

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

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.4000/typescript.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/basarat/typescript-script@master/transpiler.js"></script>
</body>
</html>

Collectives™ on Stack Overflow

Angular4 in single html file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related